By default JSON children are stored in the data property object while XML records (both parents and children) are introduced by an item tag. However, any custom tags will do provided that you create a custom data format based on a prebuilt one.
Parsing logic for each of the supported data types is stored in the webix.DataDriver object (webix.DataDriver.json, webix.DataDriver, xml, etc.). There you can change default tags in two ways:
Default JSON data with 2 nesting levels
[
{ id:"1", open:true, value:"The Shawshank Redemption", data:[
{ id:"1.1", value:"Part 1" data:[
{id:"1.1.1", value:"Page 1"},
{id:"1.1.2", value:"Page 2"}
]},
{ id:"1.2", value:"Part 2" }
]},
{ id:"2", value:"The Godfather", data:[
{ id:"2.1", value:"Part 1" }
]}
]
Declaring the new format:
var myjson = webix.DataDriver.myjson = webix.copy(webix.DataDriver.json);
Changing tags:
Elements of the first nesting level will be stored in parts, while the second-level ones will be stored in pages.
myjson.child=function(obj){
if (obj.$level == 1)
return obj.parts;
if (obj.$level == 2)
return obj.pages;
};
//or, if you need the same property for all children
myjson.child="parts";
New Dataset:
[
{ id:"1", open:true, value:"The Shawshank Redemption", parts:[
{ id:"1.1", value:"Part 1" pages:[
{id:"1.1.1", value:"Page 1"},
{id:"1.1.2", value:"Page 2"}
]},
{ id:"1.2", value:"Part 2" }
]},
{ id:"2", value:"The Godfather", parts:[
{ id:"2.1", value:"Part 1" }
]}
]
Don't forget to specify the name of the new format as the datatype for your component!
webix.ui({
view:"treetable",
//..config
datatype:"myjson"
});
Related sample: Tree: JSON Dataset
Default XML Data
<data>
<item value='The Shawshank Redemption' open='1'>
<item value='part1'></item>
<item>Page 15</item>
<item>Page 16</item>
<item value='part2'></item>
</item>
</data>
Declaring the new format:
var myxml = webix.DataDriver.myxml = webix.copy(webix.DataDriver.xml);
Changing tags:
myxml.records = "/*/book";
myxml.child = function(obj){
if (obj.$level == 1)
return obj.part;
if (obj.$level == 2)
return obj.page;
}
//or, if you need the same property for all children
myxml.child="part";
New Dataset:
<data>
<book value='The Shawshank Redemption' open='1'>
<part value='part1'>
<page>Page 15</page>
<page>Page 16</page>
</part>
<part value='part2'></part>
</book>
</data>
Don't forget to specify the name of the new format as the datatype for your component!
webix.ui({
view:"treetable",
//..config
datatype:"myxml"
});
Related sample: Tree: XML Dataset
The default parsing logic of CSV data can be changed globally:
webix.DataDriver.csv.cell = "\t";
webix.DataDriver.csv.row = "|";
Now, all the components that use "csv" datatype, will be parsed according to new rules.
A custom datatype should be created in case you wish to apply it to one or several components while leaving the global CSV parsing unchanged.
webix.DataDriver.mycsv = webix.extend({
row:"|",
cell:"-"
}, webix.DataDriver.csv);
Now, you can use it in component instances:
var grid = webix.ui({
view:"datatype",
datatype:"mycsv",
data:'1-The Shawshank Redemption|2-The Godfather'
});
//or for loading data in that format
$$('mylist').load("data.csv","mycsv");
Back to top