Skip to content
Open

Next #57

Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
12 changes: 6 additions & 6 deletions docs/api/common/js_kanban_meta_parameter.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@ description: You can learn about the $meta parameter in the documentation of the

### Description

@short: An object of extra settings for configuring methods and events of Kanban
@short: An object with extra settings to customize Kanban methods and events

:::important
The `$meta` object includes an extra set of parameters used for configuring methods based on the events of Kanban!
The `$meta` object provides additional parameters that help configure methods linked to Kanban events!
:::

### Usage
Expand All @@ -24,9 +24,9 @@ $meta?: {

### Parameters

The `$meta` object includs the following parameter:
The `$meta` object contains the following parameter:

- `skipHistory` - (optional) enables/disables skipping the operations in a history of Kanban
- `skipHistory` - (optional) controls whether an operation should be excluded from Kanban's history tracking

### Example

Expand All @@ -47,6 +47,6 @@ board.addCard({
});
~~~

**Change log:** The `$meta` parameter was added in v1.3
**Change log:** The `$meta` parameter was introduced in v1.3

**Related article:** [`history`](api/config/js_kanban_history_config.md)
**Related article:** [`history`](/api/config/js_kanban_history_config)
8 changes: 4 additions & 4 deletions docs/api/config/js_kanban_cardheight_config.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ description: You can learn about the cardHeight config in the documentation of t

### Description

@short: Optional. A height of cards
@short: Optional. Defines the height of the cards.

### Usage

Expand All @@ -17,7 +17,7 @@ cardHeight?: number; // px
~~~

:::important
If you combine the [`renderType: "lazy"`](api/config/js_kanban_rendertype_config.md) and [`scrollType: "default"`](api/config/js_kanban_scrolltype_config.md) settings, don't forget to specify a static height for cards via the `cardHeight` property. Unless you specify it, the cards will not be displayed.
When using [`renderType: "lazy"`](/api/config/js_kanban_rendertype_config) together with [`scrollType: "default"`](/api/config/js_kanban_scrolltype_config), it's important to set a fixed height for cards using the `cardHeight` property. Without this, the cards won't be visible.
:::

### Example
Expand All @@ -31,8 +31,8 @@ new kanban.Kanban("#root", {
});
~~~

**Change log:** The property was added in v1.2
**Change log:** This property was introduced in version 1.2

**Related articles:** [Configuration](../../../guides/configuration#cards)
**Related articles:** [Configuration](/guides/configuration/#cards)

**Related sample:** [Kanban. Lazy rendering and column scroll](https://snippet.dhtmlx.com/xez9ghqq?tag=kanban)
72 changes: 36 additions & 36 deletions docs/api/config/js_kanban_cards_config.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,51 +46,51 @@ cards?: [
text?: string,
date?: Date,
}, {...}
],
],
[custom_key: string]?: any
}, {...} // other cards data
];
~~~

### Parameters

For each card you can specify the following parameters (data):

- `id` - (optional) a card **ID**. It is used for managing the card via the corresponding methods
- `label` - (optional) a card label. It is displayed in the **Label** field
- `description` - (optional)a card description. It is displayed in the **Description** field
- `progress` - (optional) a progress bar value. You can specify the value in the range from 0 to 100 points. It is displayed in the **Progress bar** field
- `start_date` - (optional) a start Date object (do not specify a string date). It is displayed in the **Start date** field
- `end_date` - (optional) an end Date object (do not specify a string date). It is displayed in the **End date** field
- `attached` - (optional) an array of objects with data of the attached file(s). It is displayed in the **Attachment** field. For each object you can specify the following parameters:
- `id` - (required) an **ID** of the attached file
- `url` - (optional) a path to the file to be attached
- `previewURL` - (optional) a path to the preview image
- `coverURL` - (optional) a path to the image to be set as a cover
- `name` - (optional) a file name
- `isCover` - (optional) enables a cover image. If **true**, the cover image will be downloaded via the "coverURL" url
- `color` - (optional) a valid HEX color code. It is the color of the card top line
- `users` - (optional) an **array** with **ID**s for multiple assigned users or **string | number** for a single assigned user. To specify the assigned users, you need to define an array with users data in the [cardShape.users](../js_kanban_cardshape_config) property. The users are displayed in the **Users** field
Each card can include the following parameters:

- `id` - (optional) card **ID** used to manage the card through related methods
- `label` - (optional) text label shown in the **Label** field
- `description` - (optional) description text shown in the **Description** field
- `progress` - (optional) progress bar value, ranging from 0 to 100, displayed in the **Progress bar** field
- `start_date` - (optional) start date as a Date object (avoid string dates), shown in the **Start date** field
- `end_date` - (optional) end date as a Date object (avoid string dates), shown in the **End date** field
- `attached` - (optional) array with details of attached files, shown in the **Attachment** field. Each object may include:
- `id` - (required) attached file **ID**
- `url` - (optional) file path
- `previewURL` - (optional) preview image path
- `coverURL` - (optional) image path set as cover
- `name` - (optional) file name
- `isCover` - (optional) when **true**, the cover image is loaded from the "coverURL"
- `color` - (optional) HEX color code representing the card's top line color
- `users` - (optional) either an **array** of user IDs for multiple users or a **string | number** for a single user. To assign users, define an array with user data in the [`cardShape.users`](/api/config/js_kanban_cardshape_config) property. Users appear in the **Users** field

:::info
`users?: array` - specify **array** with users **ID**s, if you use the [**multiselect**](../js_kanban_editorshape_config/#--parameters-for-combo-select-and-multiselect-types) editor type to assign multiple users
`users?: array` - use an **array** of user **IDs** when using the [**multiselect**](/api/config/js_kanban_editorshape_config/#--parameters-for-combo-select-and-multiselect-types) editor type for multiple user assignments

`users?: string | number` - specify a single **ID**, if you use the [**combo** or **select**](../js_kanban_editorshape_config/#--parameters-for-combo-select-and-multiselect-types) editor types to assign a single user
`users?: string | number` - specify a single user **ID** when using the [**combo** or **select**](/api/config/js_kanban_editorshape_config/#--parameters-for-combo-select-and-multiselect-types) editor types for single user assignment
:::

- `priority` - (optional) a card priority **ID**. To specify the card priority, you need to define an array with priorities data in the [cardShape.priority](../js_kanban_cardshape_config) property. It is displayed in the **Priority** field
- `css` - (optional) defines css styles for a separate card
- `votes` - (optional) an array of user IDs
- `comments` - (optional) an array of objects with data of comments. For each comment's object you can specify the following parameters:
- `id` - (required) an **ID** of the comment
- `userId` - (required) an **ID** of a user that posted the comment
- `cardId` - (required) an **ID** of the card that the comment belongs to
- `text` - (optional) a text of the comment. It also can contain html markup
- `date` - (optional) a Date object (do not specify a string date). The date when the comment was posted. It is not updated after editing
- `custom_key` - (optional) a custom key of the card. You can specify the custom keys to place the card into column and row. See the [columnKey](../js_kanban_columnkey_config) and [rowKey](../js_kanban_rowkey_config) properties
- `priority` - (optional) priority **ID** of the card. Define an array of priorities in the [`cardShape.priority`](/api/config/js_kanban_cardshape_config) property. Displayed in the **Priority** field
- `css` - (optional) custom CSS styles for the card
- `votes` - (optional) array of user IDs who voted
- `comments` - (optional) array of comment objects with:
- `id` - (required) comment **ID**
- `userId` - (required) user **ID** of the commenter
- `cardId` - (required) card **ID** the comment belongs to
- `text` - (optional) comment text, which can include HTML markup
- `date` - (optional) Date object representing when the comment was posted (not updated after edits)
- `custom_key` - (optional) any custom key for the card. This can be used to position the card within columns or rows, see the [`columnKey`](/api/config/js_kanban_columnkey_config) and [`rowKey`](/api/config/js_kanban_rowkey_config) properties

:::info
If you want to load new data for cards dynamically, you can use the [**parse()**](../../methods/js_kanban_parse_method) method!
To load new card data dynamically, the [`parse()`](/api/methods/js_kanban_parse_method) method can be used.
:::

### Example
Expand Down Expand Up @@ -127,10 +127,10 @@ const cards = [
}, {...} // other comments
],
priority: 1,
// custom field to place the card into the "feature" row
// custom field to place the card into the "feature" row
// the rowKey config needs to be set to the "type" value
type: "feature",
// custom field to place the card into the "backlog" column
// custom field to place the card into the "backlog" column
// the columnKey config needs to be set to the "stage" value
stage: "backlog",
css: "red",
Expand All @@ -144,10 +144,10 @@ new kanban.Kanban("#root", {
});
~~~

**Change log:** The ***css***, ***comments*** and ***votes*** parameters were added in v1.4
**Change log:** The ***css***, ***comments***, and ***votes*** parameters were introduced in v1.4

**Related articles:**
- [Working with data](../../../guides/working_with_data)
- [updateCard()](api/methods/js_kanban_updatecard_method.md)
- [Working with data](/guides/working_with_data)
- [updateCard()](/api/methods/js_kanban_updatecard_method)

**Related sample:** [Kanban. Styling cards](https://snippet.dhtmlx.com/qu6rpktk?tag=kanban)
Loading
Loading