Migration to Latest Webix Version

Webix 7.4 -> 8.0

Scheduler v7.4

Starting from version 8.0 Scheduler has new API. There is no way easy way to migrate code to the new version, so if you have used the older version of Scheduler the best strategy will be to not update it immediately. We will continue to provide critical bug fixes for version 7.4.

Styling header cells in Datatable

Starting from version 8.0 Webix Datatable uses DIVs instead of HTML table and its elements. Use the .webix_hcolumn class to style the whole column and the .webix_hcell one to style a single cell.

Styling cells before 8.0:

.my_style .webix_ss_header td {
    border-right: 1px solid #009966;

Styling cells after 8.0:

.my_style .webix_ss_header .webix_hcell {
    border-right: 1px solid #009966;

Creating custom header content in Datatable

Starting from Webix 8.0 Datatable header does not include an HTML table for performance reasons. Due to it, header cells are no longer nested into TD elements, so you do not need to access them via node.firstChild while creating custom filters.

Creating custom header content before 8.0:

webix.ui.datafilter.avgColumn = webix.extend({
  refresh:function(master, node, value){
   // calculate result
    node.firstChild.innerHTML = Math.round(result/master.count());
}, webix.ui.datafilter.summColumn);

Creating custom header content after 8.0:

webix.ui.datafilter.avgColumn = webix.extend({
  refresh:function(master, node, value){
   // calculate result
    node.innerHTML = Math.round(result/master.count());
}, webix.ui.datafilter.summColumn);

New default palette in Colorboard

Starting from Webix 8.0 Colorboard uses a new material palette by default. If you want to keep the old palette, set the type property to "classic":

  view: "colorboard",
  type: "classic"

Webix 7.2 -> 7.3

Export toExcel

API for multiple view export toExcel was changed:

Multiple view export before 7.3:

  [$$("table"), $$("list")],
  { sheets:["Big data", "Small data"]}

Multiple view export after 7.3:

  {id:"table", options: {name:"Big data"}},
  {id:"list", options: {name:"Small data"}}

Spreadsheet LINK function

The Spreadsheet LINK function was renamed to HYPERLINK

Function name before 7.3:


Function name after 7.3:


Spreadsheet Filter Methods

  • the method addFilter() was replaced with setCellFilter()
  • the method removeFilter() was renamed to removeFilters()

Methods before 7.3:


Methods after 7.3:

$$("ssheet").setCellFilter(rowId,columnId, filterObject);

Webix 7.1 -> 7.2

File Manager v7.1

Starting from version 7.2 File Manager has a new API. There is no way easy way to migrate code to the new version, so if you have used the older version of File Manager the best strategy will be to not update it. We will continue to provide bug-fixes for version 7.1.

Renamed property of the Filter widget

Starts from 7.2 the mode property defines the type of data to which the filter will be applied to:

  mode:"text" //was type:"text"

New SpreadSheet Filter

The Richselect cell filter is no longer available. Starting from 7.2 SpreadSheet it is substituted by the new filtering tool based on the Filter widget.

Webix 7.0 -> 7.1

Mentioned users data in Comments

The loaded or parsed comments data in the Comments widget must be @"Some Name" format. In newly added comments you do not have to add "" symbols because they are added on their own.

Mentionings in the data before 7.1:

"Hi, @Corvo Attano. Let's just do what we are supposed to do."

Mentionings in the data after 7.1:

"Hi, @\"Corvo Attano\". Let's just do what we are supposed to do."

Webix 6.4 -> 7.0

Deprecated API

We removed some outdated and rarely used API from the library:

  • Initialization from XML and HTML
  • Rarely used proxies (offline, local, cache, connector, indexbd, faye)
  • ActiveContent
  • Flash Upload driver
  • Tabbar History Tracking
  • Some button types (form, danger, htmlbutton)
  • Some helpers (webix.PowerArray, webix.jsonp, webix.ui.each, webix.ui.hasMethod)

Check the related article for more details.
Note that the old solutions will still be available on GitHub.

Webix 6.2 -> 6.3

Arrow Buttons

Arrow buttons with type:"next" and type:"prev" settings have been completely removed from Webix. Now they look like standard rectangular buttons.

Other Buttons (these changes are optional)

Also, the total number of button types have been reduced to separate their contents and coloring. Follow the link for the new button typing and styling scheme.

Deprecated CSS types and their new CSS rules (optional for Webix 6.3):

  • type:"form" => css:"webix_primary"
  • type:"danger" => css:"webix_danger"

Deprecated icon/image types and their new settings (optional for Webix 6.3):

  • type:"imageButton" => type:"image"
  • type:"imageButtonTop" => type:"imageTop"
  • type:"iconButton" => type:"icon"
  • type:"iconButtonTop" => type:"iconTop"

By default, image and icon buttons are now colored like standard buttons. To get back to the transparent background, set:

  • type:"image", css:"webix_transparent"
  • type:"imageTop", css:"webix_transparent"
  • type:"icon", css:"webix_transparent"
  • type:"iconTop", css:"webix_transparent"

The deprecated types will be valid till Webix 7.0, and after the release they will be removed permanently.

Webix 6.1 -> 6.2


1. The sync proxy was removed. Instead of it, you can create a sync request and parse the response by API:

var xhr = webix.ajax().sync().get("data.php");

2. The proxy.load() method has only two parameters:

  • view
  • params

callback was removed from the parameters.

If you return a promise of data or static data within this method, it will be directly parsed to the component:

webix.proxy.loading = {
    load(view, params){
        return webix.ajax().post("/server/data",{ books:params.books });

3. The proxy.save() method has only three parameters:

  • view,
  • params,
  • dp.

callback was removed from the parameters.

If you return a promise of data or static data within this method, it will be directly applied to the component:

webix.proxy.saving = {
    save(view, params, dp){
        var id = params.data.id;
        if (params.operation == "insert")
            return webix.ajax().post("/samples/server/films", params.data);
        // ... other operations

4. The proxy.saveAll() method has three parameters:

  • view,
  • updates,
  • dp.

callback was removed from the parameters.

If you return a promise of data or static data within this method, it will be directly applied to the component:

webix.proxy.saveall = {  
    saveAll:function(view, updates, dp){
        //updates - the array of changed records
        return webix.ajax().post(this.source, { data:updates });


1. Callback of webix.ajax methods cannot be an array;

2. Loading error events:

$$("list").attachEvent("onLoadError", function(xhr){
    //xhr - xmlHttpRequest object
    // handler code here

and webix.onLoadError has XHR and view as parameters:

webix.attachEvent("onLoadError", function(xhr,view){
    //xhr - xmlHttpRequest object
    //view - component which triggered error
    // ... custom code ...

Comments Widget

  • The format property of the Comments widget was removed. Its functionality is replaced by scheme, where you can change the date parsing:
        $init:(obj) => {
                obj.date = webix.i18n.parseFormatDate(obj.date);
    // ...data and config

Default Date Parsing

  • parseFormat includes seconds by default: "%Y-%m-%d "%H:%i:%s".


Webix 5.4 -> 6.0

Naming of source code files

The source code files are renamed: webix.js to webix.min.js and webix_debug.js to webix.js (which includes debugging options).

Webix skins usage

The list of Webix skins included into the package has been reduced and the default skin is changed to new Material one. There are 5 skins in the library: Material (default), Mini (a compact version of Material), Flat, Compact (a compact version of Flat), and Contrast.

Default and custom icons

Font Awesome icons are no longer used by default. The library gets its own sets of icons which depend on the used skin: Material and Mini skins use Material Design icons, while Flat, Compact and Contrast use Font Awesome 5 icons. The package now contains only icons used by widgets. The mechanism of using custom icons has also changed. Check the related article.

Usage of Webix globals

After release of version 6.0, Webix globals migrated to the env object. Thus, you need to address to them as:

//webix.cdn = "//cdn.webix.com";
//webix.ui.zIndexBase = 200;
//webix.ui.scrollSize = 17;
webix.env.cdn = "//cdn.webix.com";
webix.env.scrollSize = 17;
webix.env.zIndexBase = 200;

Usage of the debug version

webix_debug.js has been removed. All the necessary sources for debugging are included into the webix.js file. While debugging pay attention to the following changes:

  • instead of using the debug options as:
webix.debug = true;
webix.debug_size = true;

You should set them like this:

webix.debug({ events: true, size:true });

All other options have been removed due to inconsistency.

Integration with third-party components

Starting from version 6.0, third-party libraries are not automatically loaded via webix.codebase = "./";. You can still set path to sources of the necessary third-party component on CDN. Actually, there are three ways to do that:

  • via the cdn property in the view configuration. This way allows setting path to the particular version of the necessary library or to the local CDN;
  • not setting any paths at all. In this case either the official CDN of the component or the global cdnjs (if the source of the component is available there) will be used;
  • by directly including all the source files of the component on a page. In this case you should set the cdn property to false to avoid possible collisions with the component version included by default.

How to get updated integration extensions

To use the latest version of integration extensions, you can choose one of two ways:

  • specify link to the necessary component on CDN
<script src="https://cdn.webix.com/components/edge/ckeditor/ckeditor.js"></script>
  • get the corresponding integration extension from Github

Pager localization

The way of applying a custom locale to the pager buttons has changed. Starting from version 6.0, locales are set for the pager via the i18n object:

webix.i18n.pager = {
    first: "First",
    last: "Last",
    next: "Next",
    prev: "Prev"

Webix 5.1 -> 5.2

Important updates in the Pivot complex widget:

  • the separateLabel property was added to separate the label from the filter input and allow writing labels of any size. The option is enabled by default. To restore the previous filter configuration, set the separateLabel property to false.
  • The chart property is added into the default locale. It is used to set the label for the "Chart" section for the Pivot Chart configuration window.

Take a look at Pivot What's New for version 5.2.

Webix 4.4 -> 5.0

Change in the DataTable hideColumn API

The order of arguments of the hideColumn method of DataTable have changed. Now, the method takes 4 arguments: id, options, refresh and mode.

The new second argument, options, regulates the behavior of spanned columns related to the column which is being hidden: if needed, they can also be hidden with the master column.

Update in the Slider Functionality

With the version 5.0 the title of Webix Slider becomes movable by default. You can change this behavior and make the title fixed via the related moveTitle property.

Webix 4.3 -> 4.4

To avoid ambiguity, Google-map has been completely removed from the Components repository, but its advanced version stays in package and is available in both GPL and PRO editions.

Webix 4.2 -> 4.3

Angular, Backbone and JQuery integration adapters are no longer included into the main source of the Webix library. They are now kept separately on GitHub as all other integration solutions.

Read more about the possibilities of integrating Webix with third-party frameworks in the related section of documentation.

Webix 4.1 -> 4.2

Getting integrated object of third-party components

The possibility of getting an integrated object of third-party components like Yandex Maps, CodeMirror editor, Sigma chart and GoogleMap (in the main package) has radically changed.

Earlier you could either access the editor or map as follows:

var editor = codemirror.editor; 
var map = yandexmap.map;

or use the corresponding getSome() method of the component:

var editor = codemirror.getEditor(); 
var map = yandexmap.getMap();

From version 4.2 you must use the getSome() method as the only option.

Also, if you need to access the map, chart or scheduler immediately after it has been loaded and initialized, you can pass the true parameter to the method:

codemirror.getEditor(true).then(function(editor){ /* logic */ });

The list of the affected components is the following:

  • .getMap() (Yandex Maps, Here Maps, OpenStreet Maps, GoogleMap widget (in the main package)
  • .getEditor() (Ace Editor, NicEdit, CKEditor, Code Mirror, TinyMCE)
  • .getChart() (RaphaelJS, FusionCharts, SigmaJS, JustGage)
  • .getScheduler() (DHTMLX Scheduler)
  • .getStage() (Konva)

NokiaMap is renamed to HereMap

One of the third-party components has changed its name. Now we have an updated HereMap instead of the NokiaMap.

webix.ui({ view:"here-map", id:"map" });

The code for the updated component is located by the link.

Webix 4.0 -> 4.1

There are important updates for the Pivot complex widget:

  • filter Date values are converted into timestamp
  • The Multiselect filter used for filtering is now replaced with the Multicombo filter

Webix 3.4 -> 4.0

Loading files into PDF Viewer

The mechanism of loading PDF files into the PDFViewer component is modified. From 4.0 PDF Viewer uses Webix data loader combined with "binary" proxy, which allows using standard loading events.


Tab navigation

Tab navigation over Webix application is switched on by default. It cannot be controlled by UIManager any more.

Earlier, it was possible to switch on tab navigation by webix.UIManager.tabControl = true; code line while any widget could be excluded from tab order by setting tabFocus to false. From Webix 4.0 this functionality deprecates.

From 4.0 all widgets and their active areas are in the tab order and cannot be excluded from it. It was done with accessibility in mind.

Webix 3.3 -> 3.4

Data filtering in bound components: selected value for a master view should be set after data is loaded

Webix 3.2 -> 3.3

Data Export to PDF

In version 3.3 the header property is introduced in PDF export config. It is used to configure the look of header of an exported table.

To avoid ambiguity, the header and headerImage properties related to the document's header were renamed:

  • header is replaced with docHeader
  • headerImage is replaced with docHeaderImage

Changes in the webix.event helper

The context parameter of the webix.event helper was modified. Earlier it indicated an object to which this keyword refers (master). Now it awaits a context object with bind, capture and id properties.

Changes in the collectValues method

The collectValues method of the DataTable and TreeTable doesn't return an empty option any more.

The method is used by select filters of the above mentioned components to collect the array of options for them. Prior to 3.3 it returned the unique set of options plus an empty option to clear the filter's value.

Now its result doesn't include an empty option while the filters add this option themselves.

Webix 3.1 -> 3.2

Export API

Old export functionality of Datatable and Pivot is removed in version 3.2.

The methods exportToPDF() and exportToExcel() of Datatable and the methods toPDF() and toExcel() of Pivot are no longer available. You should use common methods toPDF and toExcel for these components instead:


Loading Excel files into data components

The "excel" proxy was removed.

Instead, the "binary" proxy object is used to load files like Excel into data components and the "excel" datatype is introduced for parsing Excel files. It is the default data type for Excel Viewer.

    url: "binary->../common/test.xlsx@Data[0-10]",

Webix 3.0 -> 3.1

Form validation

Starting from version 3.1, form.validate() will not validate disabled fields. If you want to preserve the old behavior, use this command like next

form.validate({ disabled:true });

Webix 2.x -> 3.0

Strict JSON parsing

Starting from the version 3.0 strict JSON parsing rules are applied. It means that Webix won't process invalid JSON data.

Export API

Version 3.0 includes new export API. Old export functionality of datatable is deprecated and will be fully removed in version 3.2

Server-side response for Uploader

The expected format of JSON string returned by the uploading script has changed. Now the script should respond with "error" status to indicate that uploading ended with error:

echo "{ status:'error' }";

Any other response, e.g. "{status:'server'}" means that uploading ended successfully.

Webix 2.2 -> 2.3

Parse format

In version 2.2 the default parseFormat was "%Y-%m-%d" while from version 2.3 it becomes "%Y-%m-%d %H:%i".

It can be altered within current locale as:

webix.i18n.parseFormat = "%Y-%m-%d";

Sizing in layout

In Webix 2.2 layout height and width were including padding and margin

//in Webix 2.2 will result in 140px height ( 20 + 100 + 20)
//in Webix 2.3 will result in 100px height
    view:"layout", padding:20, height:100, rows:[{}]

In webix 2.3 size of layout is a full size, that already includes padding and margin. The same code as above one will result in layout with 100px height. If you prefer the old behavior, you can move height settings in the inner view

//in both Webix 2.2 and Webix 2.3 will result in 140px height 
    view:"layout", padding:20, rows:[{ height:100 }]

Webix 2.1 -> 2.2

Templates in datatable

In version 2.1 you could use "#value#" in the column's template to apply the same property that was defined as the column's id.

Version 2.2 will support this feature as well, but you need to use "#$value#" instead of the old syntax. It does affect only the "#value#" keyword, all other templates ("#some#") will work without any changes.


ajax.header method was deprecated in favor of ajax.headers


Starting from Webix 2.2, List, DataView and Template view, width and height of container will include the width of scrollbar. It means that the resulting view will take exactly the same size that was defined for it (previously, it was the defined as:"size + size of scrollbar").

Webix 1.x -> 2.0

Number formating

"decimalDelimeter" property in number format was changed to "decimalDelimiter"

Back to top