Migration to Latest Webix Version

Webix 10.0 -> 10.1

Specifying an empty option in the SpreadSheet cell editor

You should explicitly specify whether to add an empty option to the cell editor using the empty property:

spreadsheet.setCellEditor(1, 1, 
  {editor: "ss_richselect", options: "B3:B7", empty: true});

Switching the axis lines on/off in Pivot Chart mode

Starting from the 10.1 version, you should use chart.xAxis.lines and chart.yAxis.lines to switch the axis lines on and off. chart.lines property will work only for Radar charts.

Also, from now on, you should use chart.labels instead of chart.pieInnerText.

Webix 9.4 -> 10.0

Styling formulas with HYPERLYNK

Starting from the 10.0 version, formulas with HYPERLYNK stopped supporting browser styling. If there are links in the data and you want to keep them colored and underlined, you need to add styles for them separately.

const baseStyle = ss.getStyle(1, 1);
const urlStyle = ss.addStyle({ color: "#0000ff", underline: "underline" }, baseStyle);
ss.setStyle(1, 1, urlStyle);

showMenuItem\hideMenuItem to change visibility of the menu items

The hideItem method of the menu was renamed to hideMenuItem. To revert hiding, use the new showMenuItem method instead of showItem. The showItem method should be used to scroll the component to make the specified item visible.

Updated Typescript definitions

All methods that used to return any now return webix.obj/union type. The exact return type depends on the method.

Webix 9.4.5 -> 9.4.6

Previously, the parameters of the sorting function were the values of the specified field for two objects.  Now they are the following: the data objects themselves and the name of the field that you want to sort by.

table.sort("#fieldName#", "desc", function(a, b, prop) {
   return a[prop] - b[prop];
})

Webix 9.0 -> 9.1

Starting from the 9.1 version, the onEditorChange event is triggered when you type something in the editor (native "oninput" event):

on: {
    onEditorChange: function(cellId, value) {
        webix.message(value);
    }
}

Previously, it relied on native "onchange" and didn't work correctly in some browsers as the editor was closed (destroyed) at the same moment. 

To track the end of editing, you need onBeforeEditStop/onAfterEditStop events.

Webix 8.4 -> 9.0

Shape definition in Diagram

Starting from version 9.0 the svg field of a shape is replaced with template. The property allows you to define new non-svg shapes and create shapes based on built-in templates.

Defining a shape before 9.0:

shapes: [
 {
  id: "laptop",
  svg: /* svg code */,
 },
 // ...
]

Defining a shape after 9.0:

shapes: [
  {
    id: "laptop",
    template: `<img class="custom-image" src="svg/laptop.svg"></img>`,
  },
  // ...
]

Read more details on template usage in this API article.

Some predefined Diagram shapes removed

Starting from version 9.0 the join and action shapes are completely removed from the list of predefined shapes. Check the alternatives below:

  • the action shape can be substituted with start/end or new rrect (rounded rectangle) shape
  • the join shape can be substituted with the rrect shape.

Using the action / join shape before 9.0:

webix.ui({
  view: "diagram",
  data: [/* item blocks */],
  item: {
    // all blocks will have this type
    type: "action" 
  }
});

Using the action / join shape after 9.0:

webix.ui({
  view: "diagram",
  data: [/* item blocks */],
  item: {
    // all blocks will have this type
    type: "rrect"   }
});

Styling Diagram blocks

Starting from 9.0 a diagram block serves as a container for its inner shape and text elements. It means that to style a block you actually need to style its shape and text inside by referring to them via the dedicated CSS classes.

Styling a block before 9.0:

[
  {
    id: "1",
    value: "Default",
    // styles for the whole block
    $css: "styles_for_block"
  }
]

Styling a block after 9.0:

[
  {
    id: "1",
    // adding a css class for a block
    $css: "styles_for_block"
  }
]

Defining rules for block shape and text:

/* styling the shape */
.styles_for_block .webix_diagram_shape_org { border-color: orange; }
 
/* styles for the inner text */
.styles_for_block .webix_diagram_text { font-weight: 500; }

If the block contains an SVG shape, you need to refer to this SVG element as:

.styles_for_block svg { stroke: orange; }

Read more on built-in block classes and styling via CSS rules in the dedicated article.

Deprecated API and component

Starting from version 9.0 the following core API and one component are no longer available:

Webix 8.3 -> 8.4

Fields in the Diagram shapes

Starting from version 8.4 the name field in Diagram shapes is replaced with id. The name field is still valid though it serves as a tooltip text when the correspodning shape is hovered over in Diagram Editor sets.

Adding a custom shape before 8.4:

webix.ui({
  view: "diagram",
  shapes: [
    {
      name: "internet",       svg: "svg_code",
    },
  ]
});

Adding a custom shape after 8.4:

webix.ui({
  view: "diagram",
  shapes: [
    {
      id: "internet",       svg: "svg_code",
      // now it is a tooltip text
      name: "This is Internet",
    },
  ]
});

The change also concerns the correspodning API methods.

Webix 8.2 -> 8.3

Export data to Excel

In case Webix CDN is included into a project via webix.env.cdn, you need to update the xlsx.core.styles.min.js file from this repository. The update is required starting from Webix 8.3.

Webix 8.1 -> 8.2

Ranges methods in Spreadsheet

Starting from version 8.2 the methods of the Spreadsheet ranges module (getCode, serialize and getRanges) return range with a sheet name.

Returned range data before 8.2:

$$("ssheet").ranges.getRanges("Sheet 1");
/* [
    {  
      "name": "MYRANGE",
      "range": "B4:C7"
    }
] */

Returned range data after 8.2:

$$("ssheet").ranges.getRanges("Sheet 1");
/* [
    {
      "name": "MYRANGE",
      "range": "Sheet1!B4:C7", // includes sheet name 
      "global": true
    }
] */

Defining holidays in Gantt

Starting from Webix 8.2 the isHoliday method of Local service is no longer available. Use the isHoliday config property instead.

Defining holidays before 8.2

class MyLocal extends gantt.services.Local {
  isHoliday(date) {
    // your code goes here
    return result;
  }
}

Defining holidays after 8.2

webix.ui({
  view: "gantt",
  url: "https://docs.webix.com/gantt-backend/",
  isHoliday: date => {
    // your code goes here
    return result;
  }
});

Reactive property in Gantt

Starting from version 8.2 the parent state property that stored ID of the parent task was renamed into edit and now reflects whether the right panel for editing is opened.

The state object of Gantt before 8.2:

{
  top: 60, left: 250,
  selected: 1.2, parent: "1",
  readonly: false,
  // other properties
}

The state object of Gantt after 8.2:

{
  top: 60, left: 250,
  selected: 1.2, edit: true,
  readonly: false,
  // other properties
}

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":

webix.ui({
  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:

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

Multiple view export after 7.3:

webix.toExcel([
  {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:

=LINK("https://webix.com")

Function name after 7.3:

=HYPERLINK("https://webix.com")

Spreadsheet Filter Methods

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

Methods before 7.3:

$$("ssheet").addFilter(rowId,columnId);
$$("ssheet").removeFilter();

Methods after 7.3:

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

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:

webix.ui({
  view:"filter",
  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

Proxies

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");
view.parse(xhr.responseText);

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 = {
    $proxy:true,
    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 = {
    $proxy:true,
    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 = {  
    $proxy:true, 
    saveAll:function(view, updates, dp){
        //updates - the array of changed records
        return webix.ajax().post(this.source, { data:updates });
    }
};

Loading

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:
webix.ui({
    view:"comments",
    scheme:{
        $init:(obj) => {
            if(obj.date)
                obj.date = webix.i18n.parseFormatDate(obj.date);
        }
    },
    // ...data and config
});

Default Date Parsing

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

Drag-n-Drop

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.

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.

webix.ui({
    view:"pdfviewer",
    url:"binary->files/WebixDocs.pdf"
});

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 are 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:

webix.toPDF($$("myPivot"));
 
webix.toExcel($$("myDatatable"));

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.

webix.ui({
    view:"spreadsheet",
    url: "binary->../common/test.xlsx@Data[0-10]",
    datatype:"excel"
});

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";
webix.i18n.setLocate();

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
webix.ui({
    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 
webix.ui({
    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

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

Sizing

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