Skip to main content

Migration to newer versions

4.3 -> 5.0​

In v5.0, the "help" option of the toolbarBlocks property is renamed to "helpers". Besides, the default set of options is extended by the new "actions" option.

Before v5.0
// default configuration 
toolbarBlocks: [
    "undo", 
    "colors", 
    "decoration", 
    "align", 
    "format", 
    "help"
]
From v5.0
// default configuration
toolbarBlocks: [
    "undo", 
    "colors", 
    "decoration", 
    "align", 
    "format", 
    "actions",
    "helpers"
]

4.2 -> 4.3​

info

Version 4.3 is the last version which provides IE support

Version 4.3 brings a new conception of tracking and handling the actions which are performed when you change something in the spreadsheet.

The new beforeAction and afterAction events will fire right before / after an action is executed and indicate which action has been performed. Thus, the new approach allows you to add the necessary logic for several actions at once via using only these two events. For instance:

spreadsheet.events.on("BeforeAction", (actionName, config) => {
    if (actionName === "sortCells") {
        console.log(actionName, config);
        return true;
    }
    if (actionName === "addColumn") {
        console.log(actionName, config);
        return false;
    },
    ...
});

spreadsheet.events.on("AfterAction", (actionName, config) => {
    if (actionName === "sortCells") {
        console.log(actionName, config)
    }
    if (actionName === "addColumn") {
        console.log(actionName, config);
    },
    ...
});

This way will reduce the size of your code because you won't need to add sets of paired before- and after- events for each separate action.

Still, the old approach continues working as before. For more details, check Spreadsheet actions.

info

At the moment, there is a set of events which must be used in an old way as they can't be replaced with any actions: beforeEditEnd, afterEditEnd, beforeEditStart, afterEditStart, beforeFocusSet, afterFocusSet, beforeSheetChange, afterSheetChange, groupFill.

4.1 -> 4.2​

In v4.2, the Align block of the Spreadsheet toolbar is divided into two sub-blocks: Horizontal align and Vertical align. Thus, the list of ids of the default controls of the Align block is changed and extended:

Before v4.2:

The Align block:

  • the Align left button (id: "align-left")
  • the Align center button (id: "align-center")
  • the Align right button (id: "align-right")

From v4.2:

The Horizontal align sub-block of the Align block:

  • the Left button (id: "halign-left")
  • the Center button (id: "halign-center")
  • the Right button (id: "halign-right")

The Vertical align sub-block of the Align block:

  • the Top button (id: "valign-top")
  • the Center button (id: "valign-center")
  • the Bottom button (id: "valign-bottom")

Localization​

Note, that the locale options for the Align block have been also updated:

Before v4.2:

const locale = {
    align: "Align",
    ...
}

From v4.2:

const locale = {
    halign: "Horizontal align",
    valign: "Vertical align",
    ...
}

2.1 -> 3.0​

This list of changes will help you to migrate from the previous version 2.1 where DHTMLX Spreadsheet was PHP-based to the totally renewed version 3.0 in which the component is totally built on JavaScript. Check the list below to explore all the changes.

note

The API of version 2.1 is still available, but it is incompatible with the API of version 3.0.

Changed API​

Removed API​

Spreadsheet class​

  • getCell
  • getCells
  • isCell
  • setSheetId

SpreadsheetCell​

calculategetCoordssetBgColor
existsgetValidatorsetBold
getAlignisBoldsetColor
getBgColorisIncorrectsetItalic
getCalculatedValueisItalicsetLocked
getColIndexparseStylesetValidator
getColNameserializeStyle
getColorsetAlign