Skip to content

Commit 5ddf272

Browse files
authored
Merge pull request #17 from DHTMLX/5.2
[add] what's new and migration guide for v5.2, afterDataLoaded event page
2 parents 010cc05 + 8a1db65 commit 5ddf272

File tree

6 files changed

+170
-0
lines changed

6 files changed

+170
-0
lines changed

docs/api/api_overview.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ Parameters:
7070
| [](api/spreadsheet_afterclear_event.md) | @getshort(api/spreadsheet_afterclear_event.md) |
7171
| [](api/spreadsheet_aftercolumnadd_event.md) | @getshort(api/spreadsheet_aftercolumnadd_event.md) |
7272
| [](api/spreadsheet_aftercolumndelete_event.md) | @getshort(api/spreadsheet_aftercolumndelete_event.md) |
73+
| [](api/spreadsheet_afterdataloaded_event.md) | @getshort(api/spreadsheet_afterdataloaded_event.md) |
7374
| [](api/spreadsheet_aftereditend_event.md) | @getshort(api/spreadsheet_aftereditend_event.md) |
7475
| [](api/spreadsheet_aftereditstart_event.md) | @getshort(api/spreadsheet_aftereditstart_event.md) |
7576
| [](api/spreadsheet_afterfocusset_event.md) | @getshort(api/spreadsheet_afterfocusset_event.md) |

docs/api/overview/events_overview.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ description: You can have an Events overview of the DHTMLX JavaScript Spreadshee
1212
| [](../spreadsheet_afterclear_event.md) | @getshort(../spreadsheet_afterclear_event.md) |
1313
| [](../spreadsheet_aftercolumnadd_event.md) | @getshort(../spreadsheet_aftercolumnadd_event.md) |
1414
| [](../spreadsheet_aftercolumndelete_event.md) | @getshort(../spreadsheet_aftercolumndelete_event.md) |
15+
| [](../spreadsheet_afterdataloaded_event.md) | @getshort(../spreadsheet_afterdataloaded_event.md) |
1516
| [](../spreadsheet_aftereditend_event.md) | @getshort(../spreadsheet_aftereditend_event.md) |
1617
| [](../spreadsheet_aftereditstart_event.md) | @getshort(../spreadsheet_aftereditstart_event.md) |
1718
| [](../spreadsheet_afterfocusset_event.md) | @getshort(../spreadsheet_afterfocusset_event.md) |
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
sidebar_label: afterDataLoaded
3+
title: afterDataLoaded event
4+
description: You can learn about the afterDataLoaded event in the documentation of the DHTMLX JavaScript Spreadsheet library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Spreadsheet.
5+
---
6+
7+
# afterDataLoaded
8+
9+
### Description
10+
11+
@short: Fires after data loading is complete
12+
13+
### Usage
14+
15+
~~~jsx
16+
afterColumnAdd: (cell: string) => void;
17+
~~~
18+
19+
### Example
20+
21+
~~~jsx
22+
const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {});
23+
spreadsheet.parse(data);
24+
25+
// subscribe to the "afterDataLoaded" event
26+
spreadsheet.events.on("afterDataLoaded", () => {
27+
dhx.message({
28+
text: "Data is successfully loaded into Spreadsheet!",
29+
css: "dhx_message--success",
30+
expire: 5000
31+
});
32+
});
33+
~~~
34+
35+
**Change log:** Added in v5.2
36+
37+
**Related article:** [Event handling](handling_events.md)
38+
39+
**Related sample:** [Spreadsheet. Data loaded event](https://snippet.dhtmlx.com/vxr7amz6)
40+

docs/migration.md

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,83 @@ description: You can learn about migration in the documentation of the DHTMLX Ja
66

77
# Migration to newer versions
88

9+
## 5.1 -> 5.2
10+
11+
### toolbarBlocks
12+
13+
In v5.2 the [toolbarBlocks](api/spreadsheet_toolbarblocks_config.md) property is modified in the following way:
14+
15+
- the default set of toolbar options is extended by the new *"cell"* option. It includes the *Border* button and the *Merge* button (previously, it was in the *"align"* block)
16+
- the *"actions"* toolbar block is extended with the *Insert link* button (previously, it was in the *"helpers"* block)
17+
- the *"helpers"* toolbar block is renamed to *"help"* and isn't included in the default set of toolbar options
18+
19+
~~~jsx title="Before v5.2" {9}
20+
// default configuration
21+
toolbarBlocks: [
22+
"undo",
23+
"colors",
24+
"decoration",
25+
"align",
26+
"format",
27+
"actions",
28+
"helpers"
29+
]
30+
~~~
31+
32+
~~~jsx title="From v5.2" {7}
33+
// default configuration
34+
toolbarBlocks: [
35+
"undo",
36+
"colors",
37+
"decoration",
38+
"align",
39+
"cell",
40+
"format",
41+
"actions"
42+
]
43+
~~~
44+
45+
### Freezing/unfreezing functionality
46+
47+
In v5.2 the way of freezing/unfreezing columns and rows has been modified:
48+
49+
- the `leftSplit` and `topSplit` configuration properties that have been used for fixing columns and rows were deprecated
50+
- new API methods `freezeCols()`, `unfreezeCols()`, `freezeRows()`, `unfreezeRows()` and a new action `toggleFreeze` were introduced
51+
52+
~~~jsx title="Before v5.0"
53+
const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
54+
topSplit: 1, // the number of row to "freeze"
55+
leftSplit: 1 // the number of columns to "freeze"
56+
});
57+
~~~
58+
59+
~~~jsx title="From v5.0"
60+
// for rows
61+
spreadsheet.freezeRows("B2"); // the rows up to the second row will be fixed
62+
spreadsheet.freezeRows("sheet2!B2"); // the rows up to the second row in "sheet2" will be fixed
63+
spreadsheet.unfreezeRows(); // fixed rows in the current sheet will be unfrozen
64+
spreadsheet.unfreezeRows("sheet2!A1"); // fixed rows in "sheet2" will be unfrozen
65+
66+
// for columns
67+
spreadsheet.freezeCols("B2"); // the columns up to the "B" column will be fixed
68+
spreadsheet.freezeCols("sheet2!B2"); // the columns up to the "B" column in "sheet2" will be fixed
69+
spreadsheet.unfreezeCols(); // fixed columns in the current sheet will be unfrozen
70+
spreadsheet.unfreezeCols("sheet2!A1"); // fixed columns in "sheet2" will be unfrozen
71+
72+
// using the `toggleFreeze` action with the beforeAction/afterAction events
73+
spreadsheet.events.on("afterAction", (actionName, config) => {
74+
if (actionName === "toggleFreeze") {
75+
console.log(actionName, config);
76+
}
77+
});
78+
79+
spreadsheet.events.on("beforeAction", (actionName, config) => {
80+
if (actionName === "toggleFreeze") {
81+
console.log(actionName, config);
82+
}
83+
});
84+
~~~
85+
986
## 4.3 -> 5.0
1087

1188
In v5.0, the *"help"* option of the [toolbarBlocks](api/spreadsheet_toolbarblocks_config.md) property is renamed to *"helpers"*. Besides, the default set of options is extended by the new *"actions"* option.

docs/whats_new.md

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,56 @@ description: You can learn what's new in the DHTMLX JavaScript Spreadsheet libra
88

99
If you are updating Spreadsheet from an older version, check [Migration to Newer Version](migration.md) for details.
1010

11+
## Version 5.2
12+
13+
Released on May X, 2025
14+
15+
[Review of release on the blog](https://dhtmlx.com/blog/dhtmlx-spreadsheet-5-2/)
16+
17+
### Breaking changes
18+
19+
The new release introduces some changes to the `toolbarBlocks` property and the freezing/unfreezing functionality for columns and rows. Check the [Migration guide](migration.md/#51---52) to keep in step with the latest version.
20+
21+
### Deprecated
22+
23+
- The `leftSplit` and `topSplit` configuration properties are removed
24+
25+
### New functionality
26+
27+
- Editing cells:
28+
- the ability to create a styled border for a group of cells via UI
29+
- Freezing/unfreezing columns/rows:
30+
- the ability to freeze/unfreeze columns and rows via UI
31+
- the ability to freeze/unfreeze columns and rows via API
32+
- new methods: `freezeCols()`, `unfreezeCols()`, `freezeRows()`, `unfreezeRows()`
33+
- new action: `toggleFreeze`
34+
- new `freeze` property for the *sheets* object of the `parse()` method
35+
- Hiding/showing columns/rows:
36+
- the ability to hide/show columns and rows via UI
37+
- the ability to hide/show columns and rows via API
38+
- new methods: `hideCols()`, `showCols()`, `hideRows()`, `showRows()`
39+
- new action: `toggleVisibility`
40+
- new `hidden` property for the *cols* and *rows* configs of the *sheets* object of the `parse()` method
41+
- Working with formulas:
42+
- a popup with descriptions for formulas is added
43+
- a new locale: `formulas` is added
44+
- File import:
45+
- a new [`afterDataLoaded`](api/spreadsheet_afterdataloaded_event.md) event is added
46+
47+
### Fixes
48+
49+
- The issue with sorting
50+
- The issue with the filter shifting to a new column
51+
- The error that occurred on blocking a sheet adding with the "addSheet" action
52+
- The issue with filtering blank cells
53+
- The problem with editing a large spanned table
54+
- The error that occurred on undoing an action in a cell
55+
- The error that occurred on entering/editing a cell with the IF formula
56+
- Th script error that occurred after cutting and pasting a link
57+
- The issue with changing the text alignment during export/import of an .xlsx file
58+
- The issue with Spreadsheet losing focus after some actions
59+
- Performance improvements
60+
1161
## Version 5.1.8
1262

1363
Released on December 10, 2024

sidebars.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,7 @@ module.exports = {
102102
"api/spreadsheet_afterclear_event",
103103
"api/spreadsheet_aftercolumnadd_event",
104104
"api/spreadsheet_aftercolumndelete_event",
105+
"api/spreadsheet_afterdataloaded_event",
105106
"api/spreadsheet_aftereditend_event",
106107
"api/spreadsheet_aftereditstart_event",
107108
"api/spreadsheet_afterfocusset_event",

0 commit comments

Comments
 (0)