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});
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.
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);
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.
All methods that used to return any now return webix.obj/union type. The exact return type depends on the method.
While working with negative numbers via the corresponding methods, you need to provide the minusSign and minusPosition options in the configuration object passed to the methods as the second parameter to render negative numbers correctly.
The changes added more flexibility for rendering negative numbers: it is possible to add the minus sign before or after the number, or add symbols at both sides of the number. Check the example of using the format method:
const str1 = webix.Number.format(-10008.999, {
decimalSize: 2, groupSize: 3,
decimalDelimiter: ".", groupDelimiter: "'",
prefix: "abc", sufix: "dfg",
minusPosition:"after",
minusSign:"-",
priceTemplate:"${obj}"
});
// ->"abc$10'009.00-dfg"
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];
})
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.
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.
Starting from version 9.0 the join and action shapes are completely removed from the list of predefined shapes. Check the alternatives below:
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" }
});
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.
Starting from version 9.0 the following core API and one component are no longer available:
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.
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.
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
}
] */
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;
}
});
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
}
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.
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;
}
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);
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"
});
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"}}
]);
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")Methods before 7.3:
$$("ssheet").addFilter(rowId,columnId);
$$("ssheet").removeFilter();
Methods after 7.3:
$$("ssheet").setCellFilter(rowId,columnId, filterObject);
$$("ssheet").removeFilters();
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.
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"
});
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.
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."
We removed some outdated and rarely used API from the library:
Check the related article for more details.
Note that the old solutions will still be available on GitHub.
Arrow buttons with type:"next" and type:"prev" settings have been completely removed from Webix. Now they look like standard rectangular buttons.
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):
Deprecated icon/image types and their new settings (optional for Webix 6.3):
By default, image and icon buttons are now colored like standard buttons. To get back to the transparent background, set:
The deprecated types will be valid till Webix 7.0, and after the release they will be removed permanently.
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:
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:
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:
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 });
}
};
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 ...
});
webix.ui({
view:"comments",
scheme:{
$init:(obj) => {
if(obj.date)
obj.date = webix.i18n.parseFormatDate(obj.date);
}
},
// ...data and config
});
The source code files are renamed: webix.js to webix.min.js and webix_debug.js to webix.js (which includes debugging options).
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.
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.
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;
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:
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.
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:
To use the latest version of integration extensions, you can choose one of two ways:
<script src="https://cdn.webix.com/components/edge/ckeditor/ckeditor.js"></script>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"
};
Important updates in the Pivot complex widget:
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 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.
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.
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.
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.
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:
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.
There are important updates for the Pivot complex widget:
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 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.
Data filtering in bound components: selected value for a master view should be set after data are loaded
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:
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.
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.
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"));
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"
});
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 });
Starting from the version 3.0 strict JSON parsing rules are applied. It means that Webix won't process invalid JSON data.
Version 3.0 includes new export API. Old export functionality of datatable is deprecated and will be fully removed in version 3.2
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.
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();
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 }]
})
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").
"decimalDelimeter" property in number format was changed to "decimalDelimiter"
Back to top