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