Skip to content

Commit 8228a55

Browse files
mafanya23mafanya23
authored
Merge pull request #67 from DHTMLX/9.2
[add] docs for v9.2
2 parents 59f3c14 + ec36244 commit 8228a55

99 files changed

Lines changed: 7169 additions & 975 deletions

File tree

Some content is hidden

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

‎docs/assets/grid/blockselection_module.png‎

52.5 KB
Loading

‎docs/assets/grid/dragpanel_module.png‎

63.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

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

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
---
2+
sidebar_label: beforeBlockSelectionMove
3+
title: JavaScript Grid - beforeBlockSelectionMove Event
4+
description: You can explore the beforeBlockSelectionMove 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+
# beforeBlockSelectionMove
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 moving the selection boundary
14+
15+
### Usage
16+
17+
~~~jsx
18+
beforeBlockSelectionMove: (
19+
startCell: { row: object; column: object },
20+
nextCell: { 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+
31+
<table>
32+
<tbody>
33+
<tr>
34+
<td><b>startCell</b></td>
35+
<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>
36+
</tr>
37+
<tr>
38+
<td><b>nextCell</b></td>
39+
<td>(<i>object</i>) an object that contains the next cell to which the boundary is moving or the end cell of the previously selected boundary during the handle movement, 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>
40+
</tr>
41+
<tr>
42+
<td><b>focusCell</b></td>
43+
<td>(<i>object</i>) an object that contains the last 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>
44+
</tr>
45+
<tr>
46+
<td><b>dragDirection</b></td>
47+
<td>(<i>string</i>) determines the direction of movement of the focused cell: `"up"` | `"down"` | `"left"` | `"right"` | `null`</td>
48+
</tr>
49+
<tr>
50+
<td><b>event</b></td>
51+
<td>(<i>Event</i>) the browser event: `MouseEvent` or `TouchEvent`</td>
52+
</tr>
53+
</tbody>
54+
</table>
55+
56+
@returns:
57+
Return `false` to cancel the action; otherwise, `true`.
58+
59+
@example:
60+
grid.block.events.on("beforeBlockSelectionMove", (startCell, nextCell) => {
61+
console.log("Moving to:", nextCell.column.id, nextCell.row.id);
62+
});
63+
64+
@descr:
65+
66+
**Related API**: [`afterBlockSelectionMove`](grid/api/blockselection/afterblockselectionmove_event.md)
67+
68+
@changelog:
69+
added in v9.2

0 commit comments

Comments
 (0)