Customizing Data Types

By default, JSON children are stored in the data property object. XML records (both parents and children) are introduced by an item tag. Any custom tags will do as well, provided that you create a custom data format based on a default one.

Parsing logic for each of the supported data types is stored in the webix.DataDriver object (webix.DataDriver.json, webix.DataDriver.xml, etc.). You can change default tags in two ways:

• change the logic of the existing data driver - described here. All incoming data of the state type will be processed according to the new logic.
• copy the existing driver object and create a custom one on the base of it. The new processing logic will be applied only to data with the new data format you specify as datatype. Described below.

Custom Tags for JSON

By default, child items in JSON hierarchical data are stored in data:

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" }
    ]}
]

If child items in your data are stored under some other tag, follow these steps.

1. Declaring the new format:

Create your custom format on the base of the default:

var myjson = webix.DataDriver.myjson = webix.copy(webix.DataDriver.json);

2. Changing tags:

Now you can define static tags for all child collections from your data:

myjson.child = "parts";

If you need different tags for children of different levels, you can define dynamic tags. For example, elements of the first nesting level can be stored in parts, while the second-level ones can be stored in pages.

myjson.child = function(obj){
    if (obj.$level == 1)
        return obj.parts;
    if (obj.$level == 2)
        return obj.pages;
};

Now a data component will accept the data like these:

[
    { 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" }
    ]}
]

webix.ui({
    view:"treetable",
    // config
    datatype:"myjson"
});

Related sample:  Tree: JSON Dataset

A Note for Dynamically Defined Tags

Unlike static tags, dynamic custom fields are not removed from data items as the field name varies. If you need to remove them, do it explicitly in the child method:

myjson.child = function(obj) {
    var data;
    if (obj.$level == 1) {
        data = obj.parts;
        delete obj.parts;
    }
    if (obj.$level == 2) {
        data = obj.pages;
        delete obj.pages;
    }
    return data;
}

Custom Tags for XML

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>

webix.ui({
    view:"treetable",
    // config
    datatype:"myxml"
});

Related sample:  Tree: XML Dataset

Customizing CSV Parsing Logic

Global changes

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.

Creating custom datatype

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