Skip to content

[add] what's new and migration guide for v5.2, afterDataLoaded event page #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
May 15, 2025
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
1 change: 1 addition & 0 deletions docs/api/api_overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ Parameters:
| [](api/spreadsheet_afterclear_event.md) | @getshort(api/spreadsheet_afterclear_event.md) |
| [](api/spreadsheet_aftercolumnadd_event.md) | @getshort(api/spreadsheet_aftercolumnadd_event.md) |
| [](api/spreadsheet_aftercolumndelete_event.md) | @getshort(api/spreadsheet_aftercolumndelete_event.md) |
| [](api/spreadsheet_afterdataloaded_event.md) | @getshort(api/spreadsheet_afterdataloaded_event.md) |
| [](api/spreadsheet_aftereditend_event.md) | @getshort(api/spreadsheet_aftereditend_event.md) |
| [](api/spreadsheet_aftereditstart_event.md) | @getshort(api/spreadsheet_aftereditstart_event.md) |
| [](api/spreadsheet_afterfocusset_event.md) | @getshort(api/spreadsheet_afterfocusset_event.md) |
Expand Down
1 change: 1 addition & 0 deletions docs/api/overview/events_overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ description: You can have an Events overview of the DHTMLX JavaScript Spreadshee
| [](../spreadsheet_afterclear_event.md) | @getshort(../spreadsheet_afterclear_event.md) |
| [](../spreadsheet_aftercolumnadd_event.md) | @getshort(../spreadsheet_aftercolumnadd_event.md) |
| [](../spreadsheet_aftercolumndelete_event.md) | @getshort(../spreadsheet_aftercolumndelete_event.md) |
| [](../spreadsheet_afterdataloaded_event.md) | @getshort(../spreadsheet_afterdataloaded_event.md) |
| [](../spreadsheet_aftereditend_event.md) | @getshort(../spreadsheet_aftereditend_event.md) |
| [](../spreadsheet_aftereditstart_event.md) | @getshort(../spreadsheet_aftereditstart_event.md) |
| [](../spreadsheet_afterfocusset_event.md) | @getshort(../spreadsheet_afterfocusset_event.md) |
Expand Down
40 changes: 40 additions & 0 deletions docs/api/spreadsheet_afterdataloaded_event.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
---
sidebar_label: afterDataLoaded
title: afterDataLoaded event
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.
---

# afterDataLoaded

### Description

@short: Fires after data loading is complete

### Usage

~~~jsx
afterColumnAdd: (cell: string) => void;
~~~

### Example

~~~jsx
const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {});
spreadsheet.parse(data);

// subscribe to the "afterDataLoaded" event
spreadsheet.events.on("afterDataLoaded", () => {
dhx.message({
text: "Data is successfully loaded into Spreadsheet!",
css: "dhx_message--success",
expire: 5000
});
});
~~~

**Change log:** Added in v5.2

**Related article:** [Event handling](handling_events.md)

**Related sample:** [Spreadsheet. Data loaded event](https://snippet.dhtmlx.com/vxr7amz6)

77 changes: 77 additions & 0 deletions docs/migration.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,83 @@ description: You can learn about migration in the documentation of the DHTMLX Ja

# Migration to newer versions

## 5.1 -> 5.2

### toolbarBlocks

In v5.2 the [toolbarBlocks](api/spreadsheet_toolbarblocks_config.md) property is modified in the following way:

- 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)
- the *"actions"* toolbar block is extended with the *Insert link* button (previously, it was in the *"helpers"* block)
- the *"helpers"* toolbar block is renamed to *"help"* and isn't included in the default set of toolbar options

~~~jsx title="Before v5.2" {9}
// default configuration
toolbarBlocks: [
"undo",
"colors",
"decoration",
"align",
"format",
"actions",
"helpers"
]
~~~

~~~jsx title="From v5.2" {7}
// default configuration
toolbarBlocks: [
"undo",
"colors",
"decoration",
"align",
"cell",
"format",
"actions"
]
~~~

### Freezing/unfreezing functionality

In v5.2 the way of freezing/unfreezing columns and rows has been modified:

- the `leftSplit` and `topSplit` configuration properties that have been used for fixing columns and rows were deprecated
- new API methods `freezeCols()`, `unfreezeCols()`, `freezeRows()`, `unfreezeRows()` and a new action `toggleFreeze` were introduced

~~~jsx title="Before v5.0"
const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
topSplit: 1, // the number of row to "freeze"
leftSplit: 1 // the number of columns to "freeze"
});
~~~

~~~jsx title="From v5.0"
// for rows
spreadsheet.freezeRows("B2"); // the rows up to the second row will be fixed
spreadsheet.freezeRows("sheet2!B2"); // the rows up to the second row in "sheet2" will be fixed
spreadsheet.unfreezeRows(); // fixed rows in the current sheet will be unfrozen
spreadsheet.unfreezeRows("sheet2!A1"); // fixed rows in "sheet2" will be unfrozen

// for columns
spreadsheet.freezeCols("B2"); // the columns up to the "B" column will be fixed
spreadsheet.freezeCols("sheet2!B2"); // the columns up to the "B" column in "sheet2" will be fixed
spreadsheet.unfreezeCols(); // fixed columns in the current sheet will be unfrozen
spreadsheet.unfreezeCols("sheet2!A1"); // fixed columns in "sheet2" will be unfrozen

// using the `toggleFreeze` action with the beforeAction/afterAction events
spreadsheet.events.on("afterAction", (actionName, config) => {
if (actionName === "toggleFreeze") {
console.log(actionName, config);
}
});

spreadsheet.events.on("beforeAction", (actionName, config) => {
if (actionName === "toggleFreeze") {
console.log(actionName, config);
}
});
~~~

## 4.3 -> 5.0

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.
Expand Down
50 changes: 50 additions & 0 deletions docs/whats_new.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,56 @@ description: You can learn what's new in the DHTMLX JavaScript Spreadsheet libra

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

## Version 5.2

Released on May X, 2025

[Review of release on the blog](https://dhtmlx.com/blog/dhtmlx-spreadsheet-5-2/)

### Breaking changes

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.

### Deprecated

- The `leftSplit` and `topSplit` configuration properties are removed

### New functionality

- Editing cells:
- the ability to create a styled border for a group of cells via UI
- Freezing/unfreezing columns/rows:
- the ability to freeze/unfreeze columns and rows via UI
- the ability to freeze/unfreeze columns and rows via API
- new methods: `freezeCols()`, `unfreezeCols()`, `freezeRows()`, `unfreezeRows()`
- new action: `toggleFreeze`
- new `freeze` property for the *sheets* object of the `parse()` method
- Hiding/showing columns/rows:
- the ability to hide/show columns and rows via UI
- the ability to hide/show columns and rows via API
- new methods: `hideCols()`, `showCols()`, `hideRows()`, `showRows()`
- new action: `toggleVisibility`
- new `hidden` property for the *cols* and *rows* configs of the *sheets* object of the `parse()` method
- Working with formulas:
- a popup with descriptions for formulas is added
- a new locale: `formulas` is added
- File import:
- a new [`afterDataLoaded`](api/spreadsheet_afterdataloaded_event.md) event is added

### Fixes

- The issue with sorting
- The issue with the filter shifting to a new column
- The error that occurred on blocking a sheet adding with the "addSheet" action
- The issue with filtering blank cells
- The problem with editing a large spanned table
- The error that occurred on undoing an action in a cell
- The error that occurred on entering/editing a cell with the IF formula
- Th script error that occurred after cutting and pasting a link
- The issue with changing the text alignment during export/import of an .xlsx file
- The issue with Spreadsheet losing focus after some actions
- Performance improvements

## Version 5.1.8

Released on December 10, 2024
Expand Down
1 change: 1 addition & 0 deletions sidebars.js
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@ module.exports = {
"api/spreadsheet_afterclear_event",
"api/spreadsheet_aftercolumnadd_event",
"api/spreadsheet_aftercolumndelete_event",
"api/spreadsheet_afterdataloaded_event",
"api/spreadsheet_aftereditend_event",
"api/spreadsheet_aftereditstart_event",
"api/spreadsheet_afterfocusset_event",
Expand Down