DHTMLX Docs & Samples Explorer

Index
dhtmlxDataView

## 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 has not names for columns, so they are autonamed , first column will be accessible as “data0”, 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 has not names for columns, so they are autonamed , first column will be accessible as “data0”, 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");