DHTMLX Docs & Samples Explorer

Data loading

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
    },datatype);

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

JSON

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

where some.json contains value similar to the next

[{
 "id":"1",
  "Package":"acx100-source",
   "Version":"20080210-1.1",
    "Maintainer":"Stefano Canepa"
},{
 "id":"2",
  "Package":"alien-arena-browser",
   "Version":"7.0-1",
    "Maintainer":"Debian Games Team"
},{
 "id":"3",
  "Package":"alien-arena-server",
   "Version":"7.0-1",
    "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.

XML

    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.

<data>
	<item id="1">
		<Package><![CDATA[acx100-source]]></Package>
		<Version><![CDATA[20080210-1.1]]></Version>
		<Maintainer><![CDATA[Stefano Canepa]]></Maintainer>
	</item>
	<item id="2">
		<Package><![CDATA[alien-arena-browser]]></Package>
		<Version><![CDATA[7.0-1]]></Version>
		<Maintainer><![CDATA[Debian Games Team]]></Maintainer>
	</item>
</data>

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

HTML

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");
<ul>
<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>
</ul>

The key-tag can be changed by using

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

CSV

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= ",";

JSARRAY

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"]]

Parsing

When data already available on client side , you can use

     grid.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
    view.parse([{
 "id":"1",
  "Package":"acx100-source",
   "Version":"20080210-1.1",
    "Maintainer":"Stefano Canepa"
},{
 "id":"2",
  "Package":"alien-arena-browser",
   "Version":"7.0-1",
    "Maintainer":"Debian Games Team"
},{
 "id":"3",
  "Package":"alien-arena-server",
   "Version":"7.0-1",
    "Maintainer":"Debian Games Team"
}],"json");
HTML
    view.parse("id_of_html_element","html");
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.

dhtmlx.dataDriver.mytype=dhtmlx.extend({},dhtmlx.dataDriver.jsarray,{
            getDetails:function(data){
               var result = {};
               result.id = data[0];
               result.Package       = data[1];
               result.Version       = data[2];
               result.Maintainer    = data[3];   
               return result;
            }
})
 
view.load(url, "mytype");