Providing Configuration as Part of Data

You can load not only data but also DataGrid 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 DataGrid as shown below:

webix.grid({
  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

webix.grid({
  "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 DataGrid as shown below:

webix.grid({
  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>

Loading Configuration from a Separate File

Configuring from the server side

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

fetch("data/config.json").then(x => x.json()).then(data => {
  var config = data.json();
  webix.grid({
    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 DataGrid as shown below:

fetch("data/data-config.json").then(x => x.json()).then(data => {
  var obj = data.json();
  webix.grid({
    columns:obj.config,
    data:obj.rows
  });
});

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

'data-config.json' file

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