Skip to content

Commit e2bab41

Browse files
serhiipylypchuk1991serhiipylypchuk1991
authored
Merge pull request #68 from DHTMLX/next
[add] docs updates for v9.2
2 parents 7281085 + 296bdc0 commit e2bab41

File tree

108 files changed

+9110
-13915
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

108 files changed

+9110
-13915
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,3 +24,4 @@ yarn-error.log*
2424

2525
# Idea
2626
.idea
27+
package-lock.json

‎docs/assets/grid/blockselection_module.png

52.5 KB
Loading

‎docs/assets/grid/dragpanel_module.png

40.3 KB
Loading

‎docs/grid/api/api_overview.md

Lines changed: 136 additions & 13 deletions
Large diffs are not rendered by default.

‎docs/grid/api/blockselection/afterblockhandleapply_event.md

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
---
2+
sidebar_label: afterBlockHandleApply
3+
title: JavaScript Grid - afterBlockHandleApply Event
4+
description: You can explore the afterBlockHandleApply event of Grid block selection in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
5+
---
6+
7+
# afterBlockHandleApply
8+
9+
:::tip pro version only
10+
This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.
11+
:::
12+
13+
@short: triggered after applying the handle action
14+
15+
### Usage
16+
17+
~~~jsx
18+
afterBlockHandleApply: (
19+
startCell: { row: object; column: object },
20+
endCell: { row: object; column: object },
21+
dragDirection: "up" | "down" | "left" | "right" | null,
22+
event: MouseEvent | TouchEvent
23+
) => void;
24+
~~~
25+
26+
@params:
27+
The callback of the event is called with the following parameters:
28+
29+
<table>
30+
<tbody>
31+
<tr>
32+
<td><b>startCell</b></td>
33+
<td>(<i>object</i>) an object that contains the initial cell of the selection, includes the following properties:<ul><li><b>`row`</b> - (<i>object</i>) the row configuration object </li><li><b>`column`</b> - (<i>object</i>) the column configuration object</li></ul></td>
34+
</tr>
35+
<tr>
36+
<td><b>endCell</b></td>
37+
<td>(<i>object</i>) an object that contains the end cell of the selection, includes the following properties:<ul><li><b>`row`</b> - (<i>object</i>) the row configuration object </li><li><b>`column`</b> - (<i>object</i>) the column configuration object</li></ul></td>
38+
</tr>
39+
<tr>
40+
<td><b>dragDirection</b></td>
41+
<td>(<i>string</i>) determines the direction of movement of the focused cell: `"up"` | `"down"` | `"left"` | `"right"` | `null`</td>
42+
</tr>
43+
<tr>
44+
<td><b>event</b></td>
45+
<td>(<i>Event</i>) the browser event: `MouseEvent` or `TouchEvent`</td>
46+
</tr>
47+
</tbody>
48+
</table>
49+
50+
@example:
51+
grid.block.events.on("afterBlockHandleApply", (startCell, endCell, dir) => {
52+
console.log("Handle applied:");
53+
});
54+
55+
@descr:
56+
57+
**Related API**: [`beforeBlockHandleApply`](grid/api/blockselection/beforeblockhandleapply_event.md)
58+
59+
@changelog:
60+
added in v9.2

‎docs/grid/api/blockselection/afterblockselectionapply_event.md

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
---
2+
sidebar_label: afterBlockSelectionApply
3+
title: JavaScript Grid - afterBlockSelectionApply Event
4+
description: You can explore the afterBlockSelectionApply event of Grid block selection in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
5+
---
6+
7+
# afterBlockSelectionApply
8+
9+
:::tip pro version only
10+
This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.
11+
:::
12+
13+
@short: triggered after applying the selection
14+
15+
### Usage
16+
17+
~~~jsx
18+
afterBlockSelectionApply: (
19+
startCell: { row: object; column: object },
20+
endCell: { row: object; column: object },
21+
handle: boolean,
22+
event: MouseEvent | TouchEvent
23+
) => void;
24+
~~~
25+
26+
@params:
27+
The callback of the event is called with the following parameters:
28+
29+
<table>
30+
<tbody>
31+
<tr>
32+
<td><b>startCell</b></td>
33+
<td>(<i>object</i>) an object that contains the initial cell of the selection, includes the following properties:<ul><li><b>`row`</b> - (<i>object</i>) the row configuration object </li><li><b>`column`</b> - (<i>object</i>) the column configuration object</li></ul></td>
34+
</tr>
35+
<tr>
36+
<td><b>endCell</b></td>
37+
<td>(<i>object</i>) an object that contains the end cell of the selection, includes the following properties:<ul><li><b>`row`</b> - (<i>object</i>) the row configuration object </li><li><b>`column`</b> - (<i>object</i>) the column configuration object</li></ul></td>
38+
</tr>
39+
<tr>
40+
<td><b>handle</b></td>
41+
<td>(<i>boolean</i>) indicates whether the handle was used (`true`) or a regular selection (`false`)</td>
42+
</tr>
43+
<tr>
44+
<td><b>event</b></td>
45+
<td>(<i>Event</i>) the browser event: `MouseEvent` or `TouchEvent`</td>
46+
</tr>
47+
</tbody>
48+
</table>
49+
50+
@example:
51+
grid.block.events.on("afterBlockSelectionApply", (startCell, endCell) => {
52+
console.log("Selection applied:", startCell.column.id, endCell.column.id);
53+
});
54+
55+
@descr:
56+
57+
**Related API**: [`beforeBlockSelectionApply`](grid/api/blockselection/beforeblockselectionapply_event.md)
58+
59+
@changelog:
60+
added in v9.2

‎docs/grid/api/blockselection/afterblockselectionmove_event.md

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
sidebar_label: afterBlockSelectionMove
3+
title: JavaScript Grid - afterBlockSelectionMove Event
4+
description: You can explore the afterBlockSelectionMove event of Grid block selection in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
5+
---
6+
7+
# afterBlockSelectionMove
8+
9+
:::tip pro version only
10+
This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.
11+
:::
12+
13+
@short: triggered after moving the selection boundary
14+
15+
### Usage
16+
17+
~~~jsx
18+
afterBlockSelectionMove: (
19+
startCell: { row: object; column: object },
20+
endCell: { row: object; column: object },
21+
focusCell: { row: object; column: object } | null,
22+
dragDirection: "up" | "down" | "left" | "right" | null,
23+
event: MouseEvent | TouchEvent
24+
) => void;
25+
~~~
26+
27+
@params:
28+
The callback of the event is called with the following parameters:
29+
30+
<table>
31+
<tbody>
32+
<tr>
33+
<td><b>startCell</b></td>
34+
<td>(<i>object</i>) an object that contains the initial cell of the selection, includes the following properties:<ul><li><b>`row`</b> - (<i>object</i>) the row configuration object </li><li><b>`column`</b> - (<i>object</i>) the column configuration object</li></ul></td>
35+
</tr>
36+
<tr>
37+
<td><b>endCell</b></td>
38+
<td>(<i>object</i>) an object that contains the current end cell of the selection, includes the following properties:<ul><li><b>`row`</b> - (<i>object</i>) the row configuration object </li><li><b>`column`</b> - (<i>object</i>) the column configuration object</li></ul></td>
39+
</tr>
40+
<tr>
41+
<td><b>focusCell</b></td>
42+
<td>(<i>object</i>) an object that contains the focus cell (if the handle is used) or `null`, includes the following properties: <ul><li><b>`row`</b> - (<i>object</i>) the row configuration object </li><li><b>`column`</b> - (<i>object</i>) the column configuration object</li></ul></td>
43+
</tr>
44+
<tr>
45+
<td><b>dragDirection</b></td>
46+
<td>(<i>string</i>) determines the direction of movement of the focused cell: `"up"` | `"down"` | `"left"` | `"right"` | `null`</td>
47+
</tr>
48+
<tr>
49+
<td><b>event</b></td>
50+
<td>(<i>Event</i>) the browser event: `MouseEvent` or `TouchEvent`</td>
51+
</tr>
52+
</tbody>
53+
</table>
54+
55+
@example:
56+
grid.block.events.on("afterBlockSelectionMove", (startCell, endCell) => {
57+
console.log("Selection updated to:", endCell.column.id, endCell.row.id);
58+
});
59+
60+
@descr:
61+
62+
**Related API**: [`beforeBlockSelectionMove`](grid/api/blockselection/beforeblockselectionmove_event.md)
63+
64+
@changelog:
65+
added in v9.2

‎docs/grid/api/blockselection/beforeblockhandleapply_event.md

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
---
2+
sidebar_label: beforeBlockHandleApply
3+
title: JavaScript Grid - beforeBlockHandleApply Event
4+
description: You can explore the beforeBlockHandleApply event of Grid block selection in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
5+
---
6+
7+
# beforeBlockHandleApply
8+
9+
:::tip pro version only
10+
This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.
11+
:::
12+
13+
@short: triggered before applying the handle action
14+
15+
### Usage
16+
17+
~~~jsx
18+
beforeBlockHandleApply: (
19+
startCell: { row: object; column: object },
20+
endCell: { row: object; column: object },
21+
dragDirection: "up" | "down" | "left" | "right" | null,
22+
event: MouseEvent | TouchEvent
23+
) => boolean | void;
24+
~~~
25+
26+
@params:
27+
The callback of the event is called with the following parameters:
28+
29+
<table>
30+
<tbody>
31+
<tr>
32+
<td><b>startCell</b></td>
33+
<td>(<i>object</i>) an object that contains the initial cell of the selection, includes the following properties:<ul><li><b>`row`</b> - (<i>object</i>) the row configuration object </li><li><b>`column`</b> - (<i>object</i>) the column configuration object</li></ul></td>
34+
</tr>
35+
<tr>
36+
<td><b>endCell</b></td>
37+
<td>(<i>object</i>) an object that contains the end cell of the selection, includes the following properties:<ul><li><b>`row`</b> - (<i>object</i>) the row configuration object </li><li><b>`column`</b> - (<i>object</i>) the column configuration object</li></ul></td>
38+
</tr>
39+
<tr>
40+
<td><b>dragDirection</b></td>
41+
<td>(<i>string</i>) determines the direction of movement of the focused cell: `"up"` | `"down"` | `"left"` | `"right"` | `null`</td>
42+
</tr>
43+
<tr>
44+
<td><b>event</b></td>
45+
<td>(<i>Event</i>) the browser event: `MouseEvent` or `TouchEvent`</td>
46+
</tr>
47+
</tbody>
48+
</table>
49+
50+
@returns:
51+
Return `false` to cancel the action; otherwise, `true`.
52+
53+
@example:
54+
grid.block.events.on("beforeBlockHandleApply", (startCell, endCell, dir) => {
55+
if (dir === "right" | dir === "left") {
56+
console.log("Horizontal change canceled");
57+
return false;
58+
}
59+
});
60+
61+
@descr:
62+
63+
**Related API**: [`afterBlockHandleApply`](grid/api/blockselection/afterblockhandleapply_event.md)
64+
65+
@changelog:
66+
added in v9.2

‎docs/grid/api/blockselection/beforeblockselectionapply_event.md

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
---
2+
sidebar_label: beforeBlockSelectionApply
3+
title: JavaScript Grid - beforeBlockSelectionApply Event
4+
description: You can explore the beforeBlockSelectionApply event of Grid block selection in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
5+
---
6+
7+
# beforeBlockSelectionApply
8+
9+
:::tip pro version only
10+
This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.
11+
:::
12+
13+
@short: triggered before applying the selection (e.g., to a range)
14+
15+
### Usage
16+
17+
~~~jsx
18+
beforeBlockSelectionApply: (
19+
startCell: { row: object; column: object },
20+
endCell: { row: object; column: object },
21+
handle: boolean,
22+
event: MouseEvent | TouchEvent
23+
) => boolean | void;
24+
~~~
25+
26+
@params:
27+
The callback of the event is called with the following parameters:
28+
29+
<table>
30+
<tbody>
31+
<tr>
32+
<td><b>startCell</b></td>
33+
<td>(<i>object</i>) an object that contains the initial cell of the selection, includes the following properties:<ul><li><b>`row`</b> - (<i>object</i>) the row configuration object </li><li><b>`column`</b> - (<i>object</i>) the column configuration object</li></ul></td>
34+
</tr>
35+
<tr>
36+
<td><b>endCell</b></td>
37+
<td>(<i>object</i>) an object that contains the end cell of the selection, includes the following properties:<ul><li><b>`row`</b> - (<i>object</i>) the row configuration object </li><li><b>`column`</b> - (<i>object</i>) the column configuration object</li></ul></td>
38+
</tr>
39+
<tr>
40+
<td><b>handle</b></td>
41+
<td>(<i>boolean</i>) indicates whether the handle was used (`true`) or a regular selection (`false`)</td>
42+
</tr>
43+
<tr>
44+
<td><b>event</b></td>
45+
<td>(<i>Event</i>) the browser event: `MouseEvent` or `TouchEvent`</td>
46+
</tr>
47+
</tbody>
48+
</table>
49+
50+
@returns:
51+
Return `false` to cancel the action; otherwise, `true`.
52+
53+
@example:
54+
grid.block.events.on("beforeBlockSelectionApply", (startCell, endCell) => {
55+
if (endCell.row.id === "2") {
56+
console.log("Application canceled if the range ends with row 2");
57+
return false;
58+
}
59+
});
60+
61+
@descr:
62+
63+
**Related API**: [`afterBlockSelectionApply`](grid/api/blockselection/afterblockselectionapply_event.md)
64+
65+
@changelog:
66+
added in v9.2

0 commit comments

Comments
 (0)