External configuration

You have the possibility to load not only data but also DataTable configuration from 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:

dtable = new webix.ui({
    container:"box",
    view:"datatable",
    url:"data/data-config.json" //path to json file. See the file content below
});

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

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

dtable = new webix.ui({
    container:"box",
    view:"datatable",
    url:"data/data-config.xml"// path to 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", function(text){ 
    var config = webix.DataDriver.json.toObject(text);
    new webix.ui({
        container:"box",
        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", function(text){
    var obj = webix.DataDriver.json.toObject(text);
    new webix.ui({
        container:"box",
        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.