DHTMLX Docs & Samples Explorer

Data loading


To load data from some external file you can use load command

view.load(url, datatype);

Where datatype can be: “json”,”xml”,”jsarray”,”csv”,”html”

JSON and XML are faster for loading and only ones which supporting dynamic loading.

Loading is async, which means you need to catch loading-end before executing any commands against the data.

view.load(url, function(){
    alert("data is really loaded"); 
    //any operations with data can be placed here

if datatype parameter skipped, operation will try to process incoming data as XML


view.load("some.json", "json");

where some.json contains value similar to the next

  "Maintainer":"Stefano Canepa"
  "Maintainer":"Debian Games Team"
  "Maintainer":"Debian Games Team"

Object can contain any number of properties, all of them will be available in templates.

“id” property will be used as ID of object. If there is no such property then component will create random IDs for each object.


view.load("some.xml", "xml");

There is no any requirement for incoming XML (it can be in any format), all top level tags will be converted to objects.

	<item id="1">
		<Maintainer><![CDATA[Stefano Canepa]]></Maintainer>
	<item id="2">
		<Maintainer><![CDATA[Debian Games Team]]></Maintainer>

The names of top level and second level tags doesn't matter

Attributes of top level tags (item in above snippet) and values of nested tags will be available as properties in template and for scripting.

If you want to process only tags with specific names, you can change xpath used for data collecting

dhtmlx.dataDriver.xml.records = "/data/item"; //select only item tags


Processing works similar to the XML, but will react only on LI tags inside the data ( it has not practical sense for loading from url , exists just for consistence )

view.load("some.html", "html");
      <li id="1"   version="20080210-1.1" maintainer="Stefano Canepa">acx100-source</li>
      <li id="2"   version="7.0-1" maintainer="Debian Games Team">alien-arena-browser</li>
      <li id="3"   version="7.0-1" maintainer="Debian Games Team">alien-arena-server</li>

The key-tag can be changed by using

dhtmlx.dataDriver.html.tag = "DIV";


Data in CSV doesn't have names for columns, so they are autonamed: the first column is accessible as “data0”, the second as “data1” and etc. IDs are auto-generated.

view.load("some.csv", "csv");
"1", "acx100-source", "20080210-1.1", "Stefano Canepa"
"2", "alien-arena-browser", "7.0-1", "Debian Games Team"
"3", "alien-arena-server", "7.0-1", "Debian Games Team"

You can configure row and line separators as

dhtmlx.dataDriver.csv.row = "\n";
dhtmlx.dataDriver.csv.cell= ",";


Data in JS array doesn't have names for columns, so they are autonamed: the first column is accessible as “data0”, the second as “data1” and etc. IDs are auto-generated.

view.load("some.js", "jsarray");
[["1", "acx100-source", "20080210-1.1", "Stefano Canepa"],
["2", "alien-arena-browser", "7.0-1", "Debian Games Team"],
["3", "alien-arena-server", "7.0-1", "Debian Games Team"]]


When data already available on client side , you can use

view.parse(data, datatype);

Parsing executed in sync. way, so new items are ready for operations after command execution.

Parsing can be used with all above mentioned data types.

XML string
view.parse("<data><item id="1"><Package><![CDATA[acx100-source]]></Package><Version><![CDATA[20080210-1.1]]></Version><Maintainer><![CDATA[Stefano Canepa]]></Maintainer></item></data>");
JSON ojbect
  "Maintainer":"Stefano Canepa"
  "Maintainer":"Debian Games Team"
  "Maintainer":"Debian Games Team"
CSV string
view.parse('"1", "acx100-source", "20080210-1.1", "Stefano Canepa"\n"2", "alien-arena-browser", "7.0-1", "Debian Games Team"\n"3", "alien-arena-server", "7.0-1", "Debian Games Team"',"csv");
JavaScript array
view.parse([["1", "acx100-source", "20080210-1.1", "Stefano Canepa"],
["2", "alien-arena-browser", "7.0-1", "Debian Games Team"],
["3", "alien-arena-server", "7.0-1", "Debian Games Team"]],"jsarray");

Custom data types

If above loading types is not enough - you can create a custom ones.

               var result = {};
               result.id = data[0];
               result.Package       = data[1];
               result.Version       = data[2];
               result.Maintainer    = data[3];   
               return result;
view.load(url, "mytype");