Skip to content
Merged
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
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/api/config/js_kanban_cards_config.md
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ For each card you can specify the following parameters (data):
- `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](api/config/js_kanban_rowkey_config.md) properties

:::info
If you want to load new data for cards dynamically, you can use the [**parse()**](api/methods/js_kanban_parse_method.md) method!
If you want to load new data for cards dynamically, you can use the [**setConfig()**](api/methods/js_kanban_setconfig_method.md) or [**parse()**](api/methods/js_kanban_parse_method.md) method!
:::

### Example
Expand Down
2 changes: 1 addition & 1 deletion docs/api/config/js_kanban_columns_config.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ For each column you can specify the following parameters (data):
~~~

:::info
If you want to load new data for columns dynamically, you can use the [`parse()`](../../methods/js_kanban_parse_method) method!
If you want to load new data for columns dynamically, you can use the [`setConfig()`](../../methods/js_kanban_setconfig_method) or [`parse()`](../../methods/js_kanban_parse_method) method!
:::

### Example
Expand Down
2 changes: 1 addition & 1 deletion docs/api/config/js_kanban_links_config.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ For each link you can specify the following parameters (data):
- ***"parent"*** - defines dependency between parent (master) and child (slave) tasks

:::info
If you want to load new data for links dynamically, you can use the [**parse()**](api/methods/js_kanban_parse_method.md) method!
If you want to load new data for links dynamically, you can use the [**setConfig()**](api/methods/js_kanban_setconfig_method.md) or [**parse()**](api/methods/js_kanban_parse_method.md) method!
:::

### Example
Expand Down
2 changes: 1 addition & 1 deletion docs/api/config/js_kanban_rows_config.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ For each row (swimlane) you can specify the following parameters (data):
- `css` - (optional) defines css styles for a separate row

:::info
If you want to load new data for rows (swimlanes) dynamically, you can use the [**parse()**](api/methods/js_kanban_parse_method.md) method!
If you want to load new data for rows (swimlanes) dynamically, you can use the [**setConfig()**](api/methods/js_kanban_setconfig_method.md) or [**parse()**](api/methods/js_kanban_parse_method.md) method!
:::

### Example
Expand Down
2 changes: 2 additions & 0 deletions docs/api/methods/js_kanban_parse_method.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ description: You can learn about the parse method in the documentation of the DH

@short: Parses data into Kanban

This method performs the same operation as [`setConfig`](/api/methods/js_kanban_setconfig_method) when used with data-related Kanban settings. It is therefore recommended to use `setConfig` for consistency with other configuration options, although `parse` remains supported as an alias for data parsing.

### Usage

~~~jsx {}
Expand Down
8 changes: 3 additions & 5 deletions docs/guides/integration_with_angular.md
Original file line number Diff line number Diff line change
Expand Up @@ -253,7 +253,7 @@ export class KanbanComponent implements OnInit, OnDestroy {
}
~~~

You can also use the [`parse()`](/api/methods/js_kanban_parse_method/) method inside the `ngOnInit()` method of Angular to load data into Kanban.
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.

~~~jsx {2,23,37-42} title="kanban.component.ts"
import { Kanban, Toolbar } from '@dhx/trial-kanban';
Expand Down Expand Up @@ -292,8 +292,8 @@ export class KanbanComponent implements OnInit, OnDestroy {
// other configuration properties
});

// apply the data via the parse() method
this._kanban.parse({
// apply the data via the setConfig() or parse() method
this._kanban.setConfig({
columns,
cards,
rows
Expand All @@ -307,8 +307,6 @@ export class KanbanComponent implements OnInit, OnDestroy {
}
~~~

The `parse(data)` method provides data reloading on each applied change.

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.

#### Handling events
Expand Down
7 changes: 3 additions & 4 deletions docs/guides/integration_with_react.md
Original file line number Diff line number Diff line change
Expand Up @@ -254,7 +254,7 @@ export default function KanbanComponent(props) {
}
~~~

You can also use the [`parse()`](/api/methods/js_kanban_parse_method/) method inside the `useEffect()` method of React to load data into Kanban:
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.

~~~jsx {9-11,27} title="Kanban.jsx"
import { useEffect, useRef } from "react";
Expand Down Expand Up @@ -283,7 +283,8 @@ export default function KanbanComponent(props) {
// other configuration properties
});

kanban.parse({ columns, cards, rows });
kanban.setConfig({ columns, cards, rows });
// or kanban.parse({ columns, cards, rows });

return () => {
kanban.destructor();
Expand All @@ -298,8 +299,6 @@ export default function KanbanComponent(props) {
}
~~~

The `parse(data)` method provides data reloading on each applied change.

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.

#### Handling events
Expand Down
7 changes: 3 additions & 4 deletions docs/guides/integration_with_svelte.md
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,7 @@ onDestroy(() => {
</div>
~~~

You can also use the [`parse()`](/api/methods/js_kanban_parse_method/) method inside the `onMount()` method of Svelte to load data into Kanban:
You can also use the [`setConfig()`](/api/methods/js_kanban_setconfig_method/) or [`parse()`](/api/methods/js_kanban_parse_method/) method inside the `onMount()` method of Svelte to load data into Kanban. The `setConfig` or `parse()` method provides data reloading on each applied change.

~~~html {6-8,27} title="Kanban.svelte"
<script>
Expand Down Expand Up @@ -272,7 +272,8 @@ onMount(() => {
// other configuration properties
})

kanban.parse({ columns, cards, rows });
kanban.setConfig({ columns, cards, rows });
// or kanban.parse({ columns, cards, rows });
});

onDestroy(() => {
Expand All @@ -287,8 +288,6 @@ onDestroy(() => {
</div>
~~~

The `parse(data)` method provides data reloading on each applied change.

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.

#### Handling events
Expand Down
7 changes: 3 additions & 4 deletions docs/guides/integration_with_vue.md
Original file line number Diff line number Diff line change
Expand Up @@ -275,7 +275,7 @@ export default {
</template>
~~~

You can also use the [`parse()`](/api/methods/js_kanban_parse_method/) method inside the `mounted()` method of Vue to load data into Kanban:
You can also use the [`setConfig()`](/api/methods/js_kanban_setconfig_method/) or [`parse()`](/api/methods/js_kanban_parse_method/) method inside the `mounted()` method of Vue to load data into Kanban. The `setConfig` or `parse()` method provides data reloading on each applied change.

~~~html {6,22-26} title="Kanban.vue"
<script>
Expand All @@ -299,11 +299,12 @@ export default {
// other configuration properties
});

this.kanban.parse({
this.kanban.setConfig({
cards: this.cards,
columns: this.columns,
rows: this.rows
});

},

unmounted() {
Expand All @@ -321,8 +322,6 @@ export default {
</template>
~~~

The `parse(data)` method provides data reloading on each applied change.

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.

#### Handling events
Expand Down
6 changes: 4 additions & 2 deletions docs/guides/working_with_data.md
Original file line number Diff line number Diff line change
Expand Up @@ -125,13 +125,15 @@ new kanban.Kanban("#root", {

## Loading data from local source

To load data for ***columns***, ***rows***, ***cards***, and ***links*** from a local source, you can use the [`parse()`](api/methods/js_kanban_parse_method.md) method. It takes an object with the needed data as a parameter.
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.

~~~js {4}
const board = new kanban.Kanban("#root", {});

// loading data into Kanban
board.parse({ columns, cards, rows });
board.setConfig({ columns, cards, rows });

// or board.parse({ columns, cards, rows });
~~~

## Syncing Kanban data with Gantt and Scheduler
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -313,8 +313,7 @@ uploadURL: rec => {
.then(res => res.json())
.then(
data => {
rec.id = data.id;
return data;
return { id: rec.id, ...data };
},
() => ({ id: rec.id, status: "error" })
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -313,8 +313,7 @@ new kanban.Kanban("#root", {
.then(res => res.json())
.then(
data => {
rec.id = data.id;
return data;
return { id: rec.id, ...data };
},
() => ({ id: rec.id, status: "error" })
)
Expand Down
2 changes: 1 addition & 1 deletion i18n/cn/docusaurus-plugin-content-docs/current/howtos.md
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ description: 您可以在 DHTMLX JavaScript Kanban 库的文档中浏览 How-tos
| [Limiting cards](/api/config/js_kanban_columns_config.md) | 设置列和泳道的卡片限制(**WIP 校验**) ([示例](https://snippet.dhtmlx.com/2blo6hx8?text=kanban))|
| [Selecting cards](/api/config/js_kanban_readonly_config.md) | 开启或关闭卡片选择 |
| [Setting a fix height of cards](/api/config/js_kanban_cardheight_config.md)| 如何设置卡片固定高度 |
| [Updating card settings](/api/methods/js_kanban_setconfig_method.md)| 如何更新卡片设置 |
| [Updating card settings](/api/methods/js_kanban_setconfig_method)| 如何更新卡片设置 |

## 卡片编辑器操作

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -313,8 +313,7 @@ uploadURL: rec => {
.then(res => res.json())
.then(
data => {
rec.id = data.id;
return data;
return { id: rec.id, ...data };
},
() => ({ id: rec.id, status: "error" })
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -313,8 +313,7 @@ new kanban.Kanban("#root", {
.then(res => res.json())
.then(
data => {
rec.id = data.id;
return data;
return { id: rec.id, ...data };
},
() => ({ id: rec.id, status: "error" })
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ Each card can include the following parameters (data):
- `custom_key` - (optional) custom keys for placing the card into specific columns or rows. See [columnKey](../js_kanban_columnkey_config) and [rowKey](api/config/js_kanban_rowkey_config.md) properties

:::info
To dynamically load new card data, you can use the [**parse()**](api/methods/js_kanban_parse_method.md) method!
To dynamically load new card data, you can use the [**setConfig()**](api/methods/js_kanban_setconfig_method.md) or [**parse()**](api/methods/js_kanban_parse_method.md) method!
:::

### Example
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ Each column can include the following properties (data):
~~~

:::info
To load new column data dynamically, the [`parse()`](../../methods/js_kanban_parse_method) method can be used.
To load new column data dynamically, the [`setConfig()`](../../methods/js_kanban_setconfig_method) or [`parse()`](../../methods/js_kanban_parse_method) method can be used.
:::

### Example
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -312,8 +312,7 @@ uploadURL: rec => {
.then(res => res.json())
.then(
data => {
rec.id = data.id;
return data;
return { id: rec.id, ...data };
},
() => ({ id: rec.id, status: "error" })
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ Each link can include the following details:
- ***"parent"*** - indicates a parent (master) and child (slave) task relationship

:::info
To update links data dynamically, you can use the [**parse()**](api/methods/js_kanban_parse_method.md) method!
To update links data dynamically, you can use the [**setConfig()**](api/methods/js_kanban_setconfig_method.md) or [**parse()**](api/methods/js_kanban_parse_method.md) method!
:::

### Example
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ Each row (swimlane) can include the following properties:
- `css` - (optional) applies custom CSS styles to the individual row.

:::info
To update rows (swimlanes) data dynamically, the [**parse()**](api/methods/js_kanban_parse_method.md) method can be used.
To update rows (swimlanes) data dynamically, the [**setConfig()**](api/methods/js_kanban_setconfig_method.md) or [**parse()**](api/methods/js_kanban_parse_method.md) method can be used.
:::

### Example
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ description: You can learn about the parse method in the documentation of the DH

@short: Loads data into the Kanban board

This method performs the same operation as [`setConfig`](/api/methods/js_kanban_setconfig_method) when used with data-related Kanban settings. It is therefore recommended to use `setConfig` for consistency with other configuration options, although `parse` remains supported as an alias for data parsing.

### Usage

~~~jsx {}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -313,8 +313,7 @@ new kanban.Kanban("#root", {
.then(res => res.json())
.then(
data => {
rec.id = data.id;
return data;
return { id: rec.id, ...data };
},
() => ({ id: rec.id, status: "error" })
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -253,7 +253,7 @@ export class KanbanComponent implements OnInit, OnDestroy {
}
~~~

You can also load data into Kanban using the [`parse()`](/api/methods/js_kanban_parse_method/) method inside the `ngOnInit()` method.
You can also load data into Kanban using the [`setConfig()`](/api/methods/js_kanban_setconfig_method) or [`parse()`](/api/methods/js_kanban_parse_method/) method inside the `ngOnInit()` method.

~~~jsx {2,23,37-42} title="kanban.component.ts"
import { Kanban, Toolbar } from '@dhx/trial-kanban';
Expand Down Expand Up @@ -293,7 +293,7 @@ export class KanbanComponent implements OnInit, OnDestroy {
});

// apply the data via the parse() method
this._kanban.parse({
this._kanban.setConfig({
columns,
cards,
rows
Expand All @@ -307,7 +307,7 @@ export class KanbanComponent implements OnInit, OnDestroy {
}
~~~

The `parse(data)` method lets you reload data whenever you need to update it.
The `setConfig` or `parse()` method lets you reload data whenever you need to update it.

At this point, the Kanban component is good to go. When you add the element to a page, Kanban will initialize with your data. You can also tweak the configuration as needed. For all available options, check out the [Kanban API docs](/api/overview/properties_overview/).

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -254,7 +254,7 @@ export default function KanbanComponent(props) {
}
~~~

Another way to load data is by using the [`parse()`](/api/methods/js_kanban_parse_method/) method inside React's `useEffect()`:
Another way to load data is by using the [`setConfig()`](/api/methods/js_kanban_setconfig_method) or [`parse()`](/api/methods/js_kanban_parse_method/) method inside React's `useEffect()`:

~~~jsx {9-11,27} title="Kanban.jsx"
import { useEffect, useRef } from "react";
Expand Down Expand Up @@ -283,7 +283,7 @@ export default function KanbanComponent(props) {
// other configuration properties
});

kanban.parse({ columns, cards, rows });
kanban.setConfig({ columns, cards, rows });

return () => {
kanban.destructor();
Expand All @@ -298,7 +298,7 @@ export default function KanbanComponent(props) {
}
~~~

The `parse(data)` method can be handy for reloading data when changes are made.
The `setConfig()` or `parse()` method can be handy for reloading data when changes are made.

At this point, the Kanban component is set up. When the component is added to the page, it initializes Kanban with the provided data. You can also adjust the configuration as needed. The [Kanban API docs](/api/overview/properties_overview/) have the full list of available options.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,7 @@ onDestroy(() => {
</div>
~~~

If you want, you can also use the [`parse()`](/api/methods/js_kanban_parse_method/) method in Svelte's `onMount()` to load data into Kanban:
If you want, you can also use the [`setConfig()`](/api/methods/js_kanban_setconfig_method) or [`parse()`](/api/methods/js_kanban_parse_method/) method in Svelte's `onMount()` to load data into Kanban:

~~~html {6-8,27} title="Kanban.svelte"
<script>
Expand Down Expand Up @@ -272,7 +272,7 @@ onMount(() => {
// other config options
})

kanban.parse({ columns, cards, rows });
kanban.setConfig({ columns, cards, rows });
});

onDestroy(() => {
Expand All @@ -287,7 +287,7 @@ onDestroy(() => {
</div>
~~~

The `parse(data)` method is handy for reloading data whenever something changes.
Both `setConfig()` and `parse(data)` methods are handy for reloading data whenever something changes.

At this point, the Kanban component is good to go. Once it's on the page, it will initialize with your data. You can tweak the configuration as needed. To see all the available settings, check out the [Kanban API docs](/api/overview/properties_overview/).

Expand Down
Loading
Loading