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
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.
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
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";
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.
view.parse("<data><item id="1"><Package><![CDATA[acx100-source]]></Package><Version><![CDATA[20080210-1.1]]></Version><Maintainer><![CDATA[Stefano Canepa]]></Maintainer></item></data>");
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");
view.parse("id_of_html_element","html");
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");
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");
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");