External Configuration

You can load not only data but also DataTable configuration from an external file or the server side.

Providing configuration as part of data

Configuration from a JSON file

To load both data and configuration from JSON file, initialize DataTable as shown below:

webix.ui({
    view:"datatable",
    url:"data/data-config.json" //path to a json file. See the file contents below
});

The data-config.json file should have the following contents:

'data-config.json' file

{
    "config":{
        "columns":[
            { "id":"title", "header":"Film title", "width":200},
            { "id":"year", "header":"Released", "width":80},
            { "id":"votes", "header":"Votes", "width":100}
        ],
        "height":100,
        "autowidth":true
    },
    "data":[
        {"id":"1", "title":"The Shawshank Redemption", "year":"1994", "votes":"678790"},
        {"id":"2", "title":"The Godfather", "year":"1972", "votes":"511495"}
    ]
}

Configuration from an XML file

To load both data and configuration from XML file, initialize DataTable as shown below:

webix.ui({
    view:"datatable",
    url:"data/data-config.xml"// path to an XML file. See the file content below
});

The specified data-config.xml should have the following structure:

'data-config.xml' file

<?xml version='1.0' encoding='utf-8' ?>
<data>
    <config>
        <columns>
            <column ID="title"   header="Film title"  width="200"></column>
            <column ID="year"     header="Released"    width="80"></column>
            <column ID="votes"    header="Votes"       width="100"></column>
        </columns>
        <height>100</height>
        <autowidth>true</autowidth>
    </config>
    <item id='1' title='The Shawshank Redemption' year='1994' votes='678790'></item>
    <item id='2' title='The Godfather'            year='1972' votes='511495'></item>
</data>

Related sample:  Loading Configuration from External URL

Loading configuration from a separate file

Configuring from the server side

To load DataTable configuration from the server side, initialize DataTable as shown below:

webix.ajax("data/config.json").then(function(data){
    var config = data.json();
    webix.ui({
        view:"datatable",
        columns:config,
        data: [
            { id:1, title:"The Shawshank Redemption", year:1994,  votes:678790},
            { id:2, title:"The Godfather",            year:1972,  votes:511495}
        ]
    });
});

The specified config.json file should have the following structure:

'config.json' file

[
    { "id":"title", "header":"Film title",  "width":200},
    { "id":"year",  "header":"Released",   "width":80},
    { "id":"votes", "header":"Votes",       "width":100}
]

Configuring and populating from the server side

To load both data and configuration from the server side, initialize DataTable as shown below:

webix.ajax("data/data-config.json").then(function(data){
    var obj = data.json();
    webix.ui({
        view:"datatable",
        columns:obj.config,
        data:obj.rows
    });
});

The specified data-config.json file should have the following structure:

'data-config.json' file

{
    "config":[
        { "id":"title", "header":"Film title", "width":200},
        { "id":"year", "header":"Released", "width":80},
        { "id":"votes", "header":"Votes", "width":100}
    ],
    "rows":[
        {"id":"1", "title":"The Shawshank Redemption", "year":"1994", "votes":"678790"},
        {"id":"2", "title":"The Godfather", "year":"1972", "votes":"511495"}
    ]
}

Related sample:  Loading Configuration from Server Side

Back to top
If you have not checked yet, be sure to visit site of our main product Webix javascript ui framework and page of ui datagrid product.