From ec660c469fa03c963084b43ab36074f90b57f41c Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 7 May 2026 21:47:17 +0300 Subject: [PATCH 01/29] Rewrite the Configuration guide --- docs/guides/configuration.md | 284 +++++++++++++++++++++-------------- 1 file changed, 173 insertions(+), 111 deletions(-) diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md index 14ccffe2..127757a0 100644 --- a/docs/guides/configuration.md +++ b/docs/guides/configuration.md @@ -6,74 +6,84 @@ description: You can learn about the configuration in the documentation of the D # Configuration -You can configure the *Kanban* appearance and functionality via the corresponding API. The available parameters will allow you to: - -- configure the cards appearance via the [`cardShape`](api/config/js_kanban_cardshape_config.md) property -- configure the editor fields via the [`editorShape`](api/config/js_kanban_editorshape_config.md) property -- configure the editor behaviour via the [`editor`](api/config/js_kanban_editor_config.md) property -- configure rendering and scrolling via the [`renderType`](api/config/js_kanban_rendertype_config.md) and [`scrollType`](api/config/js_kanban_scrolltype_config.md) properties -- configure the Kanban history via the [`history`](api/config/js_kanban_history_config.md) property -- customize the card appearance via the [`cardTemplate`](api/config/js_kanban_cardtemplate_config.md) property - - *Refer to the [**Customization**](guides/customization.md) section for details!* -- apply the desired locale via the [`locale`](api/config/js_kanban_locale_config.md) property - - *Refer to the [**Localization**](guides/localization.md) section for details!* -- load data for cards, columns, rows and links via the corresponding [`cards`](api/config/js_kanban_cards_config.md), [`columns`](api/config/js_kanban_columns_config.md), [`rows`](api/config/js_kanban_rows_config.md) and [`links`](api/config/js_kanban_links_config.md) properties - - *Refer to the [**Working with data**](guides/working_with_data.md) section for details!* +You can configure the Kanban appearance and functionality with the following properties: + +- [`cardShape`](api/config/js_kanban_cardshape_config.md) — configure cards appearance +- [`editorShape`](api/config/js_kanban_editorshape_config.md) — configure editor fields +- [`editor`](api/config/js_kanban_editor_config.md) — configure editor behavior +- [`renderType`](api/config/js_kanban_rendertype_config.md), [`scrollType`](api/config/js_kanban_scrolltype_config.md) — configure card rendering and board scrolling +- [`history`](api/config/js_kanban_history_config.md) — manage history of card operations +- [`cardTemplate`](api/config/js_kanban_cardtemplate_config.md) — customize card appearance (see the [Customization](guides/customization.md) section) +- [`locale`](api/config/js_kanban_locale_config.md) — apply a locale (see the [Localization](guides/localization.md) section) +- [`cards`](api/config/js_kanban_cards_config.md), [`columns`](api/config/js_kanban_columns_config.md), [`rows`](api/config/js_kanban_rows_config.md), [`links`](api/config/js_kanban_links_config.md) — load data for cards, columns, rows, and links (see the [Working with data](guides/working_with_data.md) section) ## Cards -The board of Kanban consists of the *cards* distributed into *columns* and *rows*. You can configure the cards appearance using the [`cardShape`](api/config/js_kanban_cardshape_config.md) configuration property. There are several predefined fields you can include (or exclude) into the card template, namely: +The Kanban board consists of cards distributed into columns and rows. Use the [`cardShape`](api/config/js_kanban_cardshape_config.md) property to configure card appearance and built-in fields: + +- `label: boolean | { show }` — card label + + :::tip + Activate the `label` parameter to display the label input in the editor. Configure the editor input with the [`text`](#text-and-textarea-types) type. + ::: + +- `description: boolean | { show }` — card description + + :::tip + Activate the `description` parameter to display the description input in the editor. Configure the editor input with the [`textarea`](#text-and-textarea-types) type. + ::: + +- `progress: boolean | { show }` — card progress -- a card label via the `label: boolean` config -- a card description via the `description: boolean` config + :::tip + Activate the `progress` parameter to display the progress control in the editor. Configure the editor control with the [`progress`](#progress-type) type. + ::: - :::tip - You can manage the **label** and **description** fields of any card via the corresponding inputs of the Kanban editor. If you activate these fields, the corresponding inputs will be displayed in the editor automatically. To configure these inputs, you can use the [**text** and **textarea**](#text-and-textarea-types) types. - ::: +- `start_date: boolean | { show, format }` — card start date -- a card progress via the `progress: boolean` config + :::tip + Activate the `start_date` parameter to display the date control in the editor. Configure the editor control with the [`date`](#date-and-daterange-types) type. + ::: - :::tip - You can manage the **progress** field of any card via the corresponding control of the Kanban editor. If you activate this field, the corresponding control will be displayed in the editor automatically. To configure this control, you can use the [**progress**](#progress-type) type. - ::: +- `end_date: boolean | { show, format }` — card end date -- a start date via the `start_date: boolean` config -- an end date via the `end_date: boolean` config + :::tip + Activate the `end_date` parameter to display the date control in the editor. Configure the editor control with the [`date`](#date-and-daterange-types) type. + ::: - :::tip - You can manage the **start date** and **end date** fields of any card via the corresponding controls of the Kanban editor. If you activate these fields, the corresponding controls will be displayed in the editor automatically. To configure these controls, you can use the [**date**](#date-and-daterange-types) type. - ::: +- `menu: boolean | { show, items }` — card context menu +- `attached: boolean | { show }` — card attachment -- a card context menu via the `menu: boolean` config -- a card attachment via the `attached: boolean` config + :::tip + Activate the `attached` parameter to display the file upload field in the editor. Configure the editor field with the [`files`](#files-type) type. + ::: - :::tip - You can **attache files** to any card via the corresponding field of the Kanban editor. To configure this field, you can use the [**files**](#files-type) type. - ::: +- `color: boolean | { show, values }` — top color line of the card -- a card color via the `color: boolean` config + :::tip + Activate the `color` parameter to display the colorpicker in the editor. Configure the editor control with the [`color`](#color-type) type. + ::: - :::tip - You can manage the **top color line** of any card via the corresponding control of the Kanban editor. If you activate **color**, the corresponding control (*colorpicker*) will be displayed in the editor automatically. To configure this control, you can use the [**color**](#color-type) type. - ::: +- `cover: boolean | { show }` — card preview image +- `comments: boolean | { show }` — card comments +- `confirmDeletion: boolean | { show }` — confirmation dialog for card deletion +- `votes: boolean | { show, clickable }` — card votes +- `users: boolean | { show, values, maxCount }` — users assigned to the card -- a card cover (*preview image*) via the `cover: boolean` config -- a card comment(s) via the `comments: boolean` config -- a confirmation dialog to confirm or decline the card deletion via the `confirmDeletion: boolean` config -- a card vote(s) via the `votes: boolean | { show: boolean, clicable: true }` config -- a card assignment (users) via the `users: boolean | { show: boolean, values: object, maxCount: number | false }` config + :::tip + Activate the `users` parameter to display the user picker in the editor. Use the [`combo` or `select`](#combo-select-and-multiselect-types) type to assign one user, or the [`multiselect`](#combo-select-and-multiselect-types) type to assign several users. + ::: - :::tip - You can assign one or several users to any card via the corresponding control of the Kanban editor. To configure the control for assigning a single user, use the [**combo** or **select**](#combo-select-and-multiselect-types) types of editor. To assign multiple users, use the [**multiselect**](#combo-select-and-multiselect-types) type. - ::: +- `priority: boolean | { show, values }` — card priority -- a card priority via the `priority: boolean | { show: boolean, values: object }` config + :::tip + Activate the `priority` parameter to display the priority control in the editor. Configure the editor control with the [`combo` or `select`](#combo-select-and-multiselect-types) type. + ::: - :::tip - You can manage the **priority** of any card via the corresponding control of the Kanban editor. If you activate **priority**, the corresponding control will be displayed in the editor automatically. To configure this control, you can use the [**combo** or **select**](#combo-select-and-multiselect-types) types only. - ::: +- `css: (card) => string` — function that returns a CSS class applied to a card conditionally +- `headerFields: [{ key, label, css }]` — custom card fields -- *a custom field* via the `headerFields: [ { key: string, label: string, css: string } ]` config +The following code snippet configures cards with custom users, priorities, and a custom header field: ~~~jsx {12-35,42} const users = [ // users data @@ -122,36 +132,36 @@ new kanban.Kanban("#root", { ~~~ :::note -Unless you specify the card settings via the [`cardShape`](api/config/js_kanban_cardshape_config.md) property, the widget will apply a [**defaultCardShape**](api/config/js_kanban_cardshape_config.md#default-config) set of parameters! +If you do not specify card settings through the [`cardShape`](api/config/js_kanban_cardshape_config.md) property, the widget applies a [`defaultCardShape`](api/config/js_kanban_cardshape_config.md#default-config) set of parameters. ::: ## Editor -:::info -You can display the Editor as the **sidebar** or **modal window** using the [`editor.placement`](api/config/js_kanban_editor_config.md) property! -::: +The Kanban editor contains fields for managing card data. Use the [`editorShape`](api/config/js_kanban_editorshape_config.md) property to configure editor fields. The following field types are available: -The *Editor* of Kanban consists of the fields for managing the cards data. To configure the editor fields (controls), you can use the [`editorShape`](api/config/js_kanban_editorshape_config.md) property. You can use the following types of editor fields: +- [`combo`, `select`, `multiselect`](#combo-select-and-multiselect-types) — dropdown options +- [`color`](#color-type) — color picker +- [`text`, `textarea`](#text-and-textarea-types) — text inputs +- [`progress`](#progress-type) — progress slider +- [`files`](#files-type) — file uploader +- [`date`, `dateRange`](#date-and-daterange-types) — single date or date range +- [`comments`](#comments-type) — card comments +- [`links`](#links-type) — card links -- [**combo**, **select**, and **multiselect**](#combo-select-and-multiselect-types) -- [**color**](#color-type) -- [**text** and **textarea**](#text-and-textarea-types) -- [**progress**](#progress-type) -- [**files**](#files-type) -- [**date** and **dataRange**](#date-and-daterange-types) -- [**comments**](#comments-type) -- [**links**](#links-type) +:::info +Display the editor as a sidebar or modal window with the [`editor.placement`](api/config/js_kanban_editor_config.md) property. +::: -### Combo, Select and Multiselect types +### Combo, select, and multiselect types -The editor fields of **combo**, **select**, and **multiselect** types can be set in the following way: +The `combo`, `select`, and `multiselect` types render dropdown options. The following code snippet uses the `combo` type to configure a dropdown for picking a card priority: ~~~jsx {3-12} new kanban.Kanban("#root", { editorShape: [ { type: "combo", // or "select" and "multiselect" - key: "priority", // the "priority" key is used when configuring the "cardShape" property + key: "priority", // use the "priority" key in the "cardShape" property label: "Priority", values: [ { id: 1, label: "high" }, @@ -159,19 +169,19 @@ new kanban.Kanban("#root", { { id: 3, label: "low" } ] }, - // settings of other fields + // settings for other fields ] }); ~~~ :::info -For the editor field of **"multiselect"** and **"combo"** types you can also specify a path to the preview image via the **avatar** property: +For `multiselect` and `combo` fields, set a path to the preview image through the `avatar` property: ~~~jsx {3,9,13} editorShape: [ { type: "multiselect", // or "combo" - key: "users", // the "users" key is used when configuring the "cardShape" property + key: "users", // use the "users" key in the "cardShape" property label: "Users", values: [ { @@ -184,7 +194,7 @@ editorShape: [ } ] }, - // settings of other fields + // settings for other fields ] ~~~ @@ -193,14 +203,14 @@ editorShape: [ ### Color type -The editor field of **color** type can be set in the following way: +The `color` type renders a colorpicker. The following code snippet uses the `color` type to configure the editor field for picking a card color: ~~~jsx {3-12} new kanban.Kanban("#root", { editorShape: [ { type: "color", - key: "color", // the "color" key is used when configuring the "cardShape" property + key: "color", // use the "color" key in the "cardShape" property label: "Card color", values: ["#65D3B3", "#FFC975", "#58C3FE"], config: { @@ -208,14 +218,14 @@ new kanban.Kanban("#root", { placeholder: "Select color" } }, - // settings of other fields + // settings for other fields ] }); ~~~ -### Text and Textarea types +### Text and textarea types -The editor fields of **text** and **textarea** types can be set in the following way: +The `text` and `textarea` types render single-line and multi-line inputs. The following code snippet uses the `text` type to configure the editor field for entering a card label: ~~~jsx {3-14} new kanban.Kanban("#root", { @@ -232,21 +242,21 @@ new kanban.Kanban("#root", { inputStyle: "height: 50px;" } }, - // settings of other fields + // settings for other fields ] }); ~~~ ### Progress type -The editor field of **progress** type can be set in the following way: +The `progress` type renders a slider. The following code snippet uses the `progress` type to configure the editor field for setting card progress: ~~~jsx {3-12} new kanban.Kanban("#root", { editorShape: [ { type: "progress", - key: "progress", // the "progress" key is used when configuring the "cardShape" property + key: "progress", // use the "progress" key in the "cardShape" property label: "Progress", config: { min: 10, @@ -254,16 +264,18 @@ new kanban.Kanban("#root", { step: 5 } }, - // settings of other fields + // settings for other fields ] }); ~~~ ### Files type -The editor field of **files** type can be set in the following way: +The `files` type renders a file uploader. Set the `uploadURL` parameter to a string for a basic upload, or to a function for a custom request. + +#### Configure upload URL as string -#### Configuring Upload Url as String +The following code snippet uses the `files` type with a string URL for the file uploader: ~~~jsx {4-15} const url = "https://docs.dhtmlx.com/kanban-backend"; @@ -271,9 +283,9 @@ new kanban.Kanban("#root", { editorShape: [ { type: "files", - key: "attached", // the "attached" key is used when configuring the "cardShape" property + key: "attached", // use the "attached" key in the "cardShape" property label: "Attachment", - uploadURL: url + "/uploads", // specify url as string + uploadURL: url + "/uploads", // set URL as string config: { accept: "image/*", // "video/*", "audio/*" disabled: false, @@ -281,12 +293,14 @@ new kanban.Kanban("#root", { folder: false } }, - // settings of other fields + // settings for other fields ] }); ~~~ -#### Configuring Upload Url as Function +#### Configure upload URL as function + +Pass a function to `uploadURL` to add custom headers, tokens, or response handling. The following code snippet sends each file with a bearer token: ~~~jsx {9-31} const url = "https://docs.dhtmlx.com/kanban-backend"; @@ -324,9 +338,9 @@ new kanban.Kanban("#root", { }); ~~~ -### Date and DateRange types +### Date and dateRange types -The editor field of **date** type can be set in the following way: +The `date` type renders a single date picker. The following code snippet uses the `date` type to configure the editor field for setting a single date: ~~~jsx {3-8} new kanban.Kanban("#root", { @@ -337,12 +351,12 @@ new kanban.Kanban("#root", { label: "Start date", format: "%d/%m/%y" }, - // settings of other fields + // settings for other fields ] }); ~~~ -The editor field of **dateRange** type can be set in the following way: +The `dateRange` type renders a start/end date picker. The following code snippet uses the `dateRange` type to configure the editor field for setting a start and end date: ~~~jsx {3-11} new kanban.Kanban("#root", { @@ -356,14 +370,14 @@ new kanban.Kanban("#root", { label: "Date Range", format: "%d/%m/%y" }, - // settings of other fields + // settings for other fields ] }); ~~~ ### Comments type -The editor field of **comments** type can be set in the following way: +The `comments` type renders a comments panel. The following code snippet uses the `comments` type to configure the comments field of the editor: ~~~jsx {3-13} new kanban.Kanban("#root", { @@ -379,14 +393,14 @@ new kanban.Kanban("#root", { confirmDeletion: true } }, - // settings of other fields + // settings for other fields ] }); ~~~ ### Links type -The editor field of **links** type can be set in the following way: +The `links` type renders a panel for linking cards. The following code snippet uses the `links` type to configure the links field of the editor: ~~~jsx {3-10} new kanban.Kanban("#root", { @@ -399,15 +413,16 @@ new kanban.Kanban("#root", { confirmDeletion: true } }, - // settings of other fields + // settings for other fields ] }); ~~~ -### Binding editor fields to card fields +### Bind editor fields to card fields -:::info -To link the editor field to the corresponding card field, you need to provide special **key** in the object of [`editorShape`](api/config/js_kanban_editorshape_config.md) property (`key: "editor_field_key"`). The value of this key needs to be set to *true* in the [`cardShape`](api/config/js_kanban_cardshape_config.md) property (for built-in card fields) or specified in the **headerFields** array (for custom card fields). You can provide the initial data of any field via this key as well. +Each editor field links to a card field through a shared `key`. Set the same `key` value in the [`editorShape`](api/config/js_kanban_editorshape_config.md) entry and in the [`cardShape`](api/config/js_kanban_cardshape_config.md) property. For built-in card fields, set the key to `true`. For custom fields, list the key in the `headerFields` array. The same key supplies initial card data. + +The following code snippet binds the `label` and `note` editor fields to the matching card fields: ~~~jsx {5,13,22,25,33-34,38-39,45-47} // editor settings @@ -431,10 +446,10 @@ const editorShape = [ ]; // cards settings const cardShape = { - label: true, // a key of built-in field + label: true, // built-in field key headerFields: [ { - key: "note", // a key of custom field + key: "note", // custom field key label: "Note" } ] @@ -461,18 +476,21 @@ new kanban.Kanban("#root", { // other configuration parameters }); ~~~ -::: :::note -Unless you specify the editor settings via the [`editorShape`](api/config/js_kanban_editorshape_config.md) property, the widget will apply a [**defaultEditorShape**](api/config/js_kanban_editorshape_config.md#default-config) set of parameters. In this case, the default controls and inputs will be displayed in editor only after activating the corresponding fields of cards via the [`cardShape`](api/config/js_kanban_cardshape_config.md) property. +If you do not specify editor settings through the [`editorShape`](api/config/js_kanban_editorshape_config.md) property, the widget applies a [`defaultEditorShape`](api/config/js_kanban_editorshape_config.md#default-config) set of parameters. The default controls and inputs appear in the editor only after you activate the corresponding card fields through the [`cardShape`](api/config/js_kanban_cardshape_config.md) property. ::: -### Configuring the editor +### Configure editor behavior + +The [`editor`](api/config/js_kanban_editor_config.md) property controls editor visibility, autosave, and placement: -Using the [`editor`](api/config/js_kanban_editor_config.md) property, you can configure the editor in the following way: +- [`editor.show`](api/config/js_kanban_editor_config.md) — enable or disable the editor +- [`editor.placement`](api/config/js_kanban_editor_config.md) — display the editor as a `"sidebar"` or `"modal"` window +- [`editor.autoSave`](api/config/js_kanban_editor_config.md) — enable or disable autosave mode +- [`editor.debounce`](api/config/js_kanban_editor_config.md) — delay before autosaving (applies only with `autoSave: true`) -- enables/disables an autosave mode of the editor via the *`editor.autoSave`* property -- specify a delay time of autosaving data via the *`editor.debounce`* property (works with the ***autoSave: true*** parameter only) +The following code snippet enables autosave with a 2-second delay: ~~~jsx {6-9} // create Kanban @@ -488,9 +506,53 @@ new kanban.Kanban("#root", { }); ~~~ +## Configure rendering and scrolling + +The Kanban widget renders all cards and scrolls the entire board by default. For boards with many cards, switch to lazy rendering or per-column scrolling: + +- [`renderType`](api/config/js_kanban_rendertype_config.md) — set to `"lazy"` to render only the cards visible on the board +- [`scrollType`](api/config/js_kanban_scrolltype_config.md) — set to `"column"` to scroll each column independently + +The following code snippet enables lazy rendering and per-column scrolling: + +~~~jsx {5-7} +new kanban.Kanban("#root", { + columns, + cards, + rows, + renderType: "lazy", + scrollType: "column", + cardHeight: 150 +}); +~~~ + +:::important +When you combine `renderType: "lazy"` with any `scrollType`, set a static height for cards through the [`cardHeight`](api/config/js_kanban_cardheight_config.md) property. Without `cardHeight`, lazy rendering does not display cards correctly. +::: + +## Configure history of changes + +Kanban tracks card operations and exposes undo and redo controls on the Toolbar. Use the [`history`](api/config/js_kanban_history_config.md) property to disable this behavior. + +The following code snippet disables history tracking: + +~~~jsx {4} +new kanban.Kanban("#root", { + columns, + cards, + history: false +}); +~~~ + +:::tip +To skip individual operations from history, pass the [`$meta`](api/common/js_kanban_meta_parameter.md) parameter to methods or events. +::: + ## Toolbar -**Toolbar** of Kanban consists of the searchbar for *searching cards* and controls for *sorting cards* and *adding new columns and rows*. To display Toolbar, you need to initialize it in a separate container using the **kanban.Toolbar()** constructor. +The Kanban Toolbar contains the searchbar for searching cards and controls for sorting cards and adding new columns and rows. Initialize the Toolbar in a separate container with the `kanban.Toolbar()` constructor. + +The following code snippet creates a Toolbar bound to the Kanban instance: ~~~jsx {13} // create Kanban @@ -508,7 +570,7 @@ const board = new kanban.Kanban("#root", { new kanban.Toolbar("#toolbar", { api: board.api }); ~~~ -You can manage (*hide/show/customize*) the Toolbar controls using the **items** property: +Use the [`items`](api/config/toolbar_items_config.md) property to show, hide, or customize Toolbar controls. The following code snippet sets a custom searchbar, undo and redo controls, a custom sort, and column and row controls: ~~~jsx {6-51} // create Kanban @@ -541,8 +603,8 @@ new kanban.Toolbar("#toolbar", { }) }, "spacer", // empty space - "undo", // control to undo the card operations in the history - "redo", // control to redo the card operations in the history + "undo", // undo card operations in the history + "redo", // redo card operations in the history { // custom sort control type: "sort", options: [ @@ -566,11 +628,11 @@ new kanban.Toolbar("#toolbar", { ~~~ :::tip -To hide some of the Toolbar controls, remove the corresponding string(s) from the **items** array. +Remove a control from the `items` array to hide that control. ::: ## Example -In this snippet you can see how to configure the **Cards**, **Editor** and **Toolbar** of Kanban: +The following snippet configures the cards, editor, and Toolbar of Kanban: From 8fb6c867d838c1078fe1bfddc849128b6bb3615b Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 7 May 2026 21:47:56 +0300 Subject: [PATCH 02/29] Rewrite the Customization guide --- docs/guides/customization.md | 127 +++++++++++++++++++++++++++++++---- 1 file changed, 114 insertions(+), 13 deletions(-) diff --git a/docs/guides/customization.md b/docs/guides/customization.md index b2e14ea5..75127abd 100644 --- a/docs/guides/customization.md +++ b/docs/guides/customization.md @@ -6,37 +6,138 @@ description: You can learn about the customization in the documentation of the D # Customization -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. +You can customize the Kanban appearance and behavior with the following properties: + +- [`cardTemplate`](api/config/js_kanban_cardtemplate_config.md) — render cards with a custom HTML template +- [`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 +- [`columnShape.headerTemplate`](api/config/js_kanban_columnshape_config.md), [`columnShape.collapsedTemplate`](api/config/js_kanban_columnshape_config.md) — change column header templates +- [`cardShape.css`](api/config/js_kanban_cardshape_config.md), [`columnShape.css`](api/config/js_kanban_columnshape_config.md), [`rowShape.css`](api/config/js_kanban_rowshape_config.md) — apply CSS classes conditionally +- [`items`](api/config/toolbar_items_config.md) — change the Toolbar structure and controls +- CSS variables — adjust visual styles (see the [Stylization](guides/stylization.md) section) ## Custom cards -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: +Use the [`cardTemplate`](api/config/js_kanban_cardtemplate_config.md) property to render cards with a custom HTML template. The property is a callback that returns the markup for each card. + +The callback receives an object with the following parameters: + +- `cardFields` — data object of the card +- `selected` — selected state of the card +- `dragging` — dragging state of the card +- `cardShape` — configuration object of the card + +To embed a context menu trigger in a custom card template, render an icon element with the `data-menu-id=${cardFields.id}` attribute. The widget binds the menu to the trigger through this attribute. + +The following demo applies a custom card template: ## Custom context menu -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: +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. - +Built-in card menu actions ([`cardShape.menu`](api/config/js_kanban_cardshape_config.md)): -## Custom toolbar +- `"set-edit"` — open the card editor +- `"delete-card"` — delete the card -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. +Built-in column menu actions ([`columnShape.menu`](api/config/js_kanban_columnshape_config.md)): -In the snippet below you can see how to customize the following: +- `"add-card"` — add a new card to the column +- `"set-edit"` — rename the column +- `"move-column:left"`, `"move-column:right"` — move the column left or right +- `"delete-column"` — delete the column + +Built-in row menu actions ([`rowShape.menu`](api/config/js_kanban_rowshape_config.md)): + +- `"set-edit"` — rename the row +- `"move-row:up"`, `"move-row:down"` — move the row up or down +- `"delete-row"` — delete the row + +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. + +The following demo applies a custom context menu to columns and rows: + + -- an order of controls arrangement -- a searchbar and its behaviour -- a sort control and its behaviour -- a custom control and its behaviour +## Custom column headers + +The [`columnShape`](api/config/js_kanban_columnshape_config.md) property provides templates and behavior for column headers: + +- [`columnShape.headerTemplate`](api/config/js_kanban_columnshape_config.md) — HTML template of the column header in the expanded state +- [`columnShape.collapsedTemplate`](api/config/js_kanban_columnshape_config.md) — HTML template of the column header in the collapsed state +- [`columnShape.fixedHeaders`](api/config/js_kanban_columnshape_config.md) — freeze column headers during vertical scroll (default: `true`) + +The following code snippet sets a custom header template with a collapse icon, label with card count, and menu trigger: + +~~~jsx {5-21} +new kanban.Kanban("#root", { + columns, + cards, + columnShape: { + headerTemplate: kanban.template(column => ` +
+ +
+ ${!column.column.collapsed + ? `
+ ${column.column.label} (${column.columnState.cardsCount}) +
+
+ +
` + : ""} + `), + collapsedTemplate: kanban.template(column => ` +
${column.column.label}
+ `) + } +}); +~~~ + +:::tip +For `fixedHeaders` to take effect, set a fixed height on the Kanban container so the board scrolls vertically. +::: + +## Conditional CSS classes + +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: + +- [`cardShape.css: (card) => string`](api/config/js_kanban_cardshape_config.md) — class applied to a card +- [`columnShape.css: (column, cards) => string`](api/config/js_kanban_columnshape_config.md) — class applied to a column +- [`rowShape.css: (row, cards) => string`](api/config/js_kanban_rowshape_config.md) — class applied to a row + +The following code snippet highlights overdue cards and underloaded columns: + +~~~jsx {5,8} +new kanban.Kanban("#root", { + columns, + cards, + cardShape: { + css: (card) => card.end_date < new Date() ? "overdue" : "" + }, + columnShape: { + css: (column, cards) => cards.length < 5 ? "low-load" : "" + } +}); +~~~ + +## Custom Toolbar + +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: + +- a built-in control: `"search"`, `"sort"`, `"undo"`, `"redo"`, `"addColumn"`, `"addRow"`, `"spacer"` +- an object that overrides the searchbar or sort control with custom options +- a custom control passed as a string identifier or a function + +The following demo customizes the order of controls, the searchbar, the sort control, and a custom control: ## Custom styles -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. +Change the values of CSS variables to customize the Kanban appearance. See the [Stylization](guides/stylization.md) section for the full list. -In this snippet you can see how to apply custom styles to Kanban: +The following snippet applies custom styles to Kanban: From a98f9bf09a70992156c78514dbf30118ccd9486e Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 7 May 2026 21:48:28 +0300 Subject: [PATCH 03/29] Rewrite the Initialization guide --- docs/guides/initialization.md | 52 +++++++++++++++++------------------ 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/docs/guides/initialization.md b/docs/guides/initialization.md index 5b171fad..e26f3858 100644 --- a/docs/guides/initialization.md +++ b/docs/guides/initialization.md @@ -6,49 +6,51 @@ description: You can learn about the initialization in the documentation of the # Initialization -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: +This guide walks through the steps to create a ready-to-use Kanban widget on a page: -1. [Include the Kanban source files on a page](#including-source-files). -2. [Create a container for Kanban](#creating-container). -3. [Initialize Kanban with a constructor](#initializing-kanban). +1. [Include the Kanban source files on a page](#include-source-files). +2. [Create a container for Kanban](#create-a-container). +3. [Initialize Kanban with a constructor](#initialize-kanban). -## Including source files +## Include source files [Download the package](https://dhtmlx.com/docs/products/dhtmlxKanban/download.shtml) and unpack it into a folder of your project. -To create Kanban, you need to include 2 source files on your page: +Include the following source files on your page: - *kanban.js* - *kanban.css* -Make sure that you set correct relative paths to the source files: +Set correct relative paths to both files: ~~~html title="index.html" ~~~ -## Creating container +## Create a container -Add a container for Kanban and give it an ID, for example *"root"*: +Add a container for Kanban and assign an ID, for example `root`: ~~~jsx title="index.html"
~~~ -If you want to create the widget along with its *Toolbar*, you need to add a separate container for it: +To create the widget with a Toolbar, add a separate container for the Toolbar: ~~~jsx {1} title="index.html"
// container for Toolbar
// container for Kanban ~~~ -## Initializing Kanban +## Initialize Kanban -Initialize Kanban with the **kanban.Kanban** constructor. It takes two parameters: +Initialize Kanban with the `kanban.Kanban` constructor. The constructor takes two parameters: -- an HTML container (the ID of the HTML container) -- an object with configuration properties. [See the full list here](#configuration-properties) +- an HTML container ID +- a configuration object (see the [full list of properties](#configuration-properties)) + +The following code snippet creates a Kanban instance: ~~~jsx title="index.html" // create Kanban @@ -57,35 +59,33 @@ new kanban.Kanban("#root", { }); ~~~ -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: - -- an HTML container (the ID of the HTML container) -- an object with configuration properties +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: -~~~jsx {6-8} title="index.html" +~~~jsx {7} title="index.html" // create Kanban const board = new kanban.Kanban("#root", { // configuration properties }); new kanban.Toolbar("#toolbar", { - // configuration properties + api: board.api, // required: links Toolbar controls to the Kanban instance + // other configuration properties }); ~~~ :::info -To learn more about configuring the Toolbar of Kanban, read the [**Configuration**](guides/configuration.md/#toolbar) section +For details on configuring the Toolbar, read the [Configuration](guides/configuration.md#toolbar) section. ::: ### Configuration properties -:::note -The full list of properties to configure **Kanban** can be found [**here**](api/overview/properties_overview.md).
-The full list of properties to configure **Toolbar of Kanban** can be found [**here**](api/overview/toolbar_properties_overview.md). -::: +For the complete reference of configuration properties, see: + +- [Kanban properties overview](api/overview/properties_overview.md) — all Kanban configuration properties +- [Toolbar properties overview](api/overview/toolbar_properties_overview.md) — all Toolbar configuration properties ## Example -In this snippet you can see how to initialize **Kanban** with the initial data: +The following snippet initializes Kanban with sample data: From c8137cb740604c7387e75c12da708cf14f630344 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 7 May 2026 21:49:26 +0300 Subject: [PATCH 04/29] Rewrite the Integration guide --- docs/guides/integration.md | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/docs/guides/integration.md b/docs/guides/integration.md index 88367904..2cb4466f 100644 --- a/docs/guides/integration.md +++ b/docs/guides/integration.md @@ -6,12 +6,20 @@ description: You can learn about the integration in the documentation of the DHT # Integration with DHTMLX widgets -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. +You can integrate DHTMLX Kanban with other DHTMLX widgets, including: -## Integration with DHTMLX Gantt and Scheduler +- [Gantt](https://docs.dhtmlx.com/gantt/) +- [Scheduler](https://docs.dhtmlx.com/scheduler/) +- [To Do List](https://docs.dhtmlx.com/todolist/) + +## DHTMLX Gantt and Scheduler + +The following demo embeds a Kanban board alongside DHTMLX Gantt and Scheduler views, sharing task data across the three widgets: -## Integration with DHTMLX To Do List +## DHTMLX To Do List + +The following demo embeds a Kanban board next to a DHTMLX To Do List, syncing items between the two widgets: From 98c90af56615db93ee9124a36d1714ae459a3370 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 7 May 2026 21:50:22 +0300 Subject: [PATCH 05/29] Rewrite the Stylization guide --- docs/guides/stylization.md | 53 +++++++++++++++++++++++++++----------- 1 file changed, 38 insertions(+), 15 deletions(-) diff --git a/docs/guides/stylization.md b/docs/guides/stylization.md index a1039127..1fe7b9a7 100644 --- a/docs/guides/stylization.md +++ b/docs/guides/stylization.md @@ -6,19 +6,42 @@ description: You can learn about the stylization in the documentation of the DHT # Stylization -Using Kanban, you can stylize **columns**, **rows** and **cards** appearance via the [`columnShape.css`](api/config/js_kanban_columnshape_config.md), [`rowShape.css`](api/config/js_kanban_rowshape_config.md) and [`cardShape.css`](api/config/js_kanban_cardshape_config.md) properties. These properties allow you to style columns, rows and cards conditionally. +You can style Kanban appearance through CSS classes and CSS variables. The following properties accept CSS classes for columns, rows, and cards: + +- [`columnShape.css`](api/config/js_kanban_columnshape_config.md), [`rowShape.css`](api/config/js_kanban_rowshape_config.md), [`cardShape.css`](api/config/js_kanban_cardshape_config.md) — functions that return a CSS class conditionally based on item data +- [`columns.css`](api/config/js_kanban_columns_config.md), [`rows.css`](api/config/js_kanban_rows_config.md), [`cards.css`](api/config/js_kanban_cards_config.md) — string CSS class assigned to a single item + +For details and code examples of the conditional `css` functions, see [Conditional CSS classes](guides/customization.md#conditional-css-classes). + +The following code snippet applies a CSS class to a specific column, row, and card: + +~~~jsx +const columns = [ + { id: "backlog", label: "Backlog", css: "highlighted" }, + // other columns +]; +const rows = [ + { id: "feature", label: "Feature", css: "row-feature" }, + // other rows +]; +const cards = [ + { id: 1, label: "Task", column: "backlog", css: "urgent" }, + // other cards +]; +~~~ -You can also apply a custom css class to a separate **column**, **row** and **card** via the [`columns.css`](api/config/js_kanban_columns_config.md), [`rows.css`](api/config/js_kanban_rows_config.md) and [`cards.css`](api/config/js_kanban_cards_config.md) properties. +Beyond per-item CSS, Kanban exposes a wide range of CSS variables for theming. The library uses two groups of variables: -Besides, you can apply custom styles to any part of the Kanban interface to meet your project requirements. For this, the library provides a wide range of CSS variables. Note, that Kanban includes two types of variables: -- CSS variables related to **Kanban** style -- CSS variables related to the **WX** library style (*controls, calendars etc*) +- Kanban variables — define Kanban-specific styles +- WX library variables — define shared elements like controls and calendars :::info -Note, that **WX** library is used for inner processes only. It provides some small elements used in Kanban (*controls, calendars etc*) +The WX library handles internal Kanban functionality such as controls and calendars. Treat WX variables as part of Kanban styling. ::: -## Default style +## Theme variables + +Override these CSS variables in your stylesheet to customize the Material theme: ~~~css .wx-material-theme { @@ -90,29 +113,29 @@ Note, that **WX** library is used for inner processes only. It provides some sma ~~~ :::tip Note -Next versions of Kanban can bring some changes for the variables and their names. Please, do not forget to check the names after updating to the newer versions and modify them in your code to avoid problems with display of the component. +Variable names may change in future versions. Check the names after upgrading and update the styles in your project. ::: ## Scroll style -You can also apply a custom style to a scroll bar of Kanban. For this, you can use the `.wx-styled-scroll` CSS class. Before using it, check compatibility with the modern browsers [here](https://caniuse.com/css-scrollbar). +Apply the `.wx-styled-scroll` CSS class to the Kanban container to enable a custom scroll bar style. Check [browser compatibility](https://caniuse.com/css-scrollbar) before using the class: ~~~html {4} title="index.html" - -
// - -
+ +
+ +
~~~ ## Custom style -In this snippet you can see how to apply a custom style to Kanban +The following demo applies a custom style to Kanban: ## Adaptivity -In this snippet you can see how to create adaptive version of Kanban using custom CSS styles +The following demo creates an adaptive Kanban layout with custom CSS: From 1a27d20e322c69cd2964fc5f78f6fbc95b9ce148 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 7 May 2026 21:51:41 +0300 Subject: [PATCH 06/29] Rewrite the Localization guide --- docs/guides/localization.md | 88 ++++++++++++++++++++++++++----------- 1 file changed, 63 insertions(+), 25 deletions(-) diff --git a/docs/guides/localization.md b/docs/guides/localization.md index e68626b2..18603bd3 100644 --- a/docs/guides/localization.md +++ b/docs/guides/localization.md @@ -6,11 +6,11 @@ description: You can learn about the localization in the documentation of the DH # Localization -You can localize all labels in the interface of JavaScript Kanban. For this you need to create a new locale or modify a built-in one and apply it to Kanban and Toolbar (*separately*). +You can localize all labels in the Kanban interface. Create a new locale or modify a built-in one, then apply the locale to Kanban and to the Toolbar separately. ## Default locale -The **English** locale is used by default: +Kanban applies the English locale by default: ~~~jsx const en = { @@ -128,46 +128,84 @@ const en = { }; ~~~ +A locale object contains three top-level sections: + +- `kanban` — translations for all UI labels (buttons, dialogs, search, sort options, link relations) +- `calendar` — translations and settings for date pickers (month and day names, time format, week start, AM/PM markers) +- `core` — translations for shared dialog buttons (`ok`, `cancel`) + +The locale object must include all labels of Kanban and the Toolbar with the corresponding translations. + ## Built-in locales -The Kanban exports the following locales: +Kanban exports the following built-in locales: -**"en"** - English -**"de"** - German -**"cn"** - Chinese -**"es"** - Spanish -**"fr"** - French -**"it"** - Italian -**"jp"** - Japanese -**"pt"** - Portugese -**"ru"** - Russian +- `"en"` — English +- `"de"` — German +- `"cn"` — Chinese +- `"es"` — Spanish +- `"fr"` — French +- `"it"` — Italian +- `"jp"` — Japanese +- `"pt"` — Portuguese +- `"ru"` — Russian -You can export and apply the built-in locale in the following way: +Access a locale through `kanban.locales[""]`. The Toolbar is a separate component, so apply the locale to the Toolbar independently. The following code snippet applies the `"cn"` locale to both Kanban and the Toolbar at initialization: -```jsx {5} +~~~jsx {3,8} // create Kanban const board = new kanban.Kanban("#root", { - columns, - cards, - locale: kanban.locales["cn"] // the built-it "cn" locale will be set initially - // other parameters + locale: kanban.locales["cn"] // use the built-in "cn" locale initially }); +// create Toolbar +new kanban.Toolbar("#toolbar", { + api: board.api, + locale: kanban.locales["cn"] +}); +~~~ + +To switch the locale at runtime, call [`setLocale()`](api/methods/js_kanban_setlocale_method.md) on the Kanban instance or [`setLocale()`](api/methods/toolbar_setlocale_method.md) on the Toolbar. Pass `null` or no arguments to reset to the default English locale: -// apply the built-in "de" locale to Kanban +~~~jsx +// switch Kanban to German board.setLocale(kanban.locales["de"]); -``` +// reset to the default English locale +board.setLocale(); +~~~ ## Custom locale -To apply a custom locale you need to: +To apply a custom locale: + +- create a custom locale (or modify the default English one) and provide translations for all text labels +- apply the new locale to Kanban through the [`locale`](api/config/js_kanban_locale_config.md) property or the [`setLocale()`](api/methods/js_kanban_setlocale_method.md) method +- apply the new locale to the Toolbar through the [`locale`](api/config/toolbar_locale_config.md) property or the [`setLocale()`](api/methods/toolbar_setlocale_method.md) method -- create a custom locale (or modify the default one) and provide translations for all text labels (it can be any language you need) +The following code snippet defines a custom locale and applies it to both Kanban and the Toolbar: -- apply the new locale to **Kanban** via its [`locale`](api/config/js_kanban_locale_config.md) property or use the [`setLocale()`](api/methods/js_kanban_setlocale_method.md) method -- apply the new locale to **Toolbar** via its [`locale`](api/config/toolbar_locale_config.md) property or use the [`setLocale()`](api/methods/toolbar_setlocale_method.md) method +~~~jsx +const myLocale = { + kanban: { + Save: "Save", + Close: "Close", + // other Kanban labels with translations + }, + calendar: { + monthFull: ["January", "February", /* ... */], + // other calendar settings + }, + core: { + ok: "OK", + cancel: "Cancel" + } +}; + +const board = new kanban.Kanban("#root", { locale: myLocale }); +new kanban.Toolbar("#toolbar", { api: board.api, locale: myLocale }); +~~~ ## Example -In this snippet you can see how to switch through several locales: +The following snippet switches between several locales: From 00b7bce52684efcc04e5c61598c51d178010e79c Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 7 May 2026 21:52:24 +0300 Subject: [PATCH 07/29] Rewrite the Typescript Support guide --- docs/guides/typescript_support.md | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/docs/guides/typescript_support.md b/docs/guides/typescript_support.md index b7c870e5..c152300c 100644 --- a/docs/guides/typescript_support.md +++ b/docs/guides/typescript_support.md @@ -6,16 +6,12 @@ description: You can learn about using typescript with the DHTMLX JavaScript Kan # TypeScript support -Starting from v1.1, the library of DHTMLX Kanban provides an ability to use TypeScript definitions. The built-in support of TypeScript works out of the box. +Since v1.1, DHTMLX Kanban ships with built-in TypeScript definitions that work out of the box. :::note -You can try out the functionality right in our Snippet Tool. +Try the [Snippet Tool](https://snippet.dhtmlx.com/2blo6hx8?tag=kanban) for a working TypeScript example. ::: -## Advantages of using TypeScript +## Why use TypeScript with Kanban -Why do you need to use DHTMLX Kanban with TypeScript? - -The main benefit of TypeScript is that it allows you to significantly increase the efficiency of the development process. - -The way of building an application becomes more robust as checking the types together with autocompletion allow you to avoid potential mistakes. Besides, TypeScript provides you with information about types of data you should use while working with the API of the DHTMLX Kanban library. +TypeScript makes Kanban development more efficient through static type checking. Type checking and autocompletion catch mistakes early, and the bundled definitions surface the expected data shapes when you call the Kanban API. From 07111ccdbe56c0a440cc7179bd3abb38358fea6e Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 7 May 2026 21:53:24 +0300 Subject: [PATCH 08/29] Rewrite the Working with Data guide --- docs/guides/working_with_data.md | 113 +++++++++++++++++++------------ 1 file changed, 71 insertions(+), 42 deletions(-) diff --git a/docs/guides/working_with_data.md b/docs/guides/working_with_data.md index 368c9ebd..aeeff448 100644 --- a/docs/guides/working_with_data.md +++ b/docs/guides/working_with_data.md @@ -6,9 +6,11 @@ description: You can explore how to work with Data in the documentation of the D # Working with data -## Initial data loading +## Load initial data -When initializing Kanban, you can provide the initial data for [**columns**](api/config/js_kanban_columns_config.md), [**cards**](api/config/js_kanban_cards_config.md), [**rows**](api/config/js_kanban_rows_config.md) and [**links**](api/config/js_kanban_links_config.md). +When you initialize Kanban, pass initial data through the [`columns`](api/config/js_kanban_columns_config.md), [`cards`](api/config/js_kanban_cards_config.md), [`rows`](api/config/js_kanban_rows_config.md), and [`links`](api/config/js_kanban_links_config.md) properties. + +The following code snippet passes columns, cards, rows, and links data to the Kanban constructor: ~~~jsx {1,17,81,94,106-109} const columns = [ // data for columns @@ -114,7 +116,7 @@ const links = [ {...} ]; -// initializing Kanban with the initial data for columns, cards and rows +// initialize Kanban with the initial data new kanban.Kanban("#root", { columns, cards, @@ -123,81 +125,108 @@ new kanban.Kanban("#root", { }); ~~~ -## Loading data from local source +## Load data from a local source + +Use the [`setConfig()`](api/methods/js_kanban_setconfig_method.md) or [`parse()`](api/methods/js_kanban_parse_method.md) method to load data for columns, rows, cards, and links from a local source. -To load data for ***columns***, ***rows***, ***cards***, and ***links*** from a local source, you can use the [`setConfig()`](api/methods/js_kanban_setconfig_method.md) or [`parse()`](api/methods/js_kanban_parse_method.md) method. +The following code snippet replaces the current data with a new dataset after initialization: ~~~js {4} const board = new kanban.Kanban("#root", {}); -// loading data into Kanban +// load data into Kanban board.setConfig({ columns, cards, rows }); // or board.parse({ columns, cards, rows }); ~~~ -## Syncing Kanban data with Gantt and Scheduler +## Sync Kanban data with Gantt and Scheduler -In this snippet you can see how to sync Kanban data with other DHTMLX widgets, namely [**Gantt**](https://dhtmlx.com/docs/products/dhtmlxGantt/) and [**Scheduler**](https://dhtmlx.com/docs/products/dhtmlxScheduler/): +The following demo synchronizes Kanban data with [Gantt](https://dhtmlx.com/docs/products/dhtmlxGantt/) and [Scheduler](https://dhtmlx.com/docs/products/dhtmlxScheduler/): -## Getting Kanban data +## Get Kanban data + +The following methods read card data from Kanban: + +- [`getAreaCards()`](api/methods/js_kanban_getareacards_method.md) — gets data objects of all cards in the specified column and row +- [`getColumnCards()`](api/methods/js_kanban_getcolumncards_method.md) — gets data objects of all cards in a specific column +- [`getCard()`](api/methods/js_kanban_getcard_method.md) — gets a card data object by ID +- [`serialize()`](api/methods/js_kanban_serialize_method.md) — serializes Kanban data to JSON + +## Get Kanban state + +The following methods read Kanban state: + +- [`api.getReactiveState()`](api/internal/js_kanban_getreactivestate_method.md) — gets reactive properties of the *StateStore* +- [`api.getState()`](api/internal/js_kanban_getstate_method.md) — gets current properties of the *StateStore* +- [`api.getStores()`](api/internal/js_kanban_getstores_method.md) — gets the *StateStore* and *DataStore* objects + +## Export Kanban data + +Use the following method to export Kanban data: + +- [`export.json()`](api/internal/js_kanban_json_method.md) — exports Kanban data to a JSON file + +## Add new items -To get Kanban data, you can use the following methods: +The following methods add new items to Kanban: -- [`getAreaCards()`](api/methods/js_kanban_getareacards_method.md) - gets an array with data objects of all cards of the specified column (and row) -- [`getCard()`](api/methods/js_kanban_getcard_method.md) - gets a data object of a card by the specified ID -- [`serialize()`](api/methods/js_kanban_serialize_method.md) - serializes Kanban data to JSON +- [`addCard()`](api/methods/js_kanban_addcard_method.md) — adds a new card +- [`addColumn()`](api/methods/js_kanban_addcolumn_method.md) — adds a new column +- [`addRow()`](api/methods/js_kanban_addrow_method.md) — adds a new row +- [`duplicateCard()`](api/methods/js_kanban_duplicatecard_method.md) — duplicates a card by ID -## Getting Kanban state +## Update items -To get Kanban state, you can use the following methods: +The following methods update existing items: -- [`api.getReactiveState()`](api/internal/js_kanban_getreactivestate_method.md) - gets an object with the reactive properties of the *StateStore* -- [`api.getState()`](api/internal/js_kanban_getstate_method.md) - gets an object with the current properties of the *StateStore* -- [`api.getStores()`](api/internal/js_kanban_getstores_method.md) - gets an object with the *StateStore* and *DataStore* objects +- [`updateCard()`](api/methods/js_kanban_updatecard_method.md) — updates a card by ID +- [`updateColumn()`](api/methods/js_kanban_updatecolumn_method.md) — updates a column by ID +- [`updateRow()`](api/methods/js_kanban_updaterow_method.md) — updates a row by ID -## Exporting Kanban data +## Delete items -To export Kanban data, you can use the following method: +The following methods remove items from Kanban: -- [`export.json()`](api/internal/js_kanban_json_method.md) - exports data of Kanban to a JSON file +- [`deleteCard()`](api/methods/js_kanban_deletecard_method.md) — removes a card by ID +- [`deleteColumn()`](api/methods/js_kanban_deletecolumn_method.md) — removes a column by ID +- [`deleteRow()`](api/methods/js_kanban_deleterow_method.md) — removes a row by ID -## Adding new items +## Move items -To add new *cards*, *columns* and *rows*, you can use the following methods: +The following methods move items to a new position: -- [`addCard()`](api/methods/js_kanban_addcard_method.md) - adds a new card into Kanban -- [`addColumn()`](api/methods/js_kanban_addcolumn_method.md) - adds a new column into Kanban -- [`addRow()`](api/methods/js_kanban_addrow_method.md) - adds a new row into Kanban +- [`moveCard()`](api/methods/js_kanban_movecard_method.md) — moves a card to the target column and row +- [`moveColumn()`](api/methods/js_kanban_movecolumn_method.md) — moves a column to a new position +- [`moveRow()`](api/methods/js_kanban_moverow_method.md) — moves a row to a new position -## Updating items +## Manage comments -To update the *cards*, *columns* and *rows*, you can use the following methods: +The following methods work with comments on a card: -- [`updateCard()`](api/methods/js_kanban_updatecard_method.md) - updates the card data by the specified ID -- [`updateColumn()`](api/methods/js_kanban_updatecolumn_method.md) - updates the column data by the specified ID -- [`updateRow()`](api/methods/js_kanban_updaterow_method.md) - updates the row data by the specified ID +- [`addComment()`](api/methods/js_kanban_addcomment_method.md) — adds a comment to a card by ID +- [`updateComment()`](api/methods/js_kanban_updatecomment_method.md) — updates a comment by ID +- [`deleteComment()`](api/methods/js_kanban_deletecomment_method.md) — deletes a comment by ID -## Deleting items +## Manage links -To remove the *cards*, *columns* and *rows*, you can use the following methods: +The following methods work with links between cards at runtime: -- [`deleteCard()`](api/methods/js_kanban_deletecard_method.md) - removes a card from Kanban by the specified ID -- [`deleteColumn()`](api/methods/js_kanban_deletecolumn_method.md) - removes a column from Kanban by the specified ID -- [`deleteRow()`](api/methods/js_kanban_deleterow_method.md) - removes a row from Kanban by the specified ID +- [`addLink()`](api/methods/js_kanban_addlink_method.md) — adds a new link between cards +- [`deleteLink()`](api/methods/js_kanban_deletelink_method.md) — deletes a link by ID -## Moving items +## Manage card selection -To move the *cards*, *columns* and *rows*, you can use the following methods: +The following methods read or change the selected cards: -- [`moveCard()`](api/methods/js_kanban_movecard_method.md) - moves a card to the desired column and row -- [`moveColumn()`](api/methods/js_kanban_movecolumn_method.md) - moves a column to the desired position -- [`moveRow()`](api/methods/js_kanban_moverow_method.md) - moves a row to the desired position +- [`getSelection()`](api/methods/js_kanban_getselection_method.md) — gets IDs of the currently selected cards +- [`selectCard()`](api/methods/js_kanban_selectcard_method.md) — selects a card by ID +- [`unselectCard()`](api/methods/js_kanban_unselectcard_method.md) — unselects a card by ID ## Example -In this snippet you can see how to use Kanban API for working with data: +The following snippet uses the Kanban API to manipulate data at runtime: From 9c4af586af2b345e11822f3f69176f15ed82ee0b Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 7 May 2026 21:54:45 +0300 Subject: [PATCH 09/29] Rewrite the Working with Server guide --- docs/guides/working_with_server.md | 187 +++++++++++++++-------------- 1 file changed, 96 insertions(+), 91 deletions(-) diff --git a/docs/guides/working_with_server.md b/docs/guides/working_with_server.md index 1a12cd03..e239416a 100644 --- a/docs/guides/working_with_server.md +++ b/docs/guides/working_with_server.md @@ -6,58 +6,57 @@ description: You can explore how to work with Server in the documentation of the # Working with server -JavaScript Kanban allows working both with the client and server data. The widget doesn't have any special requirements for the backend. It can be easily connected with any backend platform which supports the REST API (RESTful API). +JavaScript Kanban supports both client-side and server-side data. The widget has no special backend requirements and connects to any platform that exposes a REST (RESTful) API. :::info -By default, the widget is shipped with the built-in **Go** and **Node** backend. But you can use your custom server scripts as well +The widget ships with a built-in Go and Node backend. You can also use custom server scripts. ::: ## RestDataProvider -JavaScript Kanban has the **RestDataProvider** service that completely supports REST API for dealing with the backend. It allows interacting with the server and perform the following data operations: - -- ***"add-card"*** -- ***"add-column"*** -- ***"add-comment"*** -- ***"add-row"*** -- ***"add-link"*** -- ***"delete-card"*** -- ***"delete-column"*** -- ***"delete-comment"*** -- ***"delete-row"*** -- ***"delete-link"*** -- ***"move-card"*** -- ***"move-column"*** -- ***"move-row"*** -- ***"update-card"*** -- ***"update-column"*** -- ***"update-comment"*** -- ***"update-row"*** +JavaScript Kanban includes the `RestDataProvider` service, which fully supports REST API for backend communication. The provider sends and receives the following data operations: + +- `"add-card"` +- `"add-column"` +- `"add-comment"` +- `"add-row"` +- `"add-link"` +- `"delete-card"` +- `"delete-column"` +- `"delete-comment"` +- `"delete-row"` +- `"delete-link"` +- `"move-card"` +- `"move-column"` +- `"move-row"` +- `"update-card"` +- `"update-column"` +- `"update-comment"` +- `"update-row"` ## REST methods -The **RestDataProvider** service includes the special REST methods for dynamic data loading: +The `RestDataProvider` service exposes the following REST methods for dynamic data loading: -- [`getCards()`](api/provider/rest_methods/js_kanban_getcards_method.md) - gets a promise with the ***cards data*** -- [`getColumns()`](api/provider/rest_methods/js_kanban_getcolumns_method.md) - gets a promise with the ***columns data*** -- [`getLinks()`](api/provider/rest_methods/js_kanban_getlinks_method.md) - gets a promise with the ***links data*** -- [`getRows()`](api/provider/rest_methods/js_kanban_getrows_method.md) - gets a promise with the ***rows data*** -- [`getUsers()`](api/provider/rest_methods/js_kanban_getusers_method.md) - gets a promise with the ***users data*** +- [`getCards()`](api/provider/rest_methods/js_kanban_getcards_method.md) — gets a promise with cards data +- [`getColumns()`](api/provider/rest_methods/js_kanban_getcolumns_method.md) — gets a promise with columns data +- [`getLinks()`](api/provider/rest_methods/js_kanban_getlinks_method.md) — gets a promise with links data +- [`getRows()`](api/provider/rest_methods/js_kanban_getrows_method.md) — gets a promise with rows data +- [`getUsers()`](api/provider/rest_methods/js_kanban_getusers_method.md) — gets a promise with users data +- [`send()`](api/provider/rest_methods/js_kanban_send_method.md) — sends a custom HTTP request and returns a promise -## Interacting with backend +## Interact with the backend -To interact with the server, you need to connect **RestDataProvider** to the corresponding server scripts. If you want to use the built-in backend, you can find the needed scripts in the following repositories: +To interact with the server, connect `RestDataProvider` to backend scripts. Use one of the built-in backends or create your own: -- [**Go**](https://github.com/web-widgets/kanban-go) backend -- [**Node**](https://github.com/web-widgets/kanban-node) backend - -or you can create a custom one. +- [Go](https://github.com/web-widgets/kanban-go) +- [Node](https://github.com/web-widgets/kanban-node) :::tip -If you use custom backend, refer to the [**REST API routes**](api/overview/rest_routes_overview.md) topic for more information! +For a custom backend, see the [REST API routes](api/overview/rest_routes_overview.md) reference. ::: -To connect **RestDataProvider** to the backend, you need to call the **kanban.RestDataProvider** constructor by passing the corresponding **URL** as a parameter. +To connect `RestDataProvider` to a backend, call the `kanban.RestDataProvider` constructor with the backend URL. The following code snippet creates a provider, fetches initial data, and binds the provider to the Kanban Event Bus: ~~~js {1-2,27} const url = "https://some_backend_url"; @@ -91,20 +90,20 @@ Promise.all([ ~~~ :::info -You need to include **RestDataProvider** into the **Event Bus** order via the [**api.setNext()**](api/internal/js_kanban_setnext_method.md) method to perform operations with data (*adding*, *deleting* etc) and send the corresponding requests to the server +Add `RestDataProvider` to the Event Bus through the [`api.setNext()`](api/internal/js_kanban_setnext_method.md) method. This step lets data operations (adding, deleting, and similar) trigger the corresponding requests to the server. ::: ### Example -In this snippet you can see how to connect **RestDataProvider** to the **Go** backend and load server data: +The following demo connects `RestDataProvider` to a Go backend and loads server data: ## Multiuser backend -Project management tools, such as our Kanban, are highly sought after by businesses of all sizes. Considering this, it is important to provide a seamless user experience for multiple users. Our new feature allows users to efficiently manage the same cards on the Kanban board in real-time, without the need for page reloads. As a result, end-users can collaborate and stay up-to-date with one another's actions, enhancing productivity and overall satisfaction. +A multiuser backend lets several users edit the same Kanban board in real time without page reloads. The widget connects to the server through a WebSocket, and custom handlers apply incoming changes to the Kanban board. -To implement a multiuser backend, you need to get authorization on the server before the Kanban initialization. For this, you can create the `login(url: string)` function: +To enable a multiuser backend, authorize the user on the server before initializing Kanban. The following `login(url)` function fetches and caches a session token: ~~~js {} const login = (url) => { @@ -122,14 +121,14 @@ const login = (url) => { }; ~~~ -This function only simulates authorization, and all users will be authorized with an ID of 1. After successful authorization, the server sends a token that needs to be used in every subsequent request to the server. To automate the token sending, the `RestDataProvider.setHeaders()` function is used. This function adds custom headers to the requests. By default, our server stores the token in the `"Remote-Token":` header: +The function simulates authorization. Every user receives an ID of `1`. After successful authorization, the server returns a token that subsequent requests must include. To attach the token to every request, call `RestDataProvider.setHeaders()`. By default, the server stores the token in the `"Remote-Token": ` header: ~~~js {} login(url).then(token => { // rest provider initialization const restProvider = new kanban.RestDataProvider(url); // set token as the custom header - restProvder.setHeaders({ + restProvider.setHeaders({ "Remote-Token": "eyJpZCI6IjEzMzciLCJ1c2VybmFtZSI6ImJpem9uZSIsImlhdC...", }); @@ -137,7 +136,7 @@ login(url).then(token => { }); ~~~ -After receiving the token, you should initialize the widget. It can be done in the following way: +After the token arrives, initialize the widget. The following code snippet fetches data and creates the Kanban board: ~~~js {} // widget initialization... @@ -164,7 +163,7 @@ Promise.all([ }); ~~~ -After the widget initialization, you need to add WebSocket aimed to listen for events from the server. It can be done in the following way: +Once the board exists, attach a WebSocket to listen for server events. The following code snippet wires up the `RemoteEvents` handlers: ~~~js {} // multiuser initialization... @@ -180,21 +179,23 @@ const events = new RemoteEvents(url + "/api/v1", token); events.on(handlers); ~~~ -- `handlers` - the client handlers that handle server events -- `events` - the object that connects to the server and listens for all incoming events -- `RemoteEvents.on(handlers)` - applies client handlers to server events +The snippet uses the following identifiers: + +- `handlers` — client handlers that handle server events +- `events` — object that connects to the server and listens for incoming events +- `RemoteEvents.on(handlers)` — applies client handlers to server events -After integrating the multiuser backend into your app, you can simplify collaboration between users and enable them to keep track of any changes via the UI in a real time. +With the multiuser backend in place, users collaborate and track each other's changes through the UI in real time. ### Example -The snippet below shows how to configure the multiuser backend to track changes of other users in a real time: +The following demo configures the multiuser backend to track other users' changes in real time: -## Customization of server events +## Customize server events -You can define your own logic for handling server events. For this purpose, you need to pass the **handlers** object to the `RemoteEvents.on(handlers)` method. The **handlers** object should have the following structure: +To define custom logic for server events, pass a `handlers` object to `RemoteEvents.on(handlers)`. The object follows this structure: ~~~js {} { @@ -205,16 +206,16 @@ You can define your own logic for handling server events. For this purpose, you } ~~~ -When any change occurs on the server, it returns the name of the modified element. These names can vary depending on the server logic. +When a change occurs on the server, the server returns the name of the modified element. The names depend on the server logic. -The data updated on the client side will be placed in the **obj** argument of the `function(obj: any)` function. To specify an operation, there is a `type: string` field. It can take the following values: +The updated client-side data arrives in the `obj` argument of the `function(obj: any)` callback. The `type: string` field specifies the operation. Allowed values: -- For **cards**: `"add-card"`, `"update-card"`, `"delete-card"`, `"move-card"` -- For **columns**: `"add-column"`, `"update-column"`, `"delete-column"`, `"move-column"` -- For **links**: `"add-link"`, `"delete-link"` -- For **rows**: `"add-row"`, `"update-row"`, `"delete-row"`, `"move-row"` +- For cards: `"add-card"`, `"update-card"`, `"delete-card"`, `"move-card"` +- For columns: `"add-column"`, `"update-column"`, `"delete-column"`, `"move-column"` +- For links: `"add-link"`, `"delete-link"` +- For rows: `"add-row"`, `"update-row"`, `"delete-row"`, `"move-row"` -In the following code snippet you can see the implementation details: +The following code snippet shows the implementation: ~~~js {} // initialize kanban @@ -228,13 +229,13 @@ const TypeCol = 3; const cardsHandler = (obj: any) => { obj.card.id = idResolver(obj.card.id, TypeCard); obj.card.row = idResolver(obj.card.row, TypeRow); - obj.card.column = idResolver(obj.card.column, TypeColumn); + obj.card.column = idResolver(obj.card.column, TypeCol); switch (obj.type) { case "add-card": board.api.exec("add-card", { card: obj.card, select: false, - skipProvider: true, // prevent the client from sending request to the server + skipProvider: true, // prevent the client from sending the request to the server }) break; // other operations @@ -250,41 +251,43 @@ const remoteEvents = new kanban.RemoteEvents(remoteEventsURL, token); remoteEvents.on(handlers); ~~~ -The `RestDataProvider.getIDResolver()` method returns a function that is necessary to synchronize client IDs with server IDs. When a new object (*card/column/row/link*) is created on the client side, the resulting object will have a temporary ID and a corresponding server ID in the store. The `idResolver()` function allows synchronizing the client ID with the server ID. This function has the following format: `idResolver(id: TID, type: number)` +The `RestDataProvider.getIDResolver()` method returns a function that synchronizes client IDs with server IDs. When the client creates a new object (card, column, row, or link), the object receives a temporary ID together with a server ID stored in the data store. The `idResolver(id: TID, type: number)` function resolves the temporary ID to the corresponding server ID. -The `type` argument is the type of model that takes the following values: +The `type` argument identifies the model type: -- `CardID` - 1, -- `RowID` - 2, -- `ColumnID` - 3 -- `LinkID` - 4 +- `CardID` — `1` +- `RowID` — `2` +- `ColumnID` — `3` +- `LinkID` — `4` -To prevent the request from being sent to the server, you need to use the `skipProvider: true` flag when calling the `board.api.exec()` method. +To prevent the request from going to the server, pass `skipProvider: true` when you call `board.api.exec()`. -And the final step is to apply custom handlers to the server events. In this way you can create your own server event handlers. +The final step applies the custom handlers to the server events. -## Grouping two or more statuses into a single column +## Group statuses into a single column -In this section you can see how to display cards from different columns in one column (for example, a common column for cards with *To do* and *Unassigned* statuses). +This section shows how to display cards from different columns in one column. For example, you can use a single column for cards with `todo` and `unassigned` statuses. -To implement such grouping, you need to add a custom field (for example, **status**). This field will store a current status of a card. The **column** field will store a common status. +To implement grouping, add a custom field (for example, `status`) that stores the current card status. The `column` field then stores a common status. -After this you need to create specific rules for grouping cards. In our case, the cards will be grouped in specific columns by the following statuses: +Define grouping rules. In the example below, cards group by these statuses: -- *todo*, *unassigned* - statuses for the **Open** column -- *dev*, *testing* - statuses for the **Inprogress** column -- *merged*, *released* - statuses for the **Done** column +- `todo`, `unassigned` — for the **Open** column +- `dev`, `testing` — for the **Inprogress** column +- `merged`, `released` — for the **Done** column -There are 2 ways how to implement such grouping cards in a single column by 2 or more statuses: +Two implementation paths are available: -- [Server side](#server-side-grouping) -- [Server side + client side](#server-side-client-side-grouping) +- [Group on the server](#group-on-the-server) +- [Mix server and client grouping](#server-side-client-side-grouping) -### Server side grouping +### Group on the server -If you want to implement the server side grouping, your server should have an ability to send data to client side via [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API) (see [Multiuser backend](#multiuser-backend)). +Server-side grouping requires the server to push data to the client through [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API) (see [Multiuser backend](#multiuser-backend)). -In a place, where a server handles a query to update a card, you need to check the **status** field. In our case we use the [Go](https://go.dev/) programming language, but you can use any other backend technologies. +When the server handles a card-update query, check the `status` field. The example below uses [Go](https://go.dev/), but any backend technology works. + +The following code snippet maps the `status` field to a target column on the server: ~~~go func Update(id int, c Card) error { @@ -303,29 +306,31 @@ func Update(id int, c Card) error { if oldColumn != c.Column { // if the column has been updated by the status field, - // the client should be notified to move the card to the corresponding column + // notify the client to move the card to the corresponding column - // need to update the index of the card + // update the index of the card updateCardIndex(&c) - // notify client to update the column + // notify the client to update the column ws.Publish("card-update", &c) } // ... } ~~~ -Thus, when the user changes the value of the status field, the server logic checks the value and put the card in the corresponding column. After this, the server will use WebSocket to notify the client that the card needs to be moved to another column. +When the user changes the status field, the server checks the value and puts the card in the corresponding column. The server then uses the WebSocket to notify the client to move the card. + +### Mix server and client grouping {#server-side-client-side-grouping} -### Server side + client side grouping {#server-side-client-side-grouping} +For the mixed server-plus-client approach, fetch grouping rules from the server. The client uses these rules to determine the target column based on the `status` field. -For the mixed server + client approach, you should obtain grouping rules from the server. According to this rules, the client will be able to determine to which column the card will be moved depending on the value of the status field. +The following code snippet fetches the rules: ~~~js const groupingRules = await fetch("http://server.com/rules"); ~~~ -For example, you can specify the following rules: +A rule object follows this format: ~~~json { @@ -335,7 +340,7 @@ For example, you can specify the following rules: } ~~~ -Next, you need to define a logic, that will check the card changes and move the card to the required column: +Define logic that checks card changes and moves the card to the matching column. The following code snippet intercepts the `move-card` and `update-card` events: ~~~js const updateColumn = card => { @@ -350,7 +355,7 @@ const updateColumn = card => { kanban.api.intercept("move-card", ev => { kanban.api.exec("update-card", { id: ev.id, - card: { status: groupingRules[ev.columnId][0], + card: { status: groupingRules[ev.columnId][0] }, }); }); @@ -359,10 +364,10 @@ kanban.api.intercept("update-card", ev => { }); ~~~ -In this way, you can define certain columns for cards depending on other fields. +This approach assigns columns based on other field values. ### Example -The snippet below shows how to configure the server side to group two or more statuses into a single column in a real time: +The following demo configures the server side to group two or more statuses into a single column in real time: From 3b123cf2396dbfa07f4a64322104c9c7f0020f35 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 7 May 2026 21:55:32 +0300 Subject: [PATCH 10/29] Rewrite the Angular integration guide --- docs/guides/integration_with_angular.md | 82 ++++++++++++------------- 1 file changed, 41 insertions(+), 41 deletions(-) diff --git a/docs/guides/integration_with_angular.md b/docs/guides/integration_with_angular.md index 2713fdad..62bac477 100644 --- a/docs/guides/integration_with_angular.md +++ b/docs/guides/integration_with_angular.md @@ -7,79 +7,79 @@ description: You can learn about the integration with Angular in the documentati # Integration with Angular :::tip -You should be familiar with basic concepts and patterns of **Angular** before reading this documentation. To refresh your knowledge, please refer to the [**Angular documentation**](https://v17.angular.io/docs). +This guide assumes familiarity with Angular concepts and patterns. For background, see the [Angular documentation](https://v17.angular.io/docs). ::: -DHTMLX Kanban is compatible with **Angular**. We have prepared code examples on how to use DHTMLX Kanban with **Angular**. For more information, refer to the corresponding [**Example on GitHub**](https://github.com/DHTMLX/angular-kanban-demo). +DHTMLX Kanban is compatible with Angular. The full code example is available on [GitHub](https://github.com/DHTMLX/angular-kanban-demo). -## Creating a project +## Create a project :::info -Before you start to create a new project, install [**Angular CLI**](https://v17.angular.io/cli) and [**Node.js**](https://nodejs.org/en/). +Install [Angular CLI](https://v17.angular.io/cli) and [Node.js](https://nodejs.org/en/) before creating the project. ::: -Create a new **my-angular-kanban-app** project using Angular CLI. Run the following command for this purpose: +The following command creates a new *my-angular-kanban-app* project with Angular CLI: ~~~json ng new my-angular-kanban-app ~~~ :::note -If you want to follow this guide, disable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) when creating new Angular app! +Disable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) when prompted, so the project matches this guide. ::: -The command above installs all the necessary tools, so you don't need to run any additional commands. +The command installs all the necessary tools. No additional commands are required. -### Installation of dependencies +### Install dependencies -Go to the new created app directory: +Move into the new app directory: ~~~json cd my-angular-kanban-app ~~~ -Install dependencies and start the dev server. For this, use the [**yarn**](https://yarnpkg.com/) package manager: +Install dependencies and start the dev server with the [yarn](https://yarnpkg.com/) package manager: ~~~json yarn yarn start ~~~ -The app should run on a localhost (for instance `http://localhost:3000`). +The app runs on a localhost address (for example, `http://localhost:3000`). -## Creating Kanban +## Create Kanban -Now you should get the DHTMLX Kanban source code. First of all, stop the app and proceed with installing the Kanban package. +Stop the dev server and install the Kanban package. -### Step 1. Package installation +### Step 1. Install the package -Download the [**trial Kanban package**](/how_to_start/#installing-kanban-via-npm-or-yarn) and follow steps mentioned in the README file. Note that trial Kanban is available 30 days only. - -### Step 2. Component creation +Download the [trial Kanban package](/how_to_start/#installing-kanban-via-npm-or-yarn) and follow the steps in the README file. The trial version is available for 30 days. -Now you need to create an Angular component, to add Kanban with Toolbar into the application. Create the **kanban** folder in the **src/app/** directory, add a new file into it and name it **kanban.component.ts**. +### Step 2. Create the component + +Create an Angular component that adds Kanban with the Toolbar to the application. Add the *kanban* folder to the *src/app/* directory and create the *kanban.component.ts* file inside it. #### Import source files -Open the **kanban.component.ts** file and import Kanban source files. Note that: +Open *kanban.component.ts* and import the Kanban source files. The import path depends on the package version: -- if you use PRO version and install the Kanban package from a local folder, the imported path looks like this: +- For the PRO version installed from a local folder: ~~~jsx import { Kanban, Toolbar } from 'dhx-kanban-package'; ~~~ -- if you use the trial version of Kanban, specify the following path: +- For the trial version: ~~~jsx import { Kanban, Toolbar } from '@dhx/trial-kanban'; ~~~ -In this tutorial you can see how to configure the **trial** version of Kanban. +This tutorial uses the trial version of Kanban. -#### Set containers and initialize the Kanban with Toolbar +#### Set up containers and initialize Kanban -To display Kanban with Toolbar on the page, you need to set containers for Kanban and Toolbar, and initialize these components using the corresponding constructors: +To display Kanban with the Toolbar, set containers for both components and call the corresponding constructors. The following code snippet defines the component template, references the containers, and creates the instances: ~~~jsx {1,8-11,15-18,24-31} title="kanban.component.ts" import { Kanban, Toolbar } from '@dhx/trial-kanban'; @@ -87,7 +87,7 @@ import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} @Component({ encapsulation: ViewEncapsulation.None, - selector: "kanban", // a template name used in the "app.component.ts" file as + selector: "kanban", // template name used in "app.component.ts" as styleUrls: ["./kanban.component.css"], // include the css file template: `
@@ -122,9 +122,9 @@ export class KanbanComponent implements OnInit, OnDestroy { } ~~~ -#### Adding styles +#### Add styles -To display Kanban correctly, you need to provide the corresponding styles. For this purpose, you can create the **kanban.component.css** file in the **src/app/kanban/** directory and specify important styles for Kanban and its container: +Add styles for Kanban and its container. Create the *kanban.component.css* file in the *src/app/kanban/* directory: ~~~css title="kanban.component.css" /* import Kanban styles */ @@ -150,9 +150,9 @@ body{ } ~~~ -#### Loading data +#### Load data -To add data into Kanban, you need to provide a data set. You can create the **data.ts** file in the **src/app/kanban/** directory and add some data into it: +To populate Kanban, provide a data set. Create the *data.ts* file in the *src/app/kanban/* directory: ~~~jsx {2,14,37,48} title="data.ts" export function getData() { @@ -206,7 +206,7 @@ export function getData() { } ~~~ -Then open the ***kanban.component.ts*** file. Import the file with data and specify the corresponding data properties to the configuration object of Kanban within the `ngOnInit()` method, as shown below: +Open *kanban.component.ts*, import the data, and pass the data properties to the Kanban configuration object inside the `ngOnInit()` method: ~~~jsx {2,23,25-27} title="kanban.component.ts" import { Kanban, Toolbar } from '@dhx/trial-kanban'; @@ -253,7 +253,7 @@ export class KanbanComponent implements OnInit, OnDestroy { } ~~~ -You can also use the [`setConfig()`](/api/methods/js_kanban_setconfig_method/) or [`parse()`](/api/methods/js_kanban_parse_method/) method inside the `ngOnInit()` method of Angular to load data into Kanban. The `setConfig` or `parse()` method provides data reloading on each applied change. +To reload data after each change, call [`setConfig()`](/api/methods/js_kanban_setconfig_method/) or [`parse()`](/api/methods/js_kanban_parse_method/) inside `ngOnInit()`: ~~~jsx {2,23,37-42} title="kanban.component.ts" import { Kanban, Toolbar } from '@dhx/trial-kanban'; @@ -307,13 +307,13 @@ export class KanbanComponent implements OnInit, OnDestroy { } ~~~ -Now the Kanban component is ready to use. When the element will be added to the page, it will initialize the Kanban with data. You can provide necessary configuration settings as well. Visit our [Kanban API docs](/api/overview/properties_overview/) to check the full list of available properties. +The Kanban component is now ready. When the element renders, Kanban initializes with data. For the full list of supported configuration properties, see the [Kanban API reference](/api/overview/properties_overview/). -#### Handling events +#### Handle events -When a user makes some action in the Kanban, it invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](/api/overview/events_overview/). +User actions on the Kanban trigger events. Listen to events to react to specific actions. For the complete list, see the [Kanban events reference](/api/overview/events_overview/). -Open the **kanban.component.ts** file and complete the `ngOnInit()` method in the following way: +Open *kanban.component.ts* and extend the `ngOnInit()` method: ~~~jsx {5-7} title="kanban.component.ts" // ... @@ -330,9 +330,9 @@ ngOnDestroy(): void { } ~~~ -### Step 3. Adding Kanban into the app +### Step 3. Add Kanban to the app -To add the ***KanbanComponent*** component into your app, open the ***src/app/app.component.ts*** file and replace the default code with the following one: +To register the `KanbanComponent` in the app, open *src/app/app.component.ts* and replace the default code: ~~~jsx {5} title="app.component.ts" import { Component } from "@angular/core"; @@ -346,7 +346,7 @@ export class AppComponent { } ~~~ -Then create the ***app.module.ts*** file in the ***src/app/*** directory and specify the *KanbanComponent* as shown below: +Create *app.module.ts* in the *src/app/* directory and declare the `KanbanComponent`: ~~~jsx {4-5,8} title="app.module.ts" import { NgModule } from "@angular/core"; @@ -363,7 +363,7 @@ import { KanbanComponent } from "./kanban/kanban.component"; export class AppModule {} ~~~ -The last step is to open the ***src/main.ts*** file and replace the existing code with the following one: +Open *src/main.ts* and replace the existing code: ~~~jsx title="main.ts" import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; @@ -373,7 +373,7 @@ platformBrowserDynamic() .catch((err) => console.error(err)); ~~~ -After that, you can start the app to see Kanban loaded with data on a page. +Start the app to see Kanban loaded with data on the page. import trial from '@site/static/img/trial_kanban.png'; @@ -383,4 +383,4 @@ import trial from '@site/static/img/trial_kanban.png'; className="img_border" /> -Now you know how to integrate DHTMLX Kanban with Angular. You can customize the code according to your specific requirements. The final advanced example you can find on [**GitHub**](https://github.com/DHTMLX/angular-kanban-demo). +The full advanced example is available on [GitHub](https://github.com/DHTMLX/angular-kanban-demo). From 0418ac502589dd8f67d563cc7c14fb32c08c0e09 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 7 May 2026 21:56:06 +0300 Subject: [PATCH 11/29] Rewrite the React integration guide --- docs/guides/integration_with_react.md | 76 +++++++++++++-------------- 1 file changed, 38 insertions(+), 38 deletions(-) diff --git a/docs/guides/integration_with_react.md b/docs/guides/integration_with_react.md index 02bf209f..e0e39459 100644 --- a/docs/guides/integration_with_react.md +++ b/docs/guides/integration_with_react.md @@ -7,86 +7,86 @@ description: You can learn about the integration with React in the documentation # Integration with React :::tip -You should be familiar with the basic concepts and patterns of [**React**](https://react.dev) before reading this documentation. To refresh your knowledge, please refer to the [**React documentation**](https://react.dev/learn). +This guide assumes familiarity with [React](https://react.dev) concepts and patterns. For background, see the [React documentation](https://react.dev/learn). ::: -DHTMLX Kanban is compatible with **React**. We have prepared code examples on how to use DHTMLX Kanban with **React**. For more information, refer to the corresponding [**Example on GitHub**](https://github.com/DHTMLX/react-kanban-demo). +DHTMLX Kanban is compatible with React. The full code example is available on [GitHub](https://github.com/DHTMLX/react-kanban-demo). -## Creating a project +## Create a project :::info -Before you start to create a new project, install [**Vite**](https://vite.dev/) (optional) and [**Node.js**](https://nodejs.org/en/). +Install [Vite](https://vite.dev/) (optional) and [Node.js](https://nodejs.org/en/) before creating the project. ::: -You can create a basic **React** project or use **React with Vite**. Let's name the project as **my-react-kanban-app**: +Create a basic React project (or React with Vite). Let's name the project *my-react-kanban-app*: ~~~json npx create-react-app my-react-kanban-app ~~~ -### Installation of dependencies +### Install dependencies -Go to the new created app directory: +Move into the new app directory: ~~~json cd my-react-kanban-app ~~~ -Install dependencies and start the dev server. For this, use a package manager: +Install dependencies and start the dev server with one of the package managers: -- if you use [**yarn**](https://yarnpkg.com/), run the following commands: +- For [yarn](https://yarnpkg.com/): ~~~json yarn yarn start ~~~ -- if you use [**npm**](https://www.npmjs.com/), run the following commands: +- For [npm](https://www.npmjs.com/): ~~~json npm install npm run dev ~~~ -The app should run on a localhost (for instance `http://localhost:3000`). +The app runs on a localhost address (for example, `http://localhost:3000`). -## Creating Kanban +## Create Kanban -Now you should get the DHTMLX Kanban source code. First of all, stop the app and proceed with installing the Kanban package. +Stop the dev server and install the Kanban package. -### Step 1. Package installation +### Step 1. Install the package -Download the [**trial Kanban package**](/how_to_start/#installing-kanban-via-npm-or-yarn) and follow steps mentioned in the README file. Note that trial Kanban is available 30 days only. +Download the [trial Kanban package](/how_to_start/#installing-kanban-via-npm-or-yarn) and follow the steps in the README file. The trial version is available for 30 days. -### Step 2. Component creation +### Step 2. Create the component -Now you need to create a React component, to add a Kanban into the application. Create a new file in the ***src/*** directory and name it ***Kanban.jsx***. +Create a React component that adds Kanban to the application. Add a new file to the *src/* directory and name it *Kanban.jsx*. -#### Importing source files +#### Import source files -Open the ***Kanban.jsx*** file and import Kanban source files. Note that: +Open *Kanban.jsx* and import the Kanban source files. The import paths depend on the package version: -- if you use PRO version and install the Kanban package from a local folder, the import paths look like this: +- For the PRO version installed from a local folder: ~~~jsx title="Kanban.jsx" import { Kanban, Toolbar } from 'dhx-kanban-package'; import 'dhx-kanban-package/dist/kanban.css'; ~~~ -Note that depending on the used package, the source files can be minified. In this case make sure that you are importing the CSS file as ***kanban.min.css***. +If the package ships minified source files, import the CSS file as *kanban.min.css*. -- if you use the trial version of Kanban, specify the following paths: +- For the trial version: ~~~jsx title="Kanban.jsx" import { Kanban, Toolbar } from '@dhx/trial-kanban'; import "@dhx/trial-kanban/dist/kanban.css"; ~~~ -In this tutorial you can see how to configure the **trial** version of Kanban. +This tutorial uses the trial version of Kanban. -#### Setting containers and adding Kanban with Toolbar +#### Set up containers and initialize Kanban -To display Kanban with Toolbar on the page, you need to create containers for Kanban and Toolbar, and initialize these components using the corresponding constructors: +To display Kanban with the Toolbar, create containers for both components and call the corresponding constructors. The following code snippet wires up refs and instantiates the components inside `useEffect()`: ~~~jsx {2,6-7,10-11,13-17} title="Kanban.jsx" import { useEffect, useRef } from "react"; @@ -120,9 +120,9 @@ export default function KanbanComponent(props) { } ~~~ -#### Adding styles +#### Add styles -To display Kanban correctly, you need to specify important styles for Kanban and its container in the main css file of the project: +Add styles for Kanban and its container in the main CSS file of the project: ~~~css title="index.css" /* specify styles for initial page */ @@ -146,9 +146,9 @@ body, } ~~~ -#### Loading data +#### Load data -To add data into the Kanban, you need to provide a data set. You can create the ***data.js*** file in the ***src/*** directory and add some data into it: +To populate Kanban, provide a data set. Create the *data.js* file in the *src/* directory: ~~~jsx {2,14,37,48} title="data.js" export function getData() { @@ -202,7 +202,7 @@ export function getData() { } ~~~ -Then open the ***App.js*** file and import data. After this you can pass data into the new created `` components as **props**: +Open *App.js*, import the data, and pass it to the new `` component as props: ~~~jsx {2,5-6} title="App.js" import Kanban from "./Kanban"; @@ -216,7 +216,7 @@ function App() { export default App; ~~~ -Go to the ***Kanban.jsx*** file and apply the passed **props** to the Kanban configuration object: +Open *Kanban.jsx* and apply the props to the Kanban configuration object: ~~~jsx {5,11-13} title="Kanban.jsx" import { useEffect, useRef } from "react"; @@ -254,7 +254,7 @@ export default function KanbanComponent(props) { } ~~~ -You can also use the [`setConfig()`](/api/methods/js_kanban_setconfig_method/) or [`parse()`](/api/methods/js_kanban_parse_method/) method inside the `useEffect()` method of React to load data into Kanban. The `setConfig` or `parse()` method provides data reloading on each applied change. +To reload data after each change, call [`setConfig()`](/api/methods/js_kanban_setconfig_method/) or [`parse()`](/api/methods/js_kanban_parse_method/) inside `useEffect()`: ~~~jsx {9-11,27} title="Kanban.jsx" import { useEffect, useRef } from "react"; @@ -299,13 +299,13 @@ export default function KanbanComponent(props) { } ~~~ -Now the Kanban component is ready. When the element will be added to the page, it will initialize the Kanban with data. You can provide necessary configuration settings as well. Visit our [Kanban API docs](/api/overview/properties_overview/) to check the full list of available properties. +The Kanban component is now ready. When the element renders, Kanban initializes with data. For the full list of supported configuration properties, see the [Kanban API reference](/api/overview/properties_overview/). -#### Handling events +#### Handle events -When a user makes some action in the Kanban, it invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](/api/overview/events_overview/). +User actions on the Kanban trigger events. Listen to events to react to specific actions. For the complete list, see the [Kanban events reference](/api/overview/events_overview/). -Open ***Kanban.jsx*** and complete the `useEffect()` method in the following way: +Open *Kanban.jsx* and extend the `useEffect()` call: ~~~jsx {5-7} title="Kanban.jsx" // ... @@ -323,7 +323,7 @@ useEffect(() => { // ... ~~~ -After that, you can start the app to see Kanban loaded with data on a page. +Start the app to see Kanban loaded with data on the page. import trial from '@site/static/img/trial_kanban.png'; @@ -333,4 +333,4 @@ import trial from '@site/static/img/trial_kanban.png'; className="img_border" /> -Now you know how to integrate DHTMLX Kanban with React. You can customize the code according to your specific requirements. The final advanced example you can find on [**GitHub**](https://github.com/DHTMLX/react-kanban-demo). +The full advanced example is available on [GitHub](https://github.com/DHTMLX/react-kanban-demo). From da6c1673f576c92547767e679f86c3251d4197aa Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 7 May 2026 21:57:18 +0300 Subject: [PATCH 12/29] Rewrite the Salesforce integration guide --- docs/guides/integration_with_salesforce.md | 58 ++++++++++++---------- 1 file changed, 32 insertions(+), 26 deletions(-) diff --git a/docs/guides/integration_with_salesforce.md b/docs/guides/integration_with_salesforce.md index fdf0be03..a3615762 100644 --- a/docs/guides/integration_with_salesforce.md +++ b/docs/guides/integration_with_salesforce.md @@ -1,5 +1,5 @@ --- -sidebar\_label: Integration with Salesforce +sidebar_label: Integration with Salesforce title: Integration with Salesforce description: Learn how to integrate DHTMLX Kanban into Salesforce. This guide explains the required HTML setup and environment configuration for smooth operation inside Salesforce Lightning components. --- @@ -7,57 +7,59 @@ description: Learn how to integrate DHTMLX Kanban into Salesforce. This guide ex # Integration with Salesforce :::tip -You should be familiar with the basic concepts and patterns of [**Salesforce**](https://www.salesforce.com/) before reading this documentation. To refresh your knowledge, please refer to the [**Salesforce documentation**](https://developer.salesforce.com/docs). +This guide assumes familiarity with [Salesforce](https://www.salesforce.com/) concepts and patterns. For background, see the [Salesforce documentation](https://developer.salesforce.com/docs). ::: -DHTMLX Kanban is compatible with [Salesforce](https://www.salesforce.com/) platform. We have prepared code examples on how to add DHTMLX Kanban into Salesforce environment. For more information, refer to the corresponding [Example on GitHub](https://github.com/DHTMLX/salesforce-lwc-demo). +DHTMLX Kanban is compatible with the [Salesforce](https://www.salesforce.com/) platform. The full code example is available on [GitHub](https://github.com/DHTMLX/salesforce-lwc-demo). :::note -The JavaScript Kanban widget automatically detects that it operates within a [**Salesforce**](https://www.salesforce.com/) environment and configures the integration logic internally. In most cases, you do not need to call any [**Salesforce-specific methods**](#salesforce-specific-methods) manually. +The Kanban widget detects the Salesforce environment and configures the integration logic internally. In most cases, you do not need to call any [Salesforce-specific methods](#salesforce-specific-methods) manually. ::: -## Preparing environment +## Prepare the environment -If you want to add Kanban into your Salesforce project, you need to mark the *root* container with the `data-wx-root="true"` HTML attribute. This attribute allows the library to locate the main node for mounting **Kanban** and **Toolbar** widgets. +To add Kanban to a Salesforce project, mark the *root* container with the `data-wx-root="true"` HTML attribute. The library uses this attribute to locate the main mount node for Kanban and the Toolbar: -```html title="kanban.html" +~~~html title="kanban.html" -``` +~~~ -Nested elements marked with the `data-wx-portal-root="1"` attribute serve as containers for DHTMLX components (for example, **Toolbar** and **Kanban**). +Nested elements marked with the `data-wx-portal-root="1"` attribute serve as containers for the DHTMLX components (Toolbar, Kanban). ## Salesforce environment API -The DHTMLX Kanban includes the `salesForceEnv` helper class that stores methods for manual control of the Salesforce environment. You can import the `salesForceEnv` helper class as follows: +DHTMLX Kanban exposes the `salesForceEnv` helper class with methods for manual control of the Salesforce environment. Import the helper as follows: -```jsx {4} +~~~jsx {4} import { Kanban, Toolbar, salesForceEnv } from "@dhx/trial-kanban"; -``` +~~~ :::note -Normally, salesforce-specific methods are not required, but they can be available only as a fallback in case automatic detection fails. +Salesforce-specific methods are typically not required. Use them as a fallback when automatic detection fails. ::: ### Salesforce-specific methods -You can use the following methods of the `salesForceEnv` helper class: +The `salesForceEnv` helper class exposes the following methods: | Method | Description | | :--------------------------------------------------------------- | :----------------------------------------------------------------------------- | -| `salesForceEnv.detect()` | Detects whether the Kanban is running inside Salesforce | +| `salesForceEnv.detect()` | Detects whether Kanban is running inside Salesforce | | `salesForceEnv.addGlobalEvent(eventName, handler, htmlElement)` | Attaches a global event to the first available HTML element | | `salesForceEnv.getTopNode()` | Returns the first available HTML element inside the Salesforce DOM hierarchy | -```jsx {4,7} +The following code snippet imports the helper and runs the detection check: + +~~~jsx {4,7} import { Kanban, Toolbar, @@ -65,7 +67,7 @@ import { } from "@dhx/trial-kanban"; salesForceEnv.detect(); -``` +~~~ ### Additional exported function @@ -73,7 +75,9 @@ salesForceEnv.detect(); | :------------------- | :-------------------------------------------------------------------------------- | | `enableSalesForce()` | Manually sets the Salesforce environment when automatic detection is unavailable | -```jsx {5,8} +The following code snippet imports `enableSalesForce()` and forces the Salesforce environment: + +~~~jsx {5,8} import { Kanban, Toolbar, @@ -82,18 +86,20 @@ import { } from "@dhx/trial-kanban"; enableSalesForce(); -``` +~~~ ## Workflow steps -1. Add the `data-wx-root="true"` attribute to your LWC container -2. Import and initialize DHTMLX Kanban and Toolbar (optionaly) -3. The JavaScript Kanban widget automatically detects the Salesforce context and applies internal configuration -4. You do not need to call the `enableSalesForce()` function or use `salesForceEnv` methods unless your app runs in a non-standard embedding scenario +1. Add the `data-wx-root="true"` attribute to your LWC container. +2. Import and initialize Kanban and the Toolbar (Toolbar is optional). +3. Kanban detects the Salesforce context and applies internal configuration automatically. +4. Skip the `enableSalesForce()` call and `salesForceEnv` methods unless the app runs in a non-standard embedding scenario. ### Example -```jsx title="kanban.js" +The following code snippet initializes Kanban and the Toolbar inside an LWC component: + +~~~jsx title="kanban.js" import { Kanban, Toolbar } from "@dhx/trial-kanban"; import "@dhx/trial-kanban/dist/kanban.css"; @@ -105,6 +111,6 @@ export default class KanbanLWC { const toolbar = new Toolbar(toolbar_container, { api: kanban.api }); } } -``` +~~~ -Now the DHTMLX Kanban component is fully integrated into your **Salesforce Lightning** environment. The widget automatically handles DOM hierarchy and event binding inside LWC. You can continue configuring Kanban through its standard API and customize Kanban appearance and logic according to your project needs. The final example you can find on [**GitHub**](https://github.com/DHTMLX/salesforce-lwc-demo). +DHTMLX Kanban is now integrated into the Salesforce Lightning environment. The widget handles the DOM hierarchy and event binding inside LWC. Continue configuring Kanban through its standard API to customize appearance and behavior. The full example is available on [GitHub](https://github.com/DHTMLX/salesforce-lwc-demo). From 1696039e53328a64911de13a89b4c9ae5641486f Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 7 May 2026 21:57:59 +0300 Subject: [PATCH 13/29] Rewrite the Vue integration guide --- docs/guides/integration_with_vue.md | 78 ++++++++++++++--------------- 1 file changed, 39 insertions(+), 39 deletions(-) diff --git a/docs/guides/integration_with_vue.md b/docs/guides/integration_with_vue.md index 6690b8bd..f0a88186 100644 --- a/docs/guides/integration_with_vue.md +++ b/docs/guides/integration_with_vue.md @@ -7,70 +7,70 @@ description: You can learn about the integration with Vue in the documentation o # Integration with Vue :::tip -You should be familiar with the basic concepts and patterns of [**Vue**](https://vuejs.org/) before reading this documentation. To refresh your knowledge, please refer to the [**Vue 3 documentation**](https://vuejs.org/guide/introduction.html#getting-started). +This guide assumes familiarity with [Vue](https://vuejs.org/) concepts and patterns. For background, see the [Vue 3 documentation](https://vuejs.org/guide/introduction.html#getting-started). ::: -DHTMLX Kanban is compatible with **Vue**. We have prepared code examples on how to use DHTMLX Kanban with **Vue 3**. For more information, refer to the corresponding [**Example on GitHub**](https://github.com/DHTMLX/vue-kanban-demo). +DHTMLX Kanban is compatible with Vue. The full code example for Vue 3 is available on [GitHub](https://github.com/DHTMLX/vue-kanban-demo). -## Creating a project +## Create a project :::info -Before you start to create a new project, install [**Node.js**](https://nodejs.org/en/). +Install [Node.js](https://nodejs.org/en/) before creating the project. ::: -To create a **Vue** project, run the following command: +The following command creates a new Vue project: ~~~json npm create vue@latest ~~~ -This command installs and executes `create-vue`, the official **Vue** project scaffolding tool. Check the details in the [Vue.js Quick Start](https://vuejs.org/guide/quick-start.html#creating-a-vue-application). +The command runs `create-vue`, the official Vue project scaffolding tool. For details, see the [Vue.js Quick Start](https://vuejs.org/guide/quick-start.html#creating-a-vue-application). -Let's name the project as **my-vue-kanban-app**. +Let's name the project *my-vue-kanban-app*. -### Installation of dependencies +### Install dependencies -Go to the app directory: +Move into the app directory: ~~~json cd my-vue-kanban-app ~~~ -Install dependencies and start the dev server. For this, use a package manager: +Install dependencies and start the dev server with one of the package managers: -- if you use [**yarn**](https://yarnpkg.com/), run the following commands: +- For [yarn](https://yarnpkg.com/): ~~~jsx yarn yarn start // or yarn dev ~~~ -- if you use [**npm**](https://www.npmjs.com/), run the following commands: +- For [npm](https://www.npmjs.com/): ~~~json npm install npm run dev ~~~ -The app should run on a localhost (for instance `http://localhost:3000`). +The app runs on a localhost address (for example, `http://localhost:3000`). -## Creating Kanban +## Create Kanban -Now you should get the DHTMLX Kanban source code. First of all, stop the app and proceed with installing the Kanban package. +Stop the dev server and install the Kanban package. -### Step 1. Package installation +### Step 1. Install the package -Download the [**trial Kanban package**](/how_to_start/#installing-kanban-via-npm-or-yarn) and follow steps mentioned in the README file. Note that trial Kanban is available 30 days only. +Download the [trial Kanban package](/how_to_start/#installing-kanban-via-npm-or-yarn) and follow the steps in the README file. The trial version is available for 30 days. -### Step 2. Component creation +### Step 2. Create the component -Now you need to create a Vue component, to add Kanban with Toolbar into the application. Create a new file in the ***src/components/*** directory and name it ***Kanban.vue***. +Create a Vue component that adds Kanban with the Toolbar to the application. Add a new file to the *src/components/* directory and name it *Kanban.vue*. #### Import source files -Open the ***Kanban.vue*** file and import Kanban source files. Note that: +Open *Kanban.vue* and import the Kanban source files. The import paths depend on the package version: -- if you use PRO version and install the Kanban package from a local folder, the import paths look like this: +- For the PRO version installed from a local folder: ~~~html title="Kanban.vue" ~~~ -Note that depending on the used package, the source files can be minified. In this case make sure that you are importing the CSS file as **kanban.min.css**. +If the package ships minified source files, import the CSS file as *kanban.min.css*. -- if you use the trial version of Kanban, specify the following paths: +- For the trial version: ~~~html title="Kanban.vue" ~~~ -In this tutorial you can see how to configure the **trial** version of Kanban. +This tutorial uses the trial version of Kanban. -#### Setting containers and adding Kanban with Toolbar +#### Set up containers and initialize Kanban -To display Kanban with Toolbar on the page, you need to create containers for Kanban and Toolbar, and initialize these components using the corresponding constructors: +To display Kanban with the Toolbar, create containers for both components and call the corresponding constructors. The following code snippet wires up refs and instantiates the components inside `mounted()`: ~~~html {2,7-8,10-14} title="Kanban.vue" ~~~ -Note that depending on the used package, the source files can be minified. In this case make sure that you are importing the CSS file as **kanban.min.css**. +If the package ships minified source files, import the CSS file as *kanban.min.css*. -- if you use the trial version of Kanban, specify the following paths: +- For the trial version: ~~~html title="Kanban.svelte" ~~~ -In this tutorial you can see how to configure the **trial** version of Kanban. +This tutorial uses the trial version of Kanban. -#### Setting containers and adding Kanban with Toolbar +#### Set up containers and initialize Kanban -To display Kanban with Toolbar on the page, you need to create containers for Kanban and Toolbar, and initialize these components using the corresponding constructors: +To display Kanban with the Toolbar, create containers for both components and call the corresponding constructors. The following code snippet binds the containers and instantiates the components inside `onMount()`: ~~~html {3,6,10-11,13-17,27-28} title="Kanban.svelte" ~~~ -After that, you can start the app to see Kanban loaded with data on a page. +Start the app to see Kanban loaded with data on the page. import trial from '@site/static/img/trial_kanban.png'; @@ -342,4 +339,4 @@ import trial from '@site/static/img/trial_kanban.png'; className="img_border" /> -Now you know how to integrate DHTMLX Kanban with Svelte. You can customize the code according to your specific requirements. The final advanced example you can find on [**GitHub**](https://github.com/DHTMLX/svelte-kanban-demo). +The full advanced example is available on [GitHub](https://github.com/DHTMLX/svelte-kanban-demo). From c09e6fc010c9047abc0b6004b07ba7cc9c9aed3c Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 7 May 2026 22:02:44 +0300 Subject: [PATCH 15/29] Update anchors --- docs/api/methods/js_kanban_parse_method.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api/methods/js_kanban_parse_method.md b/docs/api/methods/js_kanban_parse_method.md index 0aee15c5..4779b61a 100644 --- a/docs/api/methods/js_kanban_parse_method.md +++ b/docs/api/methods/js_kanban_parse_method.md @@ -46,4 +46,4 @@ board.parse({ **Change log:** Starting from v1.1 you don't need to reset initial data in constructor before parsing new data -**Related articles:** [Working with Data](guides/working_with_data.md#loading-data-from-local-source) +**Related articles:** [Working with Data](guides/working_with_data.md#load-data-from-a-local-source) From 7368a73be943d06455855e28095b832530e93daf Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Fri, 8 May 2026 10:59:37 +0300 Subject: [PATCH 16/29] Update grammar for Configuration guide --- docs/guides/configuration.md | 105 +++++++++++------------------------ 1 file changed, 32 insertions(+), 73 deletions(-) diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md index 127757a0..273906b3 100644 --- a/docs/guides/configuration.md +++ b/docs/guides/configuration.md @@ -8,10 +8,10 @@ description: You can learn about the configuration in the documentation of the D You can configure the Kanban appearance and functionality with the following properties: -- [`cardShape`](api/config/js_kanban_cardshape_config.md) — configure cards appearance -- [`editorShape`](api/config/js_kanban_editorshape_config.md) — configure editor fields -- [`editor`](api/config/js_kanban_editor_config.md) — configure editor behavior -- [`renderType`](api/config/js_kanban_rendertype_config.md), [`scrollType`](api/config/js_kanban_scrolltype_config.md) — configure card rendering and board scrolling +- [`cardShape`](api/config/js_kanban_cardshape_config.md) — set up card appearance and built-in fields +- [`editorShape`](api/config/js_kanban_editorshape_config.md) — define editor fields +- [`editor`](api/config/js_kanban_editor_config.md) — control editor visibility, autosave, and placement +- [`renderType`](api/config/js_kanban_rendertype_config.md), [`scrollType`](api/config/js_kanban_scrolltype_config.md) — adjust card rendering and board scrolling - [`history`](api/config/js_kanban_history_config.md) — manage history of card operations - [`cardTemplate`](api/config/js_kanban_cardtemplate_config.md) — customize card appearance (see the [Customization](guides/customization.md) section) - [`locale`](api/config/js_kanban_locale_config.md) — apply a locale (see the [Localization](guides/localization.md) section) @@ -21,68 +21,27 @@ You can configure the Kanban appearance and functionality with the following pro The Kanban board consists of cards distributed into columns and rows. Use the [`cardShape`](api/config/js_kanban_cardshape_config.md) property to configure card appearance and built-in fields: -- `label: boolean | { show }` — card label - - :::tip - Activate the `label` parameter to display the label input in the editor. Configure the editor input with the [`text`](#text-and-textarea-types) type. - ::: - -- `description: boolean | { show }` — card description - - :::tip - Activate the `description` parameter to display the description input in the editor. Configure the editor input with the [`textarea`](#text-and-textarea-types) type. - ::: - -- `progress: boolean | { show }` — card progress - - :::tip - Activate the `progress` parameter to display the progress control in the editor. Configure the editor control with the [`progress`](#progress-type) type. - ::: - -- `start_date: boolean | { show, format }` — card start date - - :::tip - Activate the `start_date` parameter to display the date control in the editor. Configure the editor control with the [`date`](#date-and-daterange-types) type. - ::: - -- `end_date: boolean | { show, format }` — card end date - - :::tip - Activate the `end_date` parameter to display the date control in the editor. Configure the editor control with the [`date`](#date-and-daterange-types) type. - ::: - +- `label: boolean | { show }` — card label, edited with the [`text`](#text-and-textarea-types) type +- `description: boolean | { show }` — card description, edited with the [`textarea`](#text-and-textarea-types) type +- `progress: boolean | { show }` — card progress, edited with the [`progress`](#progress-type) type +- `start_date: boolean | { show, format }` — card start date, edited with the [`date`](#date-and-daterange-types) type +- `end_date: boolean | { show, format }` — card end date, edited with the [`date`](#date-and-daterange-types) type - `menu: boolean | { show, items }` — card context menu -- `attached: boolean | { show }` — card attachment - - :::tip - Activate the `attached` parameter to display the file upload field in the editor. Configure the editor field with the [`files`](#files-type) type. - ::: - -- `color: boolean | { show, values }` — top color line of the card - - :::tip - Activate the `color` parameter to display the colorpicker in the editor. Configure the editor control with the [`color`](#color-type) type. - ::: - +- `attached: boolean | { show }` — card attachment, edited with the [`files`](#files-type) type +- `color: boolean | { show, values }` — top color line of the card, edited with the [`color`](#color-type) type - `cover: boolean | { show }` — card preview image - `comments: boolean | { show }` — card comments - `confirmDeletion: boolean | { show }` — confirmation dialog for card deletion - `votes: boolean | { show, clickable }` — card votes -- `users: boolean | { show, values, maxCount }` — users assigned to the card - - :::tip - Activate the `users` parameter to display the user picker in the editor. Use the [`combo` or `select`](#combo-select-and-multiselect-types) type to assign one user, or the [`multiselect`](#combo-select-and-multiselect-types) type to assign several users. - ::: - -- `priority: boolean | { show, values }` — card priority - - :::tip - Activate the `priority` parameter to display the priority control in the editor. Configure the editor control with the [`combo` or `select`](#combo-select-and-multiselect-types) type. - ::: - +- `users: boolean | { show, values, maxCount }` — users assigned to the card, edited with the [`combo`, `select`, or `multiselect`](#combo-select-and-multiselect-types) types +- `priority: boolean | { show, values }` — card priority, edited with the [`combo` or `select`](#combo-select-and-multiselect-types) type - `css: (card) => string` — function that returns a CSS class applied to a card conditionally - `headerFields: [{ key, label, css }]` — custom card fields +:::tip +When you activate a field in `cardShape`, the editor displays the matching control automatically. Configure each control through the [`editorShape`](api/config/js_kanban_editorshape_config.md) property — see [Editor](#editor) for the available types. +::: + The following code snippet configures cards with custom users, priorities, and a custom header field: ~~~jsx {12-35,42} @@ -132,7 +91,7 @@ new kanban.Kanban("#root", { ~~~ :::note -If you do not specify card settings through the [`cardShape`](api/config/js_kanban_cardshape_config.md) property, the widget applies a [`defaultCardShape`](api/config/js_kanban_cardshape_config.md#default-config) set of parameters. +If you do not specify card settings through the [`cardShape`](api/config/js_kanban_cardshape_config.md) property, the widget falls back to [`defaultCardShape`](api/config/js_kanban_cardshape_config.md#default-config). ::: ## Editor @@ -154,7 +113,7 @@ Display the editor as a sidebar or modal window with the [`editor.placement`](ap ### Combo, select, and multiselect types -The `combo`, `select`, and `multiselect` types render dropdown options. The following code snippet uses the `combo` type to configure a dropdown for picking a card priority: +The following code snippet configures a dropdown for picking a card priority: ~~~jsx {3-12} new kanban.Kanban("#root", { @@ -203,7 +162,7 @@ editorShape: [ ### Color type -The `color` type renders a colorpicker. The following code snippet uses the `color` type to configure the editor field for picking a card color: +The following code snippet configures the editor field for picking a card color: ~~~jsx {3-12} new kanban.Kanban("#root", { @@ -225,7 +184,7 @@ new kanban.Kanban("#root", { ### Text and textarea types -The `text` and `textarea` types render single-line and multi-line inputs. The following code snippet uses the `text` type to configure the editor field for entering a card label: +The following code snippet configures the editor field for entering a card label: ~~~jsx {3-14} new kanban.Kanban("#root", { @@ -249,7 +208,7 @@ new kanban.Kanban("#root", { ### Progress type -The `progress` type renders a slider. The following code snippet uses the `progress` type to configure the editor field for setting card progress: +The following code snippet configures the editor field for setting card progress: ~~~jsx {3-12} new kanban.Kanban("#root", { @@ -271,11 +230,11 @@ new kanban.Kanban("#root", { ### Files type -The `files` type renders a file uploader. Set the `uploadURL` parameter to a string for a basic upload, or to a function for a custom request. +Set the `uploadURL` parameter to a string for a basic upload, or to a function for a custom request. #### Configure upload URL as string -The following code snippet uses the `files` type with a string URL for the file uploader: +The following code snippet uses a string URL for the file uploader: ~~~jsx {4-15} const url = "https://docs.dhtmlx.com/kanban-backend"; @@ -340,7 +299,7 @@ new kanban.Kanban("#root", { ### Date and dateRange types -The `date` type renders a single date picker. The following code snippet uses the `date` type to configure the editor field for setting a single date: +The following code snippet configures the editor field for a single date: ~~~jsx {3-8} new kanban.Kanban("#root", { @@ -356,7 +315,7 @@ new kanban.Kanban("#root", { }); ~~~ -The `dateRange` type renders a start/end date picker. The following code snippet uses the `dateRange` type to configure the editor field for setting a start and end date: +The following code snippet configures the editor field for a start/end date range: ~~~jsx {3-11} new kanban.Kanban("#root", { @@ -377,7 +336,7 @@ new kanban.Kanban("#root", { ### Comments type -The `comments` type renders a comments panel. The following code snippet uses the `comments` type to configure the comments field of the editor: +The following code snippet configures the comments field of the editor: ~~~jsx {3-13} new kanban.Kanban("#root", { @@ -400,7 +359,7 @@ new kanban.Kanban("#root", { ### Links type -The `links` type renders a panel for linking cards. The following code snippet uses the `links` type to configure the links field of the editor: +The following code snippet configures the links field of the editor: ~~~jsx {3-10} new kanban.Kanban("#root", { @@ -478,7 +437,7 @@ new kanban.Kanban("#root", { ~~~ :::note -If you do not specify editor settings through the [`editorShape`](api/config/js_kanban_editorshape_config.md) property, the widget applies a [`defaultEditorShape`](api/config/js_kanban_editorshape_config.md#default-config) set of parameters. The default controls and inputs appear in the editor only after you activate the corresponding card fields through the [`cardShape`](api/config/js_kanban_cardshape_config.md) property. +If you do not specify editor settings through the [`editorShape`](api/config/js_kanban_editorshape_config.md) property, the widget falls back to [`defaultEditorShape`](api/config/js_kanban_editorshape_config.md#default-config). The default controls and inputs appear in the editor only after you activate the corresponding card fields through the [`cardShape`](api/config/js_kanban_cardshape_config.md) property. ::: ### Configure editor behavior @@ -506,7 +465,7 @@ new kanban.Kanban("#root", { }); ~~~ -## Configure rendering and scrolling +## Rendering and scrolling The Kanban widget renders all cards and scrolls the entire board by default. For boards with many cards, switch to lazy rendering or per-column scrolling: @@ -530,7 +489,7 @@ new kanban.Kanban("#root", { When you combine `renderType: "lazy"` with any `scrollType`, set a static height for cards through the [`cardHeight`](api/config/js_kanban_cardheight_config.md) property. Without `cardHeight`, lazy rendering does not display cards correctly. ::: -## Configure history of changes +## History of changes Kanban tracks card operations and exposes undo and redo controls on the Toolbar. Use the [`history`](api/config/js_kanban_history_config.md) property to disable this behavior. @@ -550,7 +509,7 @@ To skip individual operations from history, pass the [`$meta`](api/common/js_kan ## Toolbar -The Kanban Toolbar contains the searchbar for searching cards and controls for sorting cards and adding new columns and rows. Initialize the Toolbar in a separate container with the `kanban.Toolbar()` constructor. +The Kanban Toolbar provides a searchbar, sort controls, and controls for adding columns and rows. Initialize the Toolbar in a separate container with the `kanban.Toolbar()` constructor. The following code snippet creates a Toolbar bound to the Kanban instance: From 7eb3b1efbb8dc14ef9f8b4f3534575c55e934152 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Fri, 8 May 2026 11:00:20 +0300 Subject: [PATCH 17/29] Update grammar for Customization guide --- docs/guides/customization.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/docs/guides/customization.md b/docs/guides/customization.md index 75127abd..f35d3114 100644 --- a/docs/guides/customization.md +++ b/docs/guides/customization.md @@ -10,21 +10,21 @@ You can customize the Kanban appearance and behavior with the following properti - [`cardTemplate`](api/config/js_kanban_cardtemplate_config.md) — render cards with a custom HTML template - [`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 -- [`columnShape.headerTemplate`](api/config/js_kanban_columnshape_config.md), [`columnShape.collapsedTemplate`](api/config/js_kanban_columnshape_config.md) — change column header templates +- [`columnShape.headerTemplate`](api/config/js_kanban_columnshape_config.md), [`columnShape.collapsedTemplate`](api/config/js_kanban_columnshape_config.md) — replace column header templates - [`cardShape.css`](api/config/js_kanban_cardshape_config.md), [`columnShape.css`](api/config/js_kanban_columnshape_config.md), [`rowShape.css`](api/config/js_kanban_rowshape_config.md) — apply CSS classes conditionally -- [`items`](api/config/toolbar_items_config.md) — change the Toolbar structure and controls +- [`items`](api/config/toolbar_items_config.md) — rearrange Toolbar structure and add custom controls - CSS variables — adjust visual styles (see the [Stylization](guides/stylization.md) section) ## Custom cards -Use the [`cardTemplate`](api/config/js_kanban_cardtemplate_config.md) property to render cards with a custom HTML template. The property is a callback that returns the markup for each card. +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. The callback receives an object with the following parameters: -- `cardFields` — data object of the card -- `selected` — selected state of the card -- `dragging` — dragging state of the card -- `cardShape` — configuration object of the card +- `cardFields` — card data +- `selected` — whether the card is selected +- `dragging` — whether the card is being dragged +- `cardShape` — card configuration To embed a context menu trigger in a custom card template, render an icon element with the `data-menu-id=${cardFields.id}` attribute. The widget binds the menu to the trigger through this attribute. @@ -36,19 +36,19 @@ The following demo applies a custom card template: 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. -Built-in card menu actions ([`cardShape.menu`](api/config/js_kanban_cardshape_config.md)): +### `cardShape.menu` - `"set-edit"` — open the card editor - `"delete-card"` — delete the card -Built-in column menu actions ([`columnShape.menu`](api/config/js_kanban_columnshape_config.md)): +### `columnShape.menu` - `"add-card"` — add a new card to the column - `"set-edit"` — rename the column - `"move-column:left"`, `"move-column:right"` — move the column left or right - `"delete-column"` — delete the column -Built-in row menu actions ([`rowShape.menu`](api/config/js_kanban_rowshape_config.md)): +### `rowShape.menu` - `"set-edit"` — rename the row - `"move-row:up"`, `"move-row:down"` — move the row up or down @@ -56,7 +56,7 @@ Built-in row menu actions ([`rowShape.menu`](api/config/js_kanban_rowshape_confi 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. -The following demo applies a custom context menu to columns and rows: +The following demo applies a custom context menu: From 97e22bd11d44272dc12143c8e4788b31575b4d1e Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Fri, 8 May 2026 14:41:08 +0300 Subject: [PATCH 18/29] Update grammar for Integration guide --- docs/guides/integration.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/guides/integration.md b/docs/guides/integration.md index 2cb4466f..bdbe99f6 100644 --- a/docs/guides/integration.md +++ b/docs/guides/integration.md @@ -12,14 +12,14 @@ You can integrate DHTMLX Kanban with other DHTMLX widgets, including: - [Scheduler](https://docs.dhtmlx.com/scheduler/) - [To Do List](https://docs.dhtmlx.com/todolist/) -## DHTMLX Gantt and Scheduler +## Gantt and Scheduler -The following demo embeds a Kanban board alongside DHTMLX Gantt and Scheduler views, sharing task data across the three widgets: +The following demo embeds a Kanban board alongside Gantt and Scheduler views: -## DHTMLX To Do List +## To Do List -The following demo embeds a Kanban board next to a DHTMLX To Do List, syncing items between the two widgets: +The following demo embeds a Kanban board alongside a To Do List: From 0fefd634df58cae6962f7e40061bd79427814d74 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Fri, 8 May 2026 14:41:31 +0300 Subject: [PATCH 19/29] Update grammar for Initialization guide --- docs/guides/initialization.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/guides/initialization.md b/docs/guides/initialization.md index e26f3858..31481fa3 100644 --- a/docs/guides/initialization.md +++ b/docs/guides/initialization.md @@ -6,15 +6,15 @@ description: You can learn about the initialization in the documentation of the # Initialization -This guide walks through the steps to create a ready-to-use Kanban widget on a page: +Create a Kanban widget on a page in three steps: -1. [Include the Kanban source files on a page](#include-source-files). -2. [Create a container for Kanban](#create-a-container). -3. [Initialize Kanban with a constructor](#initialize-kanban). +1. [Include source files](#include-source-files). +2. [Create a container](#create-a-container). +3. [Initialize Kanban](#initialize-kanban). ## Include source files -[Download the package](https://dhtmlx.com/docs/products/dhtmlxKanban/download.shtml) and unpack it into a folder of your project. +[Download the package](https://dhtmlx.com/docs/products/dhtmlxKanban/download.shtml) and unpack the contents into a folder of your project. Include the following source files on your page: @@ -47,7 +47,7 @@ To create the widget with a Toolbar, add a separate container for the Toolbar: Initialize Kanban with the `kanban.Kanban` constructor. The constructor takes two parameters: -- an HTML container ID +- a CSS selector for the HTML container (or the container element itself) - a configuration object (see the [full list of properties](#configuration-properties)) The following code snippet creates a Kanban instance: @@ -79,7 +79,7 @@ For details on configuring the Toolbar, read the [Configuration](guides/configur ### Configuration properties -For the complete reference of configuration properties, see: +For the full configuration reference: - [Kanban properties overview](api/overview/properties_overview.md) — all Kanban configuration properties - [Toolbar properties overview](api/overview/toolbar_properties_overview.md) — all Toolbar configuration properties From 133ca8e5a7b3ffc1289c4e472b051969ba8915fe Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Fri, 8 May 2026 14:41:56 +0300 Subject: [PATCH 20/29] Update grammar for Localization guide --- docs/guides/localization.md | 25 +++++++++++++++---------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/docs/guides/localization.md b/docs/guides/localization.md index 18603bd3..c78d04b2 100644 --- a/docs/guides/localization.md +++ b/docs/guides/localization.md @@ -6,11 +6,14 @@ description: You can learn about the localization in the documentation of the DH # Localization -You can localize all labels in the Kanban interface. Create a new locale or modify a built-in one, then apply the locale to Kanban and to the Toolbar separately. +You can localize all labels in the Kanban interface. Create a new locale or modify a built-in one, then apply the locale to both Kanban and the Toolbar. ## Default locale -Kanban applies the English locale by default: +Kanban applies the English locale by default. + +
+Full English locale ~~~jsx const en = { @@ -128,13 +131,15 @@ const en = { }; ~~~ +
+ A locale object contains three top-level sections: -- `kanban` — translations for all UI labels (buttons, dialogs, search, sort options, link relations) -- `calendar` — translations and settings for date pickers (month and day names, time format, week start, AM/PM markers) -- `core` — translations for shared dialog buttons (`ok`, `cancel`) +- `kanban` — UI labels (buttons, dialogs, search, sort options, link relations) +- `calendar` — date picker labels and settings (month and day names, time format, week start, AM/PM markers) +- `core` — shared dialog buttons (`ok`, `cancel`) -The locale object must include all labels of Kanban and the Toolbar with the corresponding translations. +A locale object must include translations for every Kanban and Toolbar label. ## Built-in locales @@ -178,10 +183,10 @@ board.setLocale(); To apply a custom locale: - create a custom locale (or modify the default English one) and provide translations for all text labels -- apply the new locale to Kanban through the [`locale`](api/config/js_kanban_locale_config.md) property or the [`setLocale()`](api/methods/js_kanban_setlocale_method.md) method -- apply the new locale to the Toolbar through the [`locale`](api/config/toolbar_locale_config.md) property or the [`setLocale()`](api/methods/toolbar_setlocale_method.md) method +- apply the new locale to **Kanban** through [`locale`](api/config/js_kanban_locale_config.md) / [`setLocale()`](api/methods/js_kanban_setlocale_method.md) +- apply the new locale to the **Toolbar** through [`locale`](api/config/toolbar_locale_config.md) / [`setLocale()`](api/methods/toolbar_setlocale_method.md) -The following code snippet defines a custom locale and applies it to both Kanban and the Toolbar: +The following code snippet defines and applies a custom locale to both Kanban and the Toolbar: ~~~jsx const myLocale = { @@ -206,6 +211,6 @@ new kanban.Toolbar("#toolbar", { api: board.api, locale: myLocale }); ## Example -The following snippet switches between several locales: +The following snippet demonstrates locale switching: From 4145d0214329a083af9b679538133c587aa4a736 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Fri, 8 May 2026 14:42:16 +0300 Subject: [PATCH 21/29] Update grammar for Stylization guide --- docs/guides/stylization.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/guides/stylization.md b/docs/guides/stylization.md index 1fe7b9a7..b2c1197b 100644 --- a/docs/guides/stylization.md +++ b/docs/guides/stylization.md @@ -6,7 +6,7 @@ description: You can learn about the stylization in the documentation of the DHT # Stylization -You can style Kanban appearance through CSS classes and CSS variables. The following properties accept CSS classes for columns, rows, and cards: +You can style the Kanban appearance through CSS classes and CSS variables. The following properties accept CSS classes for columns, rows, and cards: - [`columnShape.css`](api/config/js_kanban_columnshape_config.md), [`rowShape.css`](api/config/js_kanban_rowshape_config.md), [`cardShape.css`](api/config/js_kanban_cardshape_config.md) — functions that return a CSS class conditionally based on item data - [`columns.css`](api/config/js_kanban_columns_config.md), [`rows.css`](api/config/js_kanban_rows_config.md), [`cards.css`](api/config/js_kanban_cards_config.md) — string CSS class assigned to a single item @@ -30,13 +30,13 @@ const cards = [ ]; ~~~ -Beyond per-item CSS, Kanban exposes a wide range of CSS variables for theming. The library uses two groups of variables: +Beyond per-item CSS, Kanban exposes CSS variables for theming. Variables fall into two groups: - Kanban variables — define Kanban-specific styles -- WX library variables — define shared elements like controls and calendars +- WX library variables — style shared UI elements (controls, calendars) :::info -The WX library handles internal Kanban functionality such as controls and calendars. Treat WX variables as part of Kanban styling. +The WX library powers internal Kanban UI components. Treat WX variables as part of Kanban styling. ::: ## Theme variables @@ -118,7 +118,7 @@ Variable names may change in future versions. Check the names after upgrading an ## Scroll style -Apply the `.wx-styled-scroll` CSS class to the Kanban container to enable a custom scroll bar style. Check [browser compatibility](https://caniuse.com/css-scrollbar) before using the class: +Apply the `.wx-styled-scroll` CSS class to the Kanban container to enable a custom scrollbar style. Check [browser compatibility](https://caniuse.com/css-scrollbar) before using the class: ~~~html {4} title="index.html" @@ -133,9 +133,9 @@ The following demo applies a custom style to Kanban: -## Adaptivity +## Responsive layout -The following demo creates an adaptive Kanban layout with custom CSS: +The following demo creates a responsive Kanban layout with custom CSS: From 606f70fbf4e098d30fc6dba3438145f22887cc0c Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Fri, 8 May 2026 14:49:09 +0300 Subject: [PATCH 22/29] Update grammar for Working with Server guide --- docs/guides/working_with_server.md | 41 +++++++++++++++--------------- 1 file changed, 20 insertions(+), 21 deletions(-) diff --git a/docs/guides/working_with_server.md b/docs/guides/working_with_server.md index e239416a..bae84e8a 100644 --- a/docs/guides/working_with_server.md +++ b/docs/guides/working_with_server.md @@ -9,7 +9,7 @@ description: You can explore how to work with Server in the documentation of the JavaScript Kanban supports both client-side and server-side data. The widget has no special backend requirements and connects to any platform that exposes a REST (RESTful) API. :::info -The widget ships with a built-in Go and Node backend. You can also use custom server scripts. +The widget ships with built-in backends in Go and Node. You can also use custom server scripts. ::: ## RestDataProvider @@ -90,7 +90,7 @@ Promise.all([ ~~~ :::info -Add `RestDataProvider` to the Event Bus through the [`api.setNext()`](api/internal/js_kanban_setnext_method.md) method. This step lets data operations (adding, deleting, and similar) trigger the corresponding requests to the server. +Add `RestDataProvider` to the Event Bus through the [`api.setNext()`](api/internal/js_kanban_setnext_method.md) method. This step lets data operations (adding, deleting, and similar) trigger matching requests to the server. ::: ### Example @@ -101,7 +101,7 @@ The following demo connects `RestDataProvider` to a Go backend and loads server ## Multiuser backend -A multiuser backend lets several users edit the same Kanban board in real time without page reloads. The widget connects to the server through a WebSocket, and custom handlers apply incoming changes to the Kanban board. +A multiuser backend lets multiple users edit the same Kanban board in real time without page reloads. The widget connects to the server through a WebSocket, and custom handlers apply incoming changes to the Kanban board. To enable a multiuser backend, authorize the user on the server before initializing Kanban. The following `login(url)` function fetches and caches a session token: @@ -121,7 +121,9 @@ const login = (url) => { }; ~~~ -The function simulates authorization. Every user receives an ID of `1`. After successful authorization, the server returns a token that subsequent requests must include. To attach the token to every request, call `RestDataProvider.setHeaders()`. By default, the server stores the token in the `"Remote-Token": ` header: +The function simulates authorization. Every user receives an ID of `1`. After successful authorization, the server returns a token that subsequent requests must include. + +To attach the token to every request, call `RestDataProvider.setHeaders()`. By default, the server stores the token in the `"Remote-Token": ` header: ~~~js {} login(url).then(token => { @@ -181,11 +183,10 @@ events.on(handlers); The snippet uses the following identifiers: -- `handlers` — client handlers that handle server events -- `events` — object that connects to the server and listens for incoming events -- `RemoteEvents.on(handlers)` — applies client handlers to server events +- `handlers` — client handlers for server events +- `events` — `RemoteEvents` instance that listens for incoming events from the server -With the multiuser backend in place, users collaborate and track each other's changes through the UI in real time. +The `events.on(handlers)` call registers the client handlers for the server-side events. The widget now reflects server-side changes in real time. ### Example @@ -197,16 +198,16 @@ The following demo configures the multiuser backend to track other users' change To define custom logic for server events, pass a `handlers` object to `RemoteEvents.on(handlers)`. The object follows this structure: -~~~js {} +~~~ts {} { - "cards": cardsHandler: function(obj: any), - "columns": columnsHandler: function(obj: any), - "links": linksHandler: function(obj: any), - "rows": rowsHandler: function(obj: any), + cards?: (obj: any) => void; + columns?: (obj: any) => void; + links?: (obj: any) => void; + rows?: (obj: any) => void; } ~~~ -When a change occurs on the server, the server returns the name of the modified element. The names depend on the server logic. +After a change on the server, the response includes the name of the modified element. The names depend on the server logic. The updated client-side data arrives in the `obj` argument of the `function(obj: any)` callback. The `type: string` field specifies the operation. Allowed values: @@ -251,7 +252,7 @@ const remoteEvents = new kanban.RemoteEvents(remoteEventsURL, token); remoteEvents.on(handlers); ~~~ -The `RestDataProvider.getIDResolver()` method returns a function that synchronizes client IDs with server IDs. When the client creates a new object (card, column, row, or link), the object receives a temporary ID together with a server ID stored in the data store. The `idResolver(id: TID, type: number)` function resolves the temporary ID to the corresponding server ID. +The `RestDataProvider.getIDResolver()` method returns a function that synchronizes client IDs with server IDs. When the client creates a new object (card, column, row, or link), the object receives a temporary ID together with a server ID stored in the data store. The `idResolver(id: TID, type: number)` function resolves the temporary ID to the server ID. The `type` argument identifies the model type: @@ -260,17 +261,15 @@ The `type` argument identifies the model type: - `ColumnID` — `3` - `LinkID` — `4` -To prevent the request from going to the server, pass `skipProvider: true` when you call `board.api.exec()`. - -The final step applies the custom handlers to the server events. +To prevent the request from going to the server, pass `skipProvider: true` when you call `board.api.exec()`. The `remoteEvents.on(handlers)` call registers the custom handlers. ## Group statuses into a single column -This section shows how to display cards from different columns in one column. For example, you can use a single column for cards with `todo` and `unassigned` statuses. +Display cards from different columns in one column. For example, you can use a single column for cards with `todo` and `unassigned` statuses. To implement grouping, add a custom field (for example, `status`) that stores the current card status. The `column` field then stores a common status. -Define grouping rules. In the example below, cards group by these statuses: +Define grouping rules. In the example below, the grouping uses these statuses: - `todo`, `unassigned` — for the **Open** column - `dev`, `testing` — for the **Inprogress** column @@ -318,7 +317,7 @@ func Update(id int, c Card) error { } ~~~ -When the user changes the status field, the server checks the value and puts the card in the corresponding column. The server then uses the WebSocket to notify the client to move the card. +When the user changes the status field, the server checks the value and puts the card in the target column. The server then uses the WebSocket to notify the client to move the card. ### Mix server and client grouping {#server-side-client-side-grouping} From 840a1856d3ea1953423b964308dedab4417018cb Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Fri, 8 May 2026 14:49:37 +0300 Subject: [PATCH 23/29] Update grammar for Working with Data guide --- docs/guides/working_with_data.md | 44 ++++++++------------------------ 1 file changed, 11 insertions(+), 33 deletions(-) diff --git a/docs/guides/working_with_data.md b/docs/guides/working_with_data.md index aeeff448..c50a53f2 100644 --- a/docs/guides/working_with_data.md +++ b/docs/guides/working_with_data.md @@ -6,6 +6,8 @@ description: You can explore how to work with Data in the documentation of the D # Working with data +This guide covers data operations in Kanban: loading initial data, reading and exporting data, mutating cards, columns, rows, and links, and managing comments and selection. + ## Load initial data When you initialize Kanban, pass initial data through the [`columns`](api/config/js_kanban_columns_config.md), [`cards`](api/config/js_kanban_cards_config.md), [`rows`](api/config/js_kanban_rows_config.md), and [`links`](api/config/js_kanban_links_config.md) properties. @@ -127,9 +129,7 @@ new kanban.Kanban("#root", { ## Load data from a local source -Use the [`setConfig()`](api/methods/js_kanban_setconfig_method.md) or [`parse()`](api/methods/js_kanban_parse_method.md) method to load data for columns, rows, cards, and links from a local source. - -The following code snippet replaces the current data with a new dataset after initialization: +Use [`setConfig()`](api/methods/js_kanban_setconfig_method.md) or [`parse()`](api/methods/js_kanban_parse_method.md) to load columns, rows, cards, and links data after initialization: ~~~js {4} const board = new kanban.Kanban("#root", {}); @@ -140,39 +140,29 @@ board.setConfig({ columns, cards, rows }); // or board.parse({ columns, cards, rows }); ~~~ -## Sync Kanban data with Gantt and Scheduler - -The following demo synchronizes Kanban data with [Gantt](https://dhtmlx.com/docs/products/dhtmlxGantt/) and [Scheduler](https://dhtmlx.com/docs/products/dhtmlxScheduler/): - - +## Sync data with Gantt and Scheduler -## Get Kanban data +For multi-widget integration, see [Integration with DHTMLX widgets](guides/integration.md#gantt-and-scheduler). -The following methods read card data from Kanban: +## Get data - [`getAreaCards()`](api/methods/js_kanban_getareacards_method.md) — gets data objects of all cards in the specified column and row -- [`getColumnCards()`](api/methods/js_kanban_getcolumncards_method.md) — gets data objects of all cards in a specific column +- [`getColumnCards()`](api/methods/js_kanban_getcolumncards_method.md) — gets data objects of all cards in the specified column - [`getCard()`](api/methods/js_kanban_getcard_method.md) — gets a card data object by ID -- [`serialize()`](api/methods/js_kanban_serialize_method.md) — serializes Kanban data to JSON +- [`serialize()`](api/methods/js_kanban_serialize_method.md) — returns Kanban data as a JSON object -## Get Kanban state - -The following methods read Kanban state: +## Get state - [`api.getReactiveState()`](api/internal/js_kanban_getreactivestate_method.md) — gets reactive properties of the *StateStore* - [`api.getState()`](api/internal/js_kanban_getstate_method.md) — gets current properties of the *StateStore* - [`api.getStores()`](api/internal/js_kanban_getstores_method.md) — gets the *StateStore* and *DataStore* objects -## Export Kanban data - -Use the following method to export Kanban data: +## Export data -- [`export.json()`](api/internal/js_kanban_json_method.md) — exports Kanban data to a JSON file +- [`export.json()`](api/internal/js_kanban_json_method.md) — downloads Kanban data as a JSON file ## Add new items -The following methods add new items to Kanban: - - [`addCard()`](api/methods/js_kanban_addcard_method.md) — adds a new card - [`addColumn()`](api/methods/js_kanban_addcolumn_method.md) — adds a new column - [`addRow()`](api/methods/js_kanban_addrow_method.md) — adds a new row @@ -180,47 +170,35 @@ The following methods add new items to Kanban: ## Update items -The following methods update existing items: - - [`updateCard()`](api/methods/js_kanban_updatecard_method.md) — updates a card by ID - [`updateColumn()`](api/methods/js_kanban_updatecolumn_method.md) — updates a column by ID - [`updateRow()`](api/methods/js_kanban_updaterow_method.md) — updates a row by ID ## Delete items -The following methods remove items from Kanban: - - [`deleteCard()`](api/methods/js_kanban_deletecard_method.md) — removes a card by ID - [`deleteColumn()`](api/methods/js_kanban_deletecolumn_method.md) — removes a column by ID - [`deleteRow()`](api/methods/js_kanban_deleterow_method.md) — removes a row by ID ## Move items -The following methods move items to a new position: - - [`moveCard()`](api/methods/js_kanban_movecard_method.md) — moves a card to the target column and row - [`moveColumn()`](api/methods/js_kanban_movecolumn_method.md) — moves a column to a new position - [`moveRow()`](api/methods/js_kanban_moverow_method.md) — moves a row to a new position ## Manage comments -The following methods work with comments on a card: - - [`addComment()`](api/methods/js_kanban_addcomment_method.md) — adds a comment to a card by ID - [`updateComment()`](api/methods/js_kanban_updatecomment_method.md) — updates a comment by ID - [`deleteComment()`](api/methods/js_kanban_deletecomment_method.md) — deletes a comment by ID ## Manage links -The following methods work with links between cards at runtime: - - [`addLink()`](api/methods/js_kanban_addlink_method.md) — adds a new link between cards - [`deleteLink()`](api/methods/js_kanban_deletelink_method.md) — deletes a link by ID ## Manage card selection -The following methods read or change the selected cards: - - [`getSelection()`](api/methods/js_kanban_getselection_method.md) — gets IDs of the currently selected cards - [`selectCard()`](api/methods/js_kanban_selectcard_method.md) — selects a card by ID - [`unselectCard()`](api/methods/js_kanban_unselectcard_method.md) — unselects a card by ID From 7414a86cf9c86e2f98e4f9182294179267eb6572 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Fri, 8 May 2026 14:50:11 +0300 Subject: [PATCH 24/29] Update grammar for TypeScript Support guide --- docs/guides/typescript_support.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/guides/typescript_support.md b/docs/guides/typescript_support.md index c152300c..ea21c7c7 100644 --- a/docs/guides/typescript_support.md +++ b/docs/guides/typescript_support.md @@ -6,12 +6,12 @@ description: You can learn about using typescript with the DHTMLX JavaScript Kan # TypeScript support -Since v1.1, DHTMLX Kanban ships with built-in TypeScript definitions that work out of the box. +Since v1.1, DHTMLX Kanban ships with built-in TypeScript definitions. :::note Try the [Snippet Tool](https://snippet.dhtmlx.com/2blo6hx8?tag=kanban) for a working TypeScript example. ::: -## Why use TypeScript with Kanban +## Benefits of TypeScript -TypeScript makes Kanban development more efficient through static type checking. Type checking and autocompletion catch mistakes early, and the bundled definitions surface the expected data shapes when you call the Kanban API. +TypeScript catches mistakes early through static type checking and autocompletion. The bundled definitions also show the expected data shapes when you call the Kanban API. From 1d1b0033a04b25d7344c1c473102c98277c27b6d Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Fri, 8 May 2026 22:58:55 +0300 Subject: [PATCH 25/29] Update grammar for Angular integration guide --- docs/guides/integration_with_angular.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/guides/integration_with_angular.md b/docs/guides/integration_with_angular.md index 62bac477..4fbff7cf 100644 --- a/docs/guides/integration_with_angular.md +++ b/docs/guides/integration_with_angular.md @@ -57,7 +57,7 @@ Download the [trial Kanban package](/how_to_start/#installing-kanban-via-npm-or- ### Step 2. Create the component -Create an Angular component that adds Kanban with the Toolbar to the application. Add the *kanban* folder to the *src/app/* directory and create the *kanban.component.ts* file inside it. +Create an Angular component that mounts Kanban and the Toolbar. Create the *src/app/kanban/* folder and add a *kanban.component.ts* file inside. #### Import source files @@ -79,7 +79,7 @@ This tutorial uses the trial version of Kanban. #### Set up containers and initialize Kanban -To display Kanban with the Toolbar, set containers for both components and call the corresponding constructors. The following code snippet defines the component template, references the containers, and creates the instances: +To display Kanban with the Toolbar, set up two containers and call the constructors. The following code snippet defines the component template, references the containers, and creates the instances: ~~~jsx {1,8-11,15-18,24-31} title="kanban.component.ts" import { Kanban, Toolbar } from '@dhx/trial-kanban'; @@ -116,15 +116,15 @@ export class KanbanComponent implements OnInit, OnDestroy { } ngOnDestroy(): void { - this._kanban.destructor(); // destruct Kanban - this._toolbar.destructor(); // destruct Toolbar + this._kanban.destructor(); // destroy Kanban + this._toolbar.destructor(); // destroy Toolbar } } ~~~ #### Add styles -Add styles for Kanban and its container. Create the *kanban.component.css* file in the *src/app/kanban/* directory: +Add styles for Kanban and the container. Create the *kanban.component.css* file in the *src/app/kanban/* directory: ~~~css title="kanban.component.css" /* import Kanban styles */ @@ -206,7 +206,7 @@ export function getData() { } ~~~ -Open *kanban.component.ts*, import the data, and pass the data properties to the Kanban configuration object inside the `ngOnInit()` method: +Open *kanban.component.ts*, import the dataset, and pass the data properties to the Kanban configuration object inside `ngOnInit()`: ~~~jsx {2,23,25-27} title="kanban.component.ts" import { Kanban, Toolbar } from '@dhx/trial-kanban'; @@ -253,7 +253,7 @@ export class KanbanComponent implements OnInit, OnDestroy { } ~~~ -To reload data after each change, call [`setConfig()`](/api/methods/js_kanban_setconfig_method/) or [`parse()`](/api/methods/js_kanban_parse_method/) inside `ngOnInit()`: +As an alternative, load data after creating the instance with [`setConfig()`](/api/methods/js_kanban_setconfig_method/) or [`parse()`](/api/methods/js_kanban_parse_method/) inside `ngOnInit()`: ~~~jsx {2,23,37-42} title="kanban.component.ts" import { Kanban, Toolbar } from '@dhx/trial-kanban'; @@ -311,7 +311,7 @@ The Kanban component is now ready. When the element renders, Kanban initializes #### Handle events -User actions on the Kanban trigger events. Listen to events to react to specific actions. For the complete list, see the [Kanban events reference](/api/overview/events_overview/). +User actions in Kanban trigger events. Listen to events to react to specific actions. For the complete list, see the [Kanban events reference](/api/overview/events_overview/). Open *kanban.component.ts* and extend the `ngOnInit()` method: @@ -373,7 +373,7 @@ platformBrowserDynamic() .catch((err) => console.error(err)); ~~~ -Start the app to see Kanban loaded with data on the page. +Run the app to view the populated Kanban board on the page. import trial from '@site/static/img/trial_kanban.png'; @@ -383,4 +383,4 @@ import trial from '@site/static/img/trial_kanban.png'; className="img_border" /> -The full advanced example is available on [GitHub](https://github.com/DHTMLX/angular-kanban-demo). +See the complete project on [GitHub](https://github.com/DHTMLX/angular-kanban-demo). From c9769f471d0c62300f71af0205326d31bebd1b9e Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Fri, 8 May 2026 22:59:30 +0300 Subject: [PATCH 26/29] Update grammar for React integration guide --- docs/guides/integration_with_react.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/docs/guides/integration_with_react.md b/docs/guides/integration_with_react.md index e0e39459..4f737a26 100644 --- a/docs/guides/integration_with_react.md +++ b/docs/guides/integration_with_react.md @@ -18,7 +18,7 @@ DHTMLX Kanban is compatible with React. The full code example is available on [G Install [Vite](https://vite.dev/) (optional) and [Node.js](https://nodejs.org/en/) before creating the project. ::: -Create a basic React project (or React with Vite). Let's name the project *my-react-kanban-app*: +Create a basic React project (or React with Vite). Name the project *my-react-kanban-app*: ~~~json npx create-react-app my-react-kanban-app @@ -86,7 +86,7 @@ This tutorial uses the trial version of Kanban. #### Set up containers and initialize Kanban -To display Kanban with the Toolbar, create containers for both components and call the corresponding constructors. The following code snippet wires up refs and instantiates the components inside `useEffect()`: +To display Kanban with the Toolbar, create two containers and call the constructors. The following code snippet wires up refs and instantiates the components inside `useEffect()`: ~~~jsx {2,6-7,10-11,13-17} title="Kanban.jsx" import { useEffect, useRef } from "react"; @@ -108,8 +108,8 @@ export default function KanbanComponent(props) { }); return () => { - kanban.destructor(); // destruct Kanban - toolbar.destructor(); // destruct Toolbar + kanban.destructor(); // destroy Kanban + toolbar.destructor(); // destroy Toolbar }; }, []); @@ -122,7 +122,7 @@ export default function KanbanComponent(props) { #### Add styles -Add styles for Kanban and its container in the main CSS file of the project: +Add styles for Kanban and the container in the main CSS file: ~~~css title="index.css" /* specify styles for initial page */ @@ -202,7 +202,7 @@ export function getData() { } ~~~ -Open *App.js*, import the data, and pass it to the new `` component as props: +Open *App.js*, import the dataset, and pass the values to the new `` component as props: ~~~jsx {2,5-6} title="App.js" import Kanban from "./Kanban"; @@ -254,7 +254,7 @@ export default function KanbanComponent(props) { } ~~~ -To reload data after each change, call [`setConfig()`](/api/methods/js_kanban_setconfig_method/) or [`parse()`](/api/methods/js_kanban_parse_method/) inside `useEffect()`: +As an alternative, load data after creating the instance with [`setConfig()`](/api/methods/js_kanban_setconfig_method/) or [`parse()`](/api/methods/js_kanban_parse_method/) inside `useEffect()`: ~~~jsx {9-11,27} title="Kanban.jsx" import { useEffect, useRef } from "react"; @@ -265,9 +265,9 @@ export default function KanbanComponent(props) { let kanban_container = useRef(); let toolbar_container = useRef(); - let columns = props.columns; // data for columns - let cards = props.cards; // data for cards - let rows = props.rows; // data for rows + let columns = props.columns; + let cards = props.cards; + let rows = props.rows; useEffect(() => { const kanban = new Kanban(kanban_container.current, { @@ -303,7 +303,7 @@ The Kanban component is now ready. When the element renders, Kanban initializes #### Handle events -User actions on the Kanban trigger events. Listen to events to react to specific actions. For the complete list, see the [Kanban events reference](/api/overview/events_overview/). +User actions in Kanban trigger events. Listen to events to react to specific actions. For the complete list, see the [Kanban events reference](/api/overview/events_overview/). Open *Kanban.jsx* and extend the `useEffect()` call: @@ -323,7 +323,7 @@ useEffect(() => { // ... ~~~ -Start the app to see Kanban loaded with data on the page. +Run the app to view the populated Kanban board on the page. import trial from '@site/static/img/trial_kanban.png'; @@ -333,4 +333,4 @@ import trial from '@site/static/img/trial_kanban.png'; className="img_border" /> -The full advanced example is available on [GitHub](https://github.com/DHTMLX/react-kanban-demo). +See the complete project on [GitHub](https://github.com/DHTMLX/react-kanban-demo). From 211401882e5f7d76a260f9dd26ea9f91e5124af5 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Fri, 8 May 2026 23:01:07 +0300 Subject: [PATCH 27/29] Update grammar for Svelte integration guide --- docs/guides/integration_with_svelte.md | 28 +++++++++++++------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/docs/guides/integration_with_svelte.md b/docs/guides/integration_with_svelte.md index 11d1e7b7..80630d07 100644 --- a/docs/guides/integration_with_svelte.md +++ b/docs/guides/integration_with_svelte.md @@ -18,10 +18,10 @@ DHTMLX Kanban is compatible with Svelte. The full code example is available on [ Install [Vite](https://vite.dev/) (optional) and [Node.js](https://nodejs.org/en/) before creating the project. ::: -A Svelte project can be set up in two ways: +Set up a Svelte project in one of two ways: -- with [SvelteKit](https://kit.svelte.dev/) -- with Svelte and Vite (without SvelteKit): +- with [SvelteKit](https://kit.svelte.dev/) — recommended +- with Svelte and Vite (without SvelteKit) — run: ~~~json npm create vite@latest @@ -31,7 +31,7 @@ For details, see the [Svelte documentation](https://svelte.dev/docs/svelte/overv ### Install dependencies -Let's name the project *my-svelte-kanban-app*. Move into the app directory: +Name the project *my-svelte-kanban-app*. Move into the app directory: ~~~json cd my-svelte-kanban-app @@ -65,7 +65,7 @@ Download the [trial Kanban package](/how_to_start/#installing-kanban-via-npm-or- ### Step 2. Create the component -Create a Svelte component that adds Kanban with the Toolbar to the application. Add a new file to the *src/* directory and name it *Kanban.svelte*. +Create a Svelte component that mounts Kanban and the Toolbar. Add a new *Kanban.svelte* file to the *src/* directory. #### Import source files @@ -95,7 +95,7 @@ This tutorial uses the trial version of Kanban. #### Set up containers and initialize Kanban -To display Kanban with the Toolbar, create containers for both components and call the corresponding constructors. The following code snippet binds the containers and instantiates the components inside `onMount()`: +To display Kanban with the Toolbar, create two containers and call the constructors. The following code snippet binds the containers and instantiates the components inside `onMount()`: ~~~html {3,6,10-11,13-17,27-28} title="Kanban.svelte" @@ -159,7 +159,7 @@ export function getData() { type: "feature", }, { - label: "Archive the cards/kanbans ", + label: "Archive the cards/boards", priority: 3, color: "#58C3FE", users: [4], @@ -185,7 +185,7 @@ export function getData() { } ~~~ -Open *App.svelte*, import the data, and pass the data to the new `` component as props: +Open *App.svelte*, import the dataset, and pass the values to the new `` component as props: ~~~html {3,5,8} title="App.svelte" @@ -130,7 +130,7 @@ export default { #### Add styles -Add styles for Kanban and its container in the main CSS file of the project: +Add styles for Kanban and the container in the main CSS file: ~~~css title="main.css" /* specify styles for initial page */ @@ -184,7 +184,7 @@ export function getData() { type: "feature", }, { - label: "Archive the cards/kanbans ", + label: "Archive the cards/boards", priority: 3, color: "#58C3FE", users: [4], @@ -210,7 +210,7 @@ export function getData() { } ~~~ -Open *App.vue*, import the data, initialize it through the inner `data()` method, and pass the data to the new `` component as props: +Open *App.vue* and import the dataset. Initialize the values through the inner `data()` method, then pass the values to the new `` component as props: ~~~html {3,8,10-12,19} title="App.vue"