You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -6,37 +6,138 @@ description: You can learn about the customization in the documentation of the D
6
6
7
7
# Customization
8
8
9
-
Besides configuring Kanban, you can customize its appearance and behaviour. The widget allows you to specify a custom template for cards, modify a context menu for cards, columns and rows, change the Toolbar structure and functionality, and apply custom css styles to Kanban.
9
+
You can customize the Kanban appearance and behavior with the following properties:
10
+
11
+
-[`cardTemplate`](api/config/js_kanban_cardtemplate_config.md) — render cards with a custom HTML template
12
+
-[`cardShape.menu`](api/config/js_kanban_cardshape_config.md), [`columnShape.menu`](api/config/js_kanban_columnshape_config.md), [`rowShape.menu`](api/config/js_kanban_rowshape_config.md) — modify the context menu for cards, columns, and rows
-[`items`](api/config/toolbar_items_config.md) — rearrange Toolbar structure and add custom controls
16
+
- CSS variables — adjust visual styles (see the [Stylization](guides/stylization.md) section)
10
17
11
18
## Custom cards
12
19
13
-
To display cards by a custom template, you can use the [`cardTemplate`](api/config/js_kanban_cardtemplate_config.md) property. It is a callback function that allows you to define the desired styles and logic and apply it to Kanban. See the snippet below:
20
+
Use the [`cardTemplate`](api/config/js_kanban_cardtemplate_config.md) property to render cards with a custom HTML template. The callback returns the markup for each card.
21
+
22
+
The callback receives an object with the following parameters:
23
+
24
+
-`cardFields` — card data
25
+
-`selected` — whether the card is selected
26
+
-`dragging` — whether the card is being dragged
27
+
-`cardShape` — card configuration
28
+
29
+
To embed a context menu trigger in a custom card template, wrap the menu icon in a `<div>` with the `data-menu-id=${cardFields.id}` attribute (the same structure as the built-in card). The widget binds the menu to the wrapper through this attribute.
30
+
31
+
The following demo applies a custom card template:
To customize a context menu for cards, columns and rows, you can use the corresponding [`cardShape`](api/config/js_kanban_cardshape_config.md), [`columnShape`](api/config/js_kanban_columnshape_config.md) and [`rowShape`](api/config/js_kanban_rowshape_config.md) properties. See the snippet below:
37
+
Configure the context menu for cards, columns, and rows through the [`cardShape.menu`](api/config/js_kanban_cardshape_config.md), [`columnShape.menu`](api/config/js_kanban_columnshape_config.md), and [`rowShape.menu`](api/config/js_kanban_rowshape_config.md) properties. Each `menu.items` entry can use a built-in action ID to invoke a default operation, or define a custom `onClick` handler for any other behavior.
By default the card menu shows **Duplicate** and **Delete** options. Available built-in action IDs:
22
42
23
-
## Custom toolbar
43
+
-`"duplicate-card"` — duplicate the card
44
+
-`"delete-card"` — delete the card
24
45
25
-
To customize the Toolbar structure and its functionality, you can use the [`items`](api/config/toolbar_items_config.md) property. In the array of this config you can define controls you need, arrange them in the desired order as well as modify their behaviour.
46
+
### `columnShape.menu`
26
47
27
-
In the snippet below you can see how to customize the following:
48
+
-`"add-card"` — add a new card to the column
49
+
-`"set-edit"` — rename the column
50
+
-`"move-column:left"`, `"move-column:right"` — move the column left or right
51
+
-`"delete-column"` — delete the column
52
+
53
+
### `rowShape.menu`
54
+
55
+
-`"set-edit"` — rename the row
56
+
-`"move-row:up"`, `"move-row:down"` — move the row up or down
57
+
-`"delete-row"` — delete the row
58
+
59
+
Set `menu.items` to a function to render a different menu per card, column, or row. Return `null` or `false` from the function to hide the menu for a specific item.
For `fixedHeaders` to take effect, set a fixed height on the Kanban container so the board scrolls vertically.
100
+
:::
101
+
102
+
## Conditional CSS classes
103
+
104
+
To apply a CSS class conditionally, pass a function to the `css` parameter of [`cardShape`](api/config/js_kanban_cardshape_config.md), [`columnShape`](api/config/js_kanban_columnshape_config.md), or [`rowShape`](api/config/js_kanban_rowshape_config.md). The function returns a class name based on the current data:
105
+
106
+
-[`cardShape.css: (card) => string`](api/config/js_kanban_cardshape_config.md) — class applied to a card
107
+
-[`columnShape.css: (column, cards) => string`](api/config/js_kanban_columnshape_config.md) — class applied to a column
108
+
-[`rowShape.css: (row, cards) => string`](api/config/js_kanban_rowshape_config.md) — class applied to a row
109
+
110
+
The following code snippet highlights overdue cards and underloaded columns:
Use the [`items`](api/config/toolbar_items_config.md) property to customize the Toolbar structure. The array defines which controls appear, their order, and their behavior. An entry can be:
You can customize the appearance of Kanban by changing values of the corresponding *CSS variables*. Refer to the [**Stylization**](guides/stylization.md) section for details.
139
+
Change the values of CSS variables to customize the Kanban appearance. See the [Stylization](guides/stylization.md) section for the full list.
39
140
40
-
In this snippet you can see how to apply custom styles to Kanban:
141
+
The following snippet applies custom styles to Kanban:
Copy file name to clipboardExpand all lines: docs/guides/initialization.md
+27-27Lines changed: 27 additions & 27 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,49 +6,51 @@ description: You can learn about the initialization in the documentation of the
6
6
7
7
# Initialization
8
8
9
-
This guide will give you detailed instructions on how to create Kanban on a page to enrich your application with features of the Kanban board. Take the following steps to get a ready-to-use component:
9
+
Create a Kanban widget on a page in three steps:
10
10
11
-
1.[Include the Kanban source files on a page](#including-source-files).
12
-
2.[Create a container for Kanban](#creating-container).
13
-
3.[Initialize Kanban with a constructor](#initializing-kanban).
11
+
1.[Include source files](#include-source-files).
12
+
2.[Create a container](#create-a-container).
13
+
3.[Initialize Kanban](#initialize-kanban).
14
14
15
-
## Including source files
15
+
## Include source files
16
16
17
-
[Download the package](https://dhtmlx.com/docs/products/dhtmlxKanban/download.shtml) and unpack it into a folder of your project.
17
+
[Download the package](https://dhtmlx.com/docs/products/dhtmlxKanban/download.shtml) and unpack the contents into a folder of your project.
18
18
19
-
To create Kanban, you need to include 2 source files on your page:
19
+
Include the following source files on your page:
20
20
21
21
-*kanban.js*
22
22
-*kanban.css*
23
23
24
-
Make sure that you set correct relative paths to the source files:
Add a container for Kanban and give it an ID, for example *"root"*:
33
+
Add a container for Kanban and assign an ID, for example `root`:
34
34
35
35
~~~jsx title="index.html"
36
36
<div id="root"></div>
37
37
~~~
38
38
39
-
If you want to create the widget along with its *Toolbar*, you need to add a separate container for it:
39
+
To create the widget with a Toolbar, add a separate container for the Toolbar:
40
40
41
41
~~~jsx {1} title="index.html"
42
42
<div id="toolbar"></div>// container for Toolbar
43
43
<div id="root"></div>// container for Kanban
44
44
~~~
45
45
46
-
## Initializing Kanban
46
+
## Initialize Kanban
47
47
48
-
Initialize Kanban with the **kanban.Kanban** constructor. It takes two parameters:
48
+
Initialize Kanban with the `kanban.Kanban` constructor. The constructor takes two parameters:
49
49
50
-
- an HTML container (the ID of the HTML container)
51
-
- an object with configuration properties. [See the full list here](#configuration-properties)
50
+
- a CSS selector for the HTML container (or the container element itself)
51
+
- a configuration object (see the [full list of properties](#configuration-properties))
52
+
53
+
The following code snippet creates a Kanban instance:
52
54
53
55
~~~jsx title="index.html"
54
56
// create Kanban
@@ -57,35 +59,33 @@ new kanban.Kanban("#root", {
57
59
});
58
60
~~~
59
61
60
-
If you want to create the widget along with its *Toolbar*, you need to initialize it separately using the **kanban.Toolbar** constructor. It also takes two parameters:
61
-
62
-
- an HTML container (the ID of the HTML container)
63
-
- an object with configuration properties
62
+
To create the widget with a Toolbar, initialize the Toolbar separately with the `kanban.Toolbar` constructor. The Toolbar controls operate on the Kanban instance through the [`api`](api/config/toolbar_api_config.md) parameter. Pass `board.api` to bind the Toolbar to the board:
64
63
65
-
~~~jsx {6-8} title="index.html"
64
+
~~~jsx {7} title="index.html"
66
65
// create Kanban
67
66
constboard=newkanban.Kanban("#root", {
68
67
// configuration properties
69
68
});
70
69
71
70
newkanban.Toolbar("#toolbar", {
72
-
// configuration properties
71
+
api:board.api, // required: links Toolbar controls to the Kanban instance
72
+
// other configuration properties
73
73
});
74
74
~~~
75
75
76
76
:::info
77
-
To learn more about configuring the Toolbar of Kanban, read the [**Configuration**](guides/configuration.md/#toolbar) section
77
+
For details on configuring the Toolbar, read the [Configuration](guides/configuration.md#toolbar) section.
78
78
:::
79
79
80
80
### Configuration properties
81
81
82
-
:::note
83
-
The full list of properties to configure **Kanban** can be found [**here**](api/overview/properties_overview.md). <br/>
84
-
The full list of properties to configure **Toolbar of Kanban** can be found [**here**](api/overview/toolbar_properties_overview.md).
85
-
:::
82
+
For the full configuration reference:
83
+
84
+
-[Kanban properties overview](api/overview/properties_overview.md) — all Kanban configuration properties
85
+
-[Toolbar properties overview](api/overview/toolbar_properties_overview.md) — all Toolbar configuration properties
86
86
87
87
## Example
88
88
89
-
In this snippet you can see how to initialize **Kanban** with the initial data:
89
+
The following snippet initializes Kanban with sample data:
Copy file name to clipboardExpand all lines: docs/guides/integration.md
+11-3Lines changed: 11 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,12 +6,20 @@ description: You can learn about the integration in the documentation of the DHT
6
6
7
7
# Integration with DHTMLX widgets
8
8
9
-
You can integrate DHTMLX Kanban with other DHTMLX widgets (for instance, [Gantt](https://docs.dhtmlx.com/gantt/), [Scheduler](https://docs.dhtmlx.com/scheduler/), [To Do List](https://docs.dhtmlx.com/todolist/)). Check the examples below.
9
+
You can integrate DHTMLX Kanban with other DHTMLX widgets, including:
10
10
11
-
## Integration with DHTMLX Gantt and Scheduler
11
+
-[Gantt](https://docs.dhtmlx.com/gantt/)
12
+
-[Scheduler](https://docs.dhtmlx.com/scheduler/)
13
+
-[To Do List](https://docs.dhtmlx.com/todolist/)
14
+
15
+
## Gantt and Scheduler
16
+
17
+
The following demo embeds a Kanban board alongside Gantt and Scheduler views:
0 commit comments