Skip to content

Commit 798ce30

Browse files
author
Serhii Pylypchuk
committed
[add] inner events description
1 parent f8b3fef commit 798ce30

15 files changed

+608
-0
lines changed

‎docs/api/api_overview.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,24 @@ new kanban.Toolbar("#toolbar", {
8585
| [](api/provider/js_kanban_getcolumns_method.md) | @getshort(api/provider/js_kanban_getcolumns_method.md) |
8686
| [](api/provider/js_kanban_getrows_method.md) | @getshort(api/provider/js_kanban_getrows_method.md) |
8787

88+
## Kanban events
89+
90+
| Name | Description |
91+
| -----------------------------------------------------------| ---------------------------------------------------------|
92+
| [](api/events/js_kanban_addcard_event.md) | @getshort(api/events/js_kanban_addcard_event.md) |
93+
| [](api/events/js_kanban_addcolumn_event.md) | @getshort(api/events/js_kanban_addcolumn_event.md) |
94+
| [](api/events/js_kanban_addrow_event.md) | @getshort(api/events/js_kanban_addrow_event.md) |
95+
| [](api/events/js_kanban_deletecard_event.md) | @getshort(api/events/js_kanban_deletecard_event.md) |
96+
| [](api/events/js_kanban_deletecolumn_event.md) | @getshort(api/events/js_kanban_deletecolumn_event.md) |
97+
| [](api/events/js_kanban_deleterow_event.md) | @getshort(api/events/js_kanban_deleterow_event.md) |
98+
| [](api/events/js_kanban_movecard_event.md) | @getshort(api/events/js_kanban_movecard_event.md) |
99+
| [](api/events/js_kanban_selectcard_event.md) | @getshort(api/events/js_kanban_selectcard_event.md) |
100+
| [](api/events/js_kanban_setsearch_event.md) | @getshort(api/events/js_kanban_setsearch_event.md) |
101+
| [](api/events/js_kanban_unselectcard_event.md) | @getshort(api/events/js_kanban_unselectcard_event.md) |
102+
| [](api/events/js_kanban_updatecard_event.md) | @getshort(api/events/js_kanban_updatecard_event.md) |
103+
| [](api/events/js_kanban_updatecolumn_event.md) | @getshort(api/events/js_kanban_updatecolumn_event.md) |
104+
| [](api/events/js_kanban_updaterow_event.md) | @getshort(api/events/js_kanban_updaterow_event.md) |
105+
88106
## Kanban properties
89107

90108
| Name | Description |

‎docs/api/events/js_kanban_addcard_event.md‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
---
2+
sidebar_label: add-card
3+
title: add-card Event
4+
description: You can learn about the add-card event in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban.
5+
---
6+
7+
# add-card
8+
9+
### Description
10+
11+
@short: fires when adding a new card
12+
13+
### Usage
14+
15+
~~~jsx {}
16+
"add-card": ({
17+
columnId: string | number,
18+
id?: string | number,
19+
rowId?: string | number,
20+
before?: string | number,
21+
card?: object,
22+
}) => void;
23+
~~~
24+
25+
### Parameters
26+
27+
The callback of the **add-card** event can take an object with the following parameters:
28+
29+
- `columnId` - (mandatory) the ID of the target column
30+
- `id` - (optional) the ID of the new card
31+
- `rowId` - (optional) the ID of the target row
32+
- `before` - (optional) the ID of the card, before which the new card will be placed
33+
- `card` - (optional) the data object of the new card. The full list of the card parameters can be found [here](api/config/js_kanban_cards_config.md)
34+
35+
:::info
36+
For handling the inner events you can use the [**Event Bus methods**](api/api_overview.md/#event-bus-methods)
37+
:::
38+
39+
### Example
40+
41+
~~~jsx {7-9}
42+
// create Kanban
43+
const board = new kanban.Kanban("#root", {
44+
columns,
45+
cards
46+
});
47+
// subscribe on the "add-card" event
48+
board.api.on("add-card", (obj) => {
49+
console.log(obj.columnId);
50+
});
51+
~~~

‎docs/api/events/js_kanban_addcolumn_event.md‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
---
2+
sidebar_label: add-column
3+
title: add-column Event
4+
description: You can learn about the add-column event in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban.
5+
---
6+
7+
# add-column
8+
9+
### Description
10+
11+
@short: fires when adding a new column
12+
13+
### Usage
14+
15+
~~~jsx {}
16+
"add-column": ({
17+
id?: string | number,
18+
label?: string
19+
}) => void;
20+
~~~
21+
22+
### Parameters
23+
24+
The callback of the **add-column** event can take an object with the following parameters:
25+
26+
- `id` - (optional) the ID of the new column
27+
- `label` - (optional) the label of the new column
28+
29+
:::info
30+
For handling the inner events you can use the [**Event Bus methods**](api/api_overview.md/#event-bus-methods)
31+
:::
32+
33+
### Example
34+
35+
~~~jsx {7-9}
36+
// create Kanban
37+
const board = new kanban.Kanban("#root", {
38+
columns,
39+
cards
40+
});
41+
// subscribe on the "add-column" event
42+
board.api.on("add-column", (obj) => {
43+
console.log(obj.label);
44+
});
45+
~~~

‎docs/api/events/js_kanban_addrow_event.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
sidebar_label: add-row
3+
title: add-row Event
4+
description: You can learn about the add-row event in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban.
5+
---
6+
7+
# add-row
8+
9+
### Description
10+
11+
@short: fires when adding a new row
12+
13+
### Usage
14+
15+
~~~jsx {}
16+
"add-row": ({
17+
id?: string | number,
18+
label?: string,
19+
collapsed?: boolean
20+
}) => void;
21+
~~~
22+
23+
### Parameters
24+
25+
The callback of the **add-row** event can take an object with the following parameters:
26+
27+
- `id` - (optional) the ID of the new row
28+
- `label` - (optional) the label of the new row
29+
- `collapsed` - (optional) the state of the new row
30+
31+
:::info
32+
For handling the inner events you can use the [**Event Bus methods**](api/api_overview.md/#event-bus-methods)
33+
:::
34+
35+
### Example
36+
37+
~~~jsx {7-9}
38+
// create Kanban
39+
const board = new kanban.Kanban("#root", {
40+
columns,
41+
cards
42+
});
43+
// subscribe on the "add-row" event
44+
board.api.on("add-row", (obj) => {
45+
console.log(obj.id);
46+
});
47+
~~~

‎docs/api/events/js_kanban_deletecard_event.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
sidebar_label: delete-card
3+
title: delete-card Event
4+
description: You can learn about the delete-card event in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban.
5+
---
6+
7+
# delete-card
8+
9+
### Description
10+
11+
@short: fires when removing a card
12+
13+
### Usage
14+
15+
~~~jsx {}
16+
"delete-card": ({ id: string | number }) => void;
17+
~~~
18+
19+
### Parameters
20+
21+
The callback of the **delete-card** event can take an object with the following parameters:
22+
23+
- `id` - (mandatory) the ID of the card to be deleted
24+
25+
:::info
26+
For handling the inner events you can use the [**Event Bus methods**](api/api_overview.md/#event-bus-methods)
27+
:::
28+
29+
### Example
30+
31+
~~~jsx {7-9}
32+
// create Kanban
33+
const board = new kanban.Kanban("#root", {
34+
columns,
35+
cards
36+
});
37+
// subscribe on the "delete-card" event
38+
board.api.on("delete-card", (obj) => {
39+
console.log(obj.id);
40+
});
41+
~~~

‎docs/api/events/js_kanban_deletecolumn_event.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
sidebar_label: delete-column
3+
title: delete-column Event
4+
description: You can learn about the delete-column event in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban.
5+
---
6+
7+
# delete-column
8+
9+
### Description
10+
11+
@short: fires when removing a column
12+
13+
### Usage
14+
15+
~~~jsx {}
16+
"delete-column": ({ id: string | number }) => void;
17+
~~~
18+
19+
### Parameters
20+
21+
The callback of the **delete-column** event can take an object with the following parameters:
22+
23+
- `id` - (mandatory) the ID of the column to be deleted
24+
25+
:::info
26+
For handling the inner events you can use the [**Event Bus methods**](api/api_overview.md/#event-bus-methods)
27+
:::
28+
29+
### Example
30+
31+
~~~jsx {7-9}
32+
// create Kanban
33+
const board = new kanban.Kanban("#root", {
34+
columns,
35+
cards
36+
});
37+
// subscribe on the "delete-column" event
38+
board.api.on("delete-column", (obj) => {
39+
console.log(obj.id);
40+
});
41+
~~~

‎docs/api/events/js_kanban_deleterow_event.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
sidebar_label: delete-row
3+
title: delete-row Event
4+
description: You can learn about the delete-row event in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban.
5+
---
6+
7+
# delete-row
8+
9+
### Description
10+
11+
@short: fires when removing a row
12+
13+
### Usage
14+
15+
~~~jsx {}
16+
"delete-row": ({ id: string | number }) => void;
17+
~~~
18+
19+
### Parameters
20+
21+
The callback of the **delete-row** event can take an object with the following parameters:
22+
23+
- `id` - (mandatory) the ID of the row to be deleted
24+
25+
:::info
26+
For handling the inner events you can use the [**Event Bus methods**](api/api_overview.md/#event-bus-methods)
27+
:::
28+
29+
### Example
30+
31+
~~~jsx {7-9}
32+
// create Kanban
33+
const board = new kanban.Kanban("#root", {
34+
columns,
35+
cards
36+
});
37+
// subscribe on the "delete-row" event
38+
board.api.on("delete-row", (obj) => {
39+
console.log(obj.id);
40+
});
41+
~~~

‎docs/api/events/js_kanban_movecard_event.md‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
---
2+
sidebar_label: move-card
3+
title: move-card Event
4+
description: You can learn about the move-card event in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban.
5+
---
6+
7+
# move-card
8+
9+
### Description
10+
11+
@short: fires when moving a card
12+
13+
### Usage
14+
15+
~~~jsx {}
16+
"move-card": ({
17+
id: string | number,
18+
columnId: string | number,
19+
rowId?: string | number,
20+
before?: string | number
21+
}) => void;
22+
~~~
23+
24+
### Parameters
25+
26+
The callback of the **move-card** event can take an object with the following parameters:
27+
28+
- `id` - (mandatory) the ID of the card that will be moved
29+
- `columnId` - (mandatory) the ID of the column the card will be placed into
30+
- `rowId` - (optional) the ID of the row the card will be placed into
31+
- `before` - (optional) the ID of the card, before which the new card will be placed
32+
33+
:::info
34+
For handling the inner events you can use the [**Event Bus methods**](api/api_overview.md/#event-bus-methods)
35+
:::
36+
37+
### Example
38+
39+
~~~jsx {7-9}
40+
// create Kanban
41+
const board = new kanban.Kanban("#root", {
42+
columns,
43+
cards
44+
});
45+
// subscribe on the "move-card" event
46+
board.api.on("move-card", (obj) => {
47+
console.log(obj.columnId);
48+
});
49+
~~~

‎docs/api/events/js_kanban_selectcard_event.md‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
---
2+
sidebar_label: select-card
3+
title: select-card Event
4+
description: You can learn about the select-card event in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban.
5+
---
6+
7+
# select-card
8+
9+
### Description
10+
11+
@short: fires when selecting a card
12+
13+
### Usage
14+
15+
~~~jsx {}
16+
"select-card": ({
17+
id: string | number,
18+
groupMode?: boolean
19+
}) => void;
20+
~~~
21+
22+
### Parameters
23+
24+
The callback of the **select-card** event can take an object with the following parameters:
25+
26+
- `id` - (mandatory) the ID of the selected card
27+
- `groupMode` - (optional) multiselecting (false by default)
28+
29+
:::info
30+
For handling the inner events you can use the [**Event Bus methods**](api/api_overview.md/#event-bus-methods)
31+
:::
32+
33+
### Example
34+
35+
~~~jsx {7-9}
36+
// create Kanban
37+
const board = new kanban.Kanban("#root", {
38+
columns,
39+
cards
40+
});
41+
// subscribe on the "select-card" event
42+
board.api.on("select-card", (obj) => {
43+
console.log(obj.id);
44+
});
45+
~~~

0 commit comments

Comments
 (0)