From ca1b662b5b2156b9dae454f03adc8e004c3f2175 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 2 Apr 2026 22:45:50 +0400 Subject: [PATCH 1/2] [update] Edit the guide manually --- docs/guides/configuration.md | 165 +++++++++++++++++++---------------- 1 file changed, 89 insertions(+), 76 deletions(-) diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md index 14ccffe2..9a221f4d 100644 --- a/docs/guides/configuration.md +++ b/docs/guides/configuration.md @@ -6,74 +6,81 @@ 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 +You can configure the *Kanban* appearance and functionality via the following properties: + +- [`cardShape`](api/config/js_kanban_cardshape_config.md) — configure the cards appearance +- [`editorShape`](api/config/js_kanban_editorshape_config.md) — configure the editor fields +- [`editor`](api/config/js_kanban_editor_config.md) — configure the editor appearance and behaviour +- [`renderType`](api/config/js_kanban_rendertype_config.md), [`scrollType`](api/config/js_kanban_scrolltype_config.md) — configure rendering and scrolling +- [`history`](api/config/js_kanban_history_config.md) — configure the Kanban history +- [`cardTemplate`](api/config/js_kanban_cardtemplate_config.md) — customize the card appearance - *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 +- [`locale`](api/config/js_kanban_locale_config.md) — apply the desired locale - *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 +- [`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 - *Refer to the [**Working with data**](guides/working_with_data.md) section for details!* ## 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 displays cards distributed into columns and rows. Use the [`cardShape`](api/config/js_kanban_cardshape_config.md) property to control which fields appear on each card: -- a card label via the `label: boolean` config -- a card description via the `description: boolean` config +- `label: boolean` — card label :::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. + Activate the `label` parameter to show the corresponding input in the editor. Configure the editor field with the [`text` or `textarea`](#text-and-textarea-types) type. ::: -- a card progress via the `progress: boolean` config +- `description: boolean` — card description :::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. + Activate the `description` parameter to show the corresponding input in the editor. Configure the editor field with the [`text` or `textarea`](#text-and-textarea-types) type. ::: -- a start date via the `start_date: boolean` config -- an end date via the `end_date: boolean` config +- `progress: boolean` — card progress :::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. + Activate the `progress` parameter to show the corresponding control in the editor. Configure the editor control with the [`progress`](#progress-type) type. ::: -- a card context menu via the `menu: boolean` config -- a card attachment via the `attached: boolean` config +- `start_date: boolean` — start date +- `end_date: boolean` — end date :::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. + Activate `start_date` and `end_date` parameters to show the corresponding controls in the editor. Configure these editor controls with the [`date`](#date-and-daterange-types) type. ::: -- a card color via the `color: boolean` config +- `menu: boolean` — card context menu +- `attached: boolean` — card attachment :::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. + Activate the `attached` parameter to show the file attachment field in the editor. Configure the editor control with the [`files`](#files-type) type. ::: -- 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 +- `color: boolean` — card color (top color line) :::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. + Activate the `color` parameter to show the corresponding colorpicker in the editor. Configure the editor with the [`color`](#color-type) type. ::: -- a card priority via the `priority: boolean | { show: boolean, values: object }` config +- `cover: boolean` — card cover (*preview image*) +- `comments: boolean` — card comments +- `confirmDeletion: boolean` — confirmation dialog for card deletion +- `votes: boolean | { show: boolean, clicable: true }` — card votes +- `users: boolean | { show: boolean, values: object, maxCount: number | false }` — card assignment (users) :::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. + Activate the `users` parameter to show the assignment control in the editor. To assign a single user, configure the editor with the [`combo` or `select`](#combo-select-and-multiselect-types) type. For multiple users, use [`multiselect`](#combo-select-and-multiselect-types). ::: -- *a custom field* via the `headerFields: [ { key: string, label: string, css: string } ]` config +- `priority: boolean | { show: boolean, values: object }` — card priority + + :::tip + Activate the `priority` parameter to show the corresponding control in the editor. Configure the editor with the [`combo` or `select`](#combo-select-and-multiselect-types) type only. + ::: + +- `headerFields: [ { key: string, label: string, css: string } ]` — *custom fields* + +The code snippet below configures the `cardShape` object with users, priority, and custom header fields: ~~~jsx {12-35,42} const users = [ // users data @@ -122,29 +129,29 @@ 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 via 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! +You can display the editor as the *sidebar* or *modal window* through the [`editor.placement`](api/config/js_kanban_editor_config.md) property. ::: -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: +The Kanban editor allows users to change card data. Use the [`editorShape`](api/config/js_kanban_editorshape_config.md) property to configure the editor fields (controls). You can use the following types of editor fields: -- [**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) +- [`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) ### Combo, Select and Multiselect types -The editor fields of **combo**, **select**, and **multiselect** types can be set in the following way: +The following code snippet uses the `combo` type to configure the editor field for selecting a value from a predefined list: ~~~jsx {3-12} new kanban.Kanban("#root", { @@ -159,13 +166,13 @@ 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` types you can specify a path to the preview image via the `avatar` property: ~~~jsx {3,9,13} editorShape: [ @@ -184,7 +191,7 @@ editorShape: [ } ] }, - // settings of other fields + // settings for other fields ] ~~~ @@ -193,7 +200,7 @@ editorShape: [ ### Color type -The editor field of **color** type can be set in the following way: +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", { @@ -208,14 +215,14 @@ new kanban.Kanban("#root", { placeholder: "Select color" } }, - // settings of other fields + // settings for other fields ] }); ~~~ ### Text and Textarea types -The editor fields of **text** and **textarea** types can be set in the following way: +The following code snippet uses the `text` type to configure the editor field for entering a single-line or multi-line text value: ~~~jsx {3-14} new kanban.Kanban("#root", { @@ -232,14 +239,14 @@ 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 following code snippet uses the `progress` type to configure the editor field for tracking card completion: ~~~jsx {3-12} new kanban.Kanban("#root", { @@ -254,16 +261,16 @@ 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 following code snippet uses the `files` type to configure the editor field for attaching files to a card: -#### Configuring Upload Url as String +#### Configure the Upload Url as String ~~~jsx {4-15} const url = "https://docs.dhtmlx.com/kanban-backend"; @@ -281,13 +288,15 @@ new kanban.Kanban("#root", { folder: false } }, - // settings of other fields + // settings for other fields ] }); ~~~ #### Configuring Upload Url as Function +The following code snippet uses a function as the `uploadURL` value to handle file uploads with custom headers: + ~~~jsx {9-31} const url = "https://docs.dhtmlx.com/kanban-backend"; new kanban.Kanban("#root", { @@ -326,7 +335,7 @@ new kanban.Kanban("#root", { ### Date and DateRange types -The editor field of **date** type can be set in the following way: +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 +346,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 following code snippet uses the `dateRange` type to configure the editor field for setting start and end dates: ~~~jsx {3-11} new kanban.Kanban("#root", { @@ -356,14 +365,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 following code snippet uses the `comments` type to configure the editor field for adding and editing card comments: ~~~jsx {3-13} new kanban.Kanban("#root", { @@ -379,14 +388,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 following code snippet uses the `links` type to configure the editor field for managing links between cards: ~~~jsx {3-10} new kanban.Kanban("#root", { @@ -399,15 +408,17 @@ 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. +To link the editor field to the corresponding card field, provide special `key` in the [`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 initial data of any field via this key as well. + +The following code snippet binds editor fields to both built-in and custom card fields: ~~~jsx {5,13,22,25,33-34,38-39,45-47} // editor settings @@ -464,15 +475,17 @@ new kanban.Kanban("#root", { ::: :::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 via the [`editorShape`](api/config/js_kanban_editorshape_config.md) property, the widget applies the [`defaultEditorShape`](api/config/js_kanban_editorshape_config.md#default-config) set of parameters. In this case, the editor displays default controls and inputs only after you activate the corresponding card fields via the [`cardShape`](api/config/js_kanban_cardshape_config.md) property. ::: -### Configuring the editor +### Configure the editor + +Use the [`editor`](api/config/js_kanban_editor_config.md) property to configure the editor appearance and behavior: -Using the [`editor`](api/config/js_kanban_editor_config.md) property, you can configure the editor in the following way: +- 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) -- 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 debounce delay: ~~~jsx {6-9} // create Kanban @@ -490,7 +503,7 @@ new kanban.Kanban("#root", { ## 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. +**Toolbar** of Kanban includes the searchbar for *searching cards* and controls for *sorting cards* and *adding new columns and rows*. Initialize Toolbar in a separate container using the `kanban.Toolbar()` constructor: ~~~jsx {13} // create Kanban @@ -508,7 +521,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: +You can manage (*hide/show/customize*) the Toolbar controls through the `items` property: ~~~jsx {6-51} // create Kanban @@ -566,11 +579,11 @@ new kanban.Toolbar("#toolbar", { ~~~ :::tip -To hide some of the Toolbar controls, remove the corresponding string(s) from the **items** array. +To hide some of the Toolbar controls, remove the corresponding string(s) from the `items` array. ::: ## Example -In this snippet you can see how to configure the **Cards**, **Editor** and **Toolbar** of Kanban: +In this snippet you can see how to configure the *Cards*, *Editor* and *Toolbar* of Kanban: From a136a55f6cdc8ca34150d6a7c15ec7819cd514ee Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Mon, 6 Apr 2026 17:32:20 +0400 Subject: [PATCH 2/2] Add changes after review --- docs/guides/configuration.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md index 9a221f4d..7ae325d8 100644 --- a/docs/guides/configuration.md +++ b/docs/guides/configuration.md @@ -18,7 +18,7 @@ You can configure the *Kanban* appearance and functionality via the following pr - [`locale`](api/config/js_kanban_locale_config.md) — apply the desired locale - *Refer to the [**Localization**](guides/localization.md) section for details!* - [`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 - - *Refer to the [**Working with data**](guides/working_with_data.md) section for details!* + - *Refer to the [**Working with data**](guides/working_with_data.md) section for details.* ## Cards @@ -158,7 +158,7 @@ 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" }, @@ -178,7 +178,7 @@ For `multiselect` and `combo` types you can specify a path to the preview image editorShape: [ { type: "multiselect", // or "combo" - key: "users", // the "users" key is used when configuring the "cardShape" property + key: "users", // specify the "users" key in the "cardShape" property label: "Users", values: [ { @@ -207,7 +207,7 @@ 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: { @@ -253,7 +253,7 @@ 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, @@ -278,7 +278,7 @@ 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 config: { @@ -293,7 +293,7 @@ new kanban.Kanban("#root", { }); ~~~ -#### Configuring Upload Url as Function +#### Configure Upload Url as Function The following code snippet uses a function as the `uploadURL` value to handle file uploads with custom headers: @@ -436,7 +436,7 @@ const editorShape = [ key: "note", label: "Note", config: { - placeholder: "Enter usefull note here" + placeholder: "Enter useful note here" } } ]; @@ -482,7 +482,7 @@ If you do not specify editor settings via the [`editorShape`](api/config/js_kanb Use the [`editor`](api/config/js_kanban_editor_config.md) property to configure the editor appearance and behavior: -- enables/disables an autosave mode of the editor via the `editor.autoSave` property +- enable/disable 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 debounce delay: @@ -503,7 +503,7 @@ new kanban.Kanban("#root", { ## Toolbar -**Toolbar** of Kanban includes the searchbar for *searching cards* and controls for *sorting cards* and *adding new columns and rows*. Initialize Toolbar in a separate container using the `kanban.Toolbar()` constructor: +Toolbar of Kanban includes the searchbar for *searching cards* and controls for *sorting cards* and *adding new columns and rows*. Initialize Toolbar in a separate container using the `kanban.Toolbar()` constructor: ~~~jsx {13} // create Kanban @@ -521,7 +521,7 @@ const board = new kanban.Kanban("#root", { new kanban.Toolbar("#toolbar", { api: board.api }); ~~~ -You can manage (*hide/show/customize*) the Toolbar controls through the `items` property: +Use the [`items`](api/config/toolbar_items_config.md) property to hide, show, or customize Toolbar controls: ~~~jsx {6-51} // create Kanban