To load data from some external file you can use the load command:
view.load(url, datatype);
It takes the path to the file and a necessary data type as parameters. Where a data type can be: "json","xml","jsarray","csv","html".
Note that:
JSON and XML are the fastest for loading and the only formats which support dynamic loading.
Loading is asynchronous, which means you need to catch the end of loading 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 the datatype parameter is skipped, the operation will try to process the incoming data as XML.
view.load("some.json", "json");
where some.json contains a value similar to the following one:
"some.json"
[{
"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"
}]
The object can contain any number of properties and all of them will be available in templates.
The "id" property will be used as the ID of object. If there is no such a property, the component will create random IDs for each object.
Related sample: Loading data from JSON file
view.load("some.xml", "xml");
There aren't any requirements for incoming XML (it can be in any format), all the top level tags will be converted into objects.
"some.xml"
<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 the top level and the second level tags don't matter.
The attributes of the top level tags (item in the snippet above) and values of nested tags will be available as properties in the template and for scripting.
If you want to process only the tags with specific names you can change the xpath used for data collecting:
dhtmlx.dataDriver.xml.records = "/data/item"; //select only item tags
Related sample: Loading data from xml
The processing works similar to that of XML, but will react only on <li> tags inside of the data (it makes no practical sense for loading from an url, exists just for consistence)
view.load("some.html", "html");
"some.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.md.tag = "DIV";
Related sample: Loading from html file
Data in CSV doesn't have names for columns, so they are autonamed: the first column is accessible as "data0", the second one - as "data1", etc. IDs are auto-generated.
view.load("some.csv", "csv");
"some.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 a row and a line separators as:
dhtmlx.dataDriver.csv.row = "\n";
dhtmlx.dataDriver.csv.cell= ",";
Related sample: Loading data from CSV file
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");
"some.js"
[["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"]]
Related sample: Loading data from JS array
When the data is already available on the client side, you can use the code:
view.parse(data, datatype);
Parsing is executed in sync way, so new items are ready for operations after the command execution.
Parsing can be used with all the 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>"
);
Related sample: Parse data from xml string
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");
Related sample: Parse data from JSON object
view.parse("id_of_html_element","html");
Related sample: Parse HTML list
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");
Related sample: Parse from CSV string
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");
Related sample: Parse JS array
If the above loading types are not enough, you can create a custom one.
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");
Related sample: Custom data type
Back to top