jQuery TreeGrid Data Sources

TreeGrid Data Sources

The TreeGrid plugin can be bound to multiple types of data collections including arrays, xml, json, tsv, csv or remote data. To data bind the TreeGrid to a data source you need to set its source property to point to an instance of jqxDataAdapter.

The source object represents a set of key/value pairs.

url: A string containing the URL to which the request is sent.
data: Data to be sent to the server.
localData: data array or data string pointing to a local data source.
dataType: the data's type. Possible values: 'xml', 'json', 'jsonp', 'tsv', 'csv', 'local', 'array', 'observablearray'.
type: The type of request to make ("POST" or "GET"), default is "GET".
id: A string containing the Id data field.
root: A string describing where the data begins and all other loops begin from this element.
record: A string describing the information for a particular record.
dataFields: An array describing the fields in a particular record. Each data field must define the following members:
- name - A string containing the data field's name.
- type - A string containing the data field's type. Possible values: 'string', 'date', 'number', 'float', 'int', 'bool'.
- format(optional) - Sets the data formatting. By setting the format, the jqxDataAdapter plug-in will try to format the data before loading it.
  Example: { name: 'SubmitDate', type: 'date', format: "yyyy-MM-ddTHH:mm:ss-HH:mm" }
- columnDelimiter(optional) - specifies the column delimiter when the data source is 'tab' or 'csv'. The default value for 'tab' is '\t' and the default value for 'csv' is ','.
- rowDelimiter(optional) - specifies the rows delimiter when the data source is 'tab' or 'csv'. The default value is '\n'.
- mapChar(optional) - specifies the mapping char. By default it is '>'.
- map(optional) - A mapping to the data field.
pageNum - determines the initial page number when paging is enabled.
pageSize - determines the page size when paging is enabled.
pager - callback function called when the current page or page size is changed.
```
pager: function (pagenum, pagesize, oldpagenum) {
}
```
sortColumn - determines the initial sort column. The expected value is a data field name.
sortDirection - determines the sort order. The expected value is 'asc' for (A to Z) sorting or 'desc' for (Z to A) sorting.
sort - callback function called when the sort column or sort order is changed.
```
sort: function (column, direction) {
}
```
filter - callback function called when a filter is applied or removed.
```
filter: function(filters, recordsArray)
{
}
```

addRow - callback function, called when a new row is/are added. If multiple rows are added, the rowid and rowdata parameters are arrays of row ids and rows.

addRow: function (rowId, rowData, position, parentId, commit) {
    // synchronize with the server - send insert command
    // call commit with parameter true if the synchronization with the server is successful 
    //and with parameter false if the synchronization failed.
    commit(true);
}

deleteRow - callback function, called when a row is deleted. If multiple rows are deleted, the rowid parameter is an array of row ids.

deleteRow: function (rowId, commit) {
    // synchronize with the server - send delete command
    // call commit with parameter true if the synchronization with the server is successful 
    //and with parameter false if the synchronization failed.
    commit(true);
}

updateRow - callback function, called when a row is updated. If multiple rows are added, the rowid and rowdata parameters are arrays of row ids and rows.

updateRow: function (rowId, newRowData, commit) {
    // synchronize with the server - send update command
    // call commit with parameter true if the synchronization with the server is successful 
    // and with parameter false if the synchronization failed.
    commit(true);
}

formatData - Before the data is sent to the server, you can fully override it by using the formatData function of the source object. The result that the formatData function returns would be sent to the server.

var source ={    datatype: "jsonp",    datafields: [        { name: 'countryName' },        { name: 'name' },        { name: 'population', type: 'float' },        { name: 'continentCode' }    ],    url: "http://ws.geonames.org/searchJSON",    data: {        featureClass: "P",        style: "full",        maxRows: 50    },    formatdata: function (data) {        return "my data";    }};

contentType: Use this option, If you want to explicitly pass in a content-type. Default is "application/x-www-form-urlencoded".

If you bind the TreeGrid to a remote data source using asynchronous requests(that is by default when you set the source object's url member and you did not set the async field to false), then make sure that you call any method or set a property once the data is loaded. To ensure that you call your code when the TreeGrid is loaded with data, you can use the TreeGrid's ready callback function or bind to the bindingComplete event before the TreeGrid's initialization and add your code inside the event handler.

Example

The sample code below shows how to use the ready callback function:

var dataAdapter = new $.jqx.dataAdapter(source);

$("#treeGrid").jqxTreeGrid(
{
    width: 400,
    source: dataAdapter,
    ready: function () {
        $("#treeGrid").jqxTreeGrid('hideColumn', 'name');
    },
    columns: [
        { text: 'Name', dataField: 'name', width: 250 },
        { text: 'Beverage Type', dataField: 'type', width: 250 },
        { text: 'Calories', dataField: 'calories', width: 180 },
        { text: 'Total Fat', dataField: 'totalfat', width: 120 },
        { text: 'Protein', dataField: 'protein', width: 100}
    ]
});

Example

The sample code below shows how to use the bindingComplete event:

var dataAdapter = new $.jqx.dataAdapter(source);

$("#treeGrid").on('bindingComplete', function(event)
{
    $("#treeGrid").jqxTreeGrid('hideColumn', 'name');
});

$("#treeGrid").jqxTreeGrid(
{
    width: 400,
    source: dataAdapter,
    columns: [
        { text: 'Name', dataField: 'name', width: 250 },
        { text: 'Beverage Type', dataField: 'type', width: 250 },
        { text: 'Calories', dataField: 'calories', width: 180 },
        { text: 'Total Fat', dataField: 'totalfat', width: 120 },
        { text: 'Protein', dataField: 'protein', width: 100}
    ]
});

Data Binding to Nested JSON

In order to use a nested JSON as a data source, you will have to do the following:

1. Add the sub-collection to the dataFields array and set its type to "array". In the code below, the sub-collection's name is children.
2. Add a hierarchy object as a member of the source object.
3. Add a member called root to the hierarchy object.
4. Set the root to the sub-collection name.

var employees = [
    {
        "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way", "expanded": "true",
        children: [
        { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." },
        { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" },
        { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." },
        { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." },
        {
            "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill", "expanded": "true",
            children: [
                    { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." },
                    { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" },
                    { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." }
            ]
        }
        ]
    }
];

// prepare the data
var source =
{
    dataType: "json",
    dataFields: [
        { name: 'EmployeeID', type: 'number' },
        { name: 'FirstName', type: 'string' },
        { name: 'LastName', type: 'string' },
        { name: 'Country', type: 'string' },
        { name: 'City', type: 'string' },
        { name: 'Address', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'HireDate', type: 'date' },
        { name: 'children', type: 'array' },
        { name: 'expanded', type: 'bool' },
        { name: 'BirthDate', type: 'date' }
    ],
    hierarchy:
    {
        root: 'children'
    },
    id: 'EmployeeID',
    localData: employees
};
var dataAdapter = new $.jqx.dataAdapter(source);
// create Tree Grid
$("#treeGrid").jqxTreeGrid(
{
    width: 600,
    source: dataAdapter,
    sortable: true,
    columns: [
        { text: 'FirstName', dataField: 'FirstName', width: 150 },
        { text: 'LastName', dataField: 'LastName', width: 120 },
        { text: 'Title', dataField: 'Title', width: 160 },
        { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
        { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
        { text: 'Address', dataField: 'Address', width: 250 },
        { text: 'City', dataField: 'City', width: 120 },
        { text: 'Country', dataField: 'Country' }
    ]
});

Data Binding to JSON

Items in the data source must contain information on the parent-child relationships. Using this information, the TreeGrid will create records and organize them into a hierarchical structure. Information on parent-child relationships must be implemented in the data source by two data fields. One field must store the records' unique IDs. The other data field must contain the parent record's ID for each record. To specify these data fields for the jqxTreeGrid, use the keyDataField and parentDataField members of the hierarchy object.

1. Add a hierarchy object as a member of the source object.
2. Add a member called keyDataField and a member called parentDataField to the hierarchy object.
3. Set the keyDataField and parentDataField to point to the data fields in the data source that contain information about the parent-child relationships.

var employees = 
[
    {
        "EmployeeID": 1,
        "FirstName": "Nancy",
        "LastName": "Davolio",
        "ReportsTo": 2,
        "Country": "USA",
        "Title": "Sales Representative",
        "HireDate": "1992-05-01 00:00:00",
        "BirthDate": "1948-12-08 00:00:00",
        "City": "Seattle",
        "Address": "507 - 20th Ave. E.Apt. 2A"
    },
    {
        "EmployeeID": 2,
        "FirstName": "Andrew",
        "LastName": "Fuller",
        "ReportsTo": null,
        "Country": "USA",
        "Title": "Vice President, Sales",
        "HireDate": "1992-08-14 00:00:00",
        "BirthDate": "1952-02-19 00:00:00",
        "City": "Tacoma",
        "Address": "908 W. Capital Way"
    },
    {
        "EmployeeID": 3,
        "FirstName": "Janet",
        "LastName": "Leverling",
        "ReportsTo": 2,
        "Country": "USA",
        "Title": "Sales Representative",
        "HireDate": "1992-04-01 00:00:00",
        "BirthDate": "1963-08-30 00:00:00",
        "City": "Kirkland",
        "Address": "722 Moss Bay Blvd."
    },
    {
        "EmployeeID": 4,
        "FirstName": "Margaret",
        "LastName": "Peacock",
        "ReportsTo": 2,
        "Country": "USA",
        "Title": "Sales Representative",
        "HireDate": "1993-05-03 00:00:00",
        "BirthDate": "1937-09-19 00:00:00",
        "City": "Redmond",
        "Address": "4110 Old Redmond Rd."
    },
    {
        "EmployeeID": 5,
        "FirstName": "Steven",
        "LastName": "Buchanan",
        "ReportsTo": 2,
        "Country": "UK",
        "Title": "Sales Manager",
        "HireDate": "1993-10-17 00:00:00",
        "BirthDate": "1955-03-04 00:00:00",
        "City": "London",
        "Address": "14 Garrett Hill"
    },
    {
        "EmployeeID": 6,
        "FirstName": "Michael",
        "LastName": "Suyama",
        "ReportsTo": 5,
        "Country": "UK",
        "Title": "Sales Representative",
        "HireDate": "1993-10-17 00:00:00",
        "BirthDate": "1963-07-02 00:00:00",
        "City": "London",
        "Address": "Coventry House Miner Rd."
    },
    {
        "EmployeeID": 7,
        "FirstName": "Robert",
        "LastName": "King",
        "ReportsTo": 5,
        "Country": "UK",
        "Title": "Sales Representative",
        "HireDate": "1994-01-02 00:00:00",
        "BirthDate": "1960-05-29 00:00:00",
        "City": "London",
        "Address": "Edgeham Hollow Winchester Way"
    },
    {
        "EmployeeID": 8,
        "FirstName": "Laura",
        "LastName": "Callahan",
        "ReportsTo": 2,
        "Country": "USA",
        "Title": "Inside Sales Coordinator",
        "HireDate": "1994-03-05 00:00:00",
        "BirthDate": "1958-01-09 00:00:00",
        "City": "Seattle",
        "Address": "4726 - 11th Ave. N.E."
    },
    {
        "EmployeeID": 9,
        "FirstName": "Anne",
        "LastName": "Dodsworth",
        "ReportsTo": 5,
        "Country": "UK",
        "Title": "Sales Representative",
        "HireDate": "1994-11-15 00:00:00",
        "BirthDate": "1966-01-27 00:00:00",
        "City": "London",
        "Address": "7 Houndstooth Rd."
    }
];
// prepare the data
var source =
{
    dataType: "json",
    dataFields: [
        { name: 'EmployeeID', type: 'number' },
        { name: 'ReportsTo', type: 'number' },
        { name: 'FirstName', type: 'string' },
        { name: 'LastName', type: 'string' },
        { name: 'Country', type: 'string' },
        { name: 'City', type: 'string' },
        { name: 'Address', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'HireDate', type: 'date' },
        { name: 'BirthDate', type: 'date' }
    ],
    hierarchy:
    {
        keyDataField: { name: 'EmployeeID' },
        parentDataField: { name: 'ReportsTo' }
    },
    id: 'EmployeeID',
    localData: employees
};
var dataAdapter = new $.jqx.dataAdapter(source);
// create Tree Grid
$("#treeGrid").jqxTreeGrid(
{
    width: 600,
    source: dataAdapter,
    sortable: true,
    ready: function()
    {
        $("#treeGrid").jqxTreeGrid('expandRow', '2');
    },
    columns: [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 150 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 120 },
        { text: 'Title', dataField: 'Title', width: 160 },
        { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
        { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
        { text: 'Address', dataField: 'Address', width: 250 },
        { text: 'City', dataField: 'City', width: 120 },
        { text: 'Country', dataField: 'Country' }
    ],
    columnGroups: [
        { text: 'Name', name: 'Name' }
    ]
});

Data Binding to XML

The approach is similar to binding to JSON with the only difference that the source object's dataType should be set to "xml" and you muse set the source object's root, record and id members. Items in the data source must contain information on the parent-child relationships. Using this information, the TreeGrid will create records and organize them into a hierarchical structure. Information on parent-child relationships must be implemented in the data source by two data fields. One field must store the records' unique IDs. The other data field must contain the parent record's ID for each record. To specify these data fields for the jqxTreeGrid, use the keyDataField and parentDataField members of the hierarchy object.

1. Add a hierarchy object as a member of the source object.
2. Add a member called keyDataField and a member called parentDataField to the hierarchy object.
3. Set the keyDataField and parentDataField to point to the data fields in the data source that contain information about the parent-child relationships.

XML Data - employees.xml

<?xml version="1.0"?><Employees>  <Employee EmployeeID="5">    <LastName>Buchanan</LastName>    <FirstName>Steven</FirstName>    <Title>Sales Manager</Title>    <TitleOfCourtesy>Mr.</TitleOfCourtesy>    <BirthDate>1955-03-04</BirthDate>    <HireDate>1993-10-17</HireDate>    <Address>14 Garrett Hill</Address>    <City>London</City>    <Region/>    <PostalCode>SW1 8JR</PostalCode>    <Extension>3453</Extension>    <ReportsTo>2</ReportsTo>  </Employee>  <Employee EmployeeID="8">    <LastName>Callahan</LastName>    <FirstName>Laura</FirstName>    <Title>Inside Sales Coordinator</Title>    <TitleOfCourtesy>Ms.</TitleOfCourtesy>    <BirthDate>1958-01-09</BirthDate>    <HireDate>1994-03-05</HireDate>    <Address>4726 - 11th Ave. N.E.</Address>    <City>Seattle</City>    <Region>WA</Region>    <PostalCode>98105</PostalCode>    <Extension>2344</Extension>    <ReportsTo>2</ReportsTo>  </Employee>  <Employee EmployeeID="1">    <LastName>Davolio</LastName>    <FirstName>Nancy</FirstName>    <Title>Sales Representative</Title>    <TitleOfCourtesy>Ms.</TitleOfCourtesy>    <BirthDate>1948-12-08</BirthDate>    <HireDate>1992-05-01</HireDate>    <Address>      507 - 20th Ave. E.      Apt. 2A    </Address>    <City>Seattle</City>    <Region>WA</Region>    <PostalCode>98122</PostalCode>    <Extension>5467</Extension>    <ReportsTo>2</ReportsTo>  </Employee>  <Employee EmployeeID="9">    <LastName>Dodsworth</LastName>    <FirstName>Anne</FirstName>    <Title>Sales Representative</Title>    <TitleOfCourtesy>Ms.</TitleOfCourtesy>    <BirthDate>1966-01-27</BirthDate>    <HireDate>1994-11-15</HireDate>    <Address>7 Houndstooth Rd.</Address>    <City>London</City>    <Region/>    <PostalCode>WG2 7LT</PostalCode>    <Extension>452</Extension>    <ReportsTo>5</ReportsTo>  </Employee>  <Employee EmployeeID="2">    <LastName>Fuller</LastName>    <FirstName>Andrew</FirstName>    <Title>Vice President, Sales</Title>    <TitleOfCourtesy>Dr.</TitleOfCourtesy>    <BirthDate>1952-02-19</BirthDate>    <HireDate>1992-08-14</HireDate>    <Address>908 W. Capital Way</Address>    <City>Tacoma</City>    <Region>WA</Region>    <PostalCode>98401</PostalCode>    <Extension>3457</Extension>    <ReportsTo>0</ReportsTo>  </Employee>  <Employee EmployeeID="7">    <LastName>King</LastName>    <FirstName>Robert</FirstName>    <Title>Sales Representative</Title>    <TitleOfCourtesy>Mr.</TitleOfCourtesy>    <BirthDate>1960-05-29</BirthDate>    <HireDate>1994-01-02</HireDate>    <Address>      Edgeham Hollow      Winchester Way    </Address>    <City>London</City>    <Region/>    <PostalCode>RG1 9SP</PostalCode>    <Extension>465</Extension>    <ReportsTo>5</ReportsTo>  </Employee>  <Employee EmployeeID="3">    <LastName>Leverling</LastName>    <FirstName>Janet</FirstName>    <Title>Sales Representative</Title>    <TitleOfCourtesy>Ms.</TitleOfCourtesy>    <BirthDate>1963-08-30</BirthDate>    <HireDate>1992-04-01</HireDate>    <Address>722 Moss Bay Blvd.</Address>    <City>Kirkland</City>    <Region>WA</Region>    <PostalCode>98033</PostalCode>    <Extension>3355</Extension>    <ReportsTo>2</ReportsTo>  </Employee>  <Employee EmployeeID="4">    <LastName>Peacock</LastName>    <FirstName>Margaret</FirstName>    <Title>Sales Representative</Title>    <TitleOfCourtesy>Mrs.</TitleOfCourtesy>    <BirthDate>1937-09-19</BirthDate>    <HireDate>1993-05-03</HireDate>    <Address>4110 Old Redmond Rd.</Address>    <City>Redmond</City>    <Region>WA</Region>    <PostalCode>98052</PostalCode>    <Extension>5176</Extension>    <ReportsTo>2</ReportsTo>  </Employee>  <Employee EmployeeID="6">    <LastName>Suyama</LastName>    <FirstName>Michael</FirstName>    <Title>Sales Representative</Title>    <TitleOfCourtesy>Mr.</TitleOfCourtesy>    <BirthDate>1963-07-02</BirthDate>    <HireDate>1993-10-17</HireDate>    <Address>      Coventry House      Miner Rd.    </Address>    <City>London</City>    <Region/>    <PostalCode>EC2 7JR</PostalCode>    <Extension>428</Extension>    <ReportsTo>5</ReportsTo>  </Employee></Employees>

var source =
{
    dataType: "xml",
    dataFields: [
        { name: 'EmployeeID', type: 'number' },
        { name: 'ReportsTo', type: 'number' },
        { name: 'FirstName', type: 'string' },
        { name: 'LastName', type: 'string' },
        { name: 'City', type: 'string' },
        { name: 'Address', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'HireDate', type: 'date' },
        { name: 'BirthDate', type: 'date' }
    ],
    hierarchy:
    {
        keyDataField: { name: 'EmployeeID' },
        parentDataField: { name: 'ReportsTo' }
    },
    id: 'EmployeeID',
    root: 'Employees',
    record: 'Employee',
    url: "employees.xml"
};

var dataAdapter = new $.jqx.dataAdapter(source);
// create Tree Grid
$("#treeGrid").jqxTreeGrid(
{
    width: 680,
    source: dataAdapter,
    pageable: true,
    columnsResize: true,
    ready: function()
    {
        // expand row with 'EmployeeKey = 2'
        $("#treeGrid").jqxTreeGrid('expandRow', 2);
    },
    columns: [
        { text: 'FirstName', dataField: 'FirstName', minWidth: 100, width: 150 },
        { text: 'LastName',  dataField: 'LastName', width: 150 },
        { text: 'Title', dataField: 'Title', width: 300 },
        { text: 'Address', dataField: 'Address', width: 200 },
        { text: 'City', dataField: 'City', width: 150 },
        { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
        { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }
    ]
});

Data Binding to Nested XML

In order to use a nested XML as a data source, you will have to do the following:

1. Set the root, record and id members of the source object. For more information about these members, visit: jquery-data-adapter.htm.
2. Add a hierarchy object as a member of the source object.
3. Add root and record members to the hierarchy object to specify the nested sequence.

XML Data - employees.xml

<?xml version="1.0"?><Employees>  <Employee EmployeeID="2">    <LastName>Fuller</LastName>    <FirstName>Andrew</FirstName>    <Title>Vice President, Sales</Title>    <TitleOfCourtesy>Dr.</TitleOfCourtesy>    <BirthDate>1952-02-19</BirthDate>    <HireDate>1992-08-14</HireDate>    <Address>908 W. Capital Way</Address>    <City>Tacoma</City>    <Region>WA</Region>    <PostalCode>98401</PostalCode>    <Extension>3457</Extension>    <Notes>Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of Dallas in 1981.  He is fluent in French and Italian and reads German.  He joined the company as a sales representative, was promoted to sales manager in January 1992 and to vice president of sales in March 1993.  Andrew is a member of the Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.</Notes>    <Employees>      <Employee EmployeeID="8">        <LastName>Callahan</LastName>        <FirstName>Laura</FirstName>        <Title>Inside Sales Coordinator</Title>        <TitleOfCourtesy>Ms.</TitleOfCourtesy>        <BirthDate>1958-01-09</BirthDate>        <HireDate>1994-03-05</HireDate>        <Address>4726 - 11th Ave. N.E.</Address>        <City>Seattle</City>        <Region>WA</Region>        <PostalCode>98105</PostalCode>        <Extension>2344</Extension>        <Notes>Laura received a BA in psychology from the University of Washington.  She has also completed a course in business French.  She reads and writes French.</Notes>      </Employee>      <Employee EmployeeID="1">        <LastName>Davolio</LastName>        <FirstName>Nancy</FirstName>        <Title>Sales Representative</Title>        <TitleOfCourtesy>Ms.</TitleOfCourtesy>        <BirthDate>1948-12-08</BirthDate>        <HireDate>1992-05-01</HireDate>        <Address>          507 - 20th Ave. E.          Apt. 2A        </Address>        <City>Seattle</City>        <Region>WA</Region>        <PostalCode>98122</PostalCode>        <Extension>5467</Extension>        <Notes>Education includes a BA in psychology from Colorado State University in 1970.  She also completed "The Art of the Cold Call."  Nancy is a member of Toastmasters International.</Notes>      </Employee>      <Employee EmployeeID="5">        <LastName>Buchanan</LastName>        <FirstName>Steven</FirstName>        <Title>Sales Manager</Title>        <TitleOfCourtesy>Mr.</TitleOfCourtesy>        <BirthDate>1955-03-04</BirthDate>        <HireDate>1993-10-17</HireDate>        <Address>14 Garrett Hill</Address>        <City>London</City>        <Region/>        <PostalCode>SW1 8JR</PostalCode>        <Extension>3453</Extension>        <Notes>Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976.  Upon joining the company as a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent post in London.  He was promoted to sales manager in March 1993.  Mr. Buchanan has completed the courses "Successful Telemarketing" and "International Sales Management."  He is fluent in French.</Notes>        <Employees>          <Employee EmployeeID="9">            <LastName>Dodsworth</LastName>            <FirstName>Anne</FirstName>            <Title>Sales Representative</Title>            <TitleOfCourtesy>Ms.</TitleOfCourtesy>            <BirthDate>1966-01-27</BirthDate>            <HireDate>1994-11-15</HireDate>            <Address>7 Houndstooth Rd.</Address>            <City>London</City>            <Region/>            <PostalCode>WG2 7LT</PostalCode>            <Extension>452</Extension>            <Notes>Anne has a BA degree in English from St. Lawrence College.  She is fluent in French and German.</Notes>          </Employee>          <Employee EmployeeID="7">            <LastName>King</LastName>            <FirstName>Robert</FirstName>            <Title>Sales Representative</Title>            <TitleOfCourtesy>Mr.</TitleOfCourtesy>            <BirthDate>1960-05-29</BirthDate>            <HireDate>1994-01-02</HireDate>            <Address>              Edgeham Hollow              Winchester Way            </Address>            <City>London</City>            <Region/>            <PostalCode>RG1 9SP</PostalCode>            <Extension>465</Extension>            <Notes>Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the University of Michigan in 1992, the year he joined the company.  After completing a course entitled "Selling in Europe," he was transferred to the London office in March 1993.</Notes>          </Employee>          <Employee EmployeeID="6">            <LastName>Suyama</LastName>            <FirstName>Michael</FirstName>            <Title>Sales Representative</Title>            <TitleOfCourtesy>Mr.</TitleOfCourtesy>            <BirthDate>1963-07-02</BirthDate>            <HireDate>1993-10-17</HireDate>            <Address>              Coventry House              Miner Rd.            </Address>            <City>London</City>            <Region/>            <PostalCode>EC2 7JR</PostalCode>            <Extension>428</Extension>            <Notes>Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles (MBA, marketing, 1986).  He has also taken the courses "Multi-Cultural Selling" and "Time Management for the Sales Professional."  He is fluent in Japanese and can read and write French, Portuguese, and Spanish.</Notes>          </Employee>        </Employees>      </Employee>      <Employee EmployeeID="3">        <LastName>Leverling</LastName>        <FirstName>Janet</FirstName>        <Title>Sales Representative</Title>        <TitleOfCourtesy>Ms.</TitleOfCourtesy>        <BirthDate>1963-08-30</BirthDate>        <HireDate>1992-04-01</HireDate>        <Address>722 Moss Bay Blvd.</Address>        <City>Kirkland</City>        <Region>WA</Region>        <PostalCode>98033</PostalCode>        <Extension>3355</Extension>        <Notes>Janet has a BS degree in chemistry from Boston College (1984).  She has also completed a certificate program in food retailing management.  Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.</Notes>      </Employee>      <Employee EmployeeID="4">        <LastName>Peacock</LastName>        <FirstName>Margaret</FirstName>        <Title>Sales Representative</Title>        <TitleOfCourtesy>Mrs.</TitleOfCourtesy>        <BirthDate>1937-09-19</BirthDate>        <HireDate>1993-05-03</HireDate>        <Address>4110 Old Redmond Rd.</Address>        <City>Redmond</City>        <Region>WA</Region>        <PostalCode>98052</PostalCode>        <Extension>5176</Extension>        <Notes>Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American Institute of Culinary Arts (1966).  She was assigned to the London office temporarily from July through November 1992.</Notes>      </Employee>    </Employees>  </Employee></Employees>

var source =
{
    dataType: "xml",
    dataFields: [
        { name: 'EmployeeID', type: 'number' },
        { name: 'ReportsTo', type: 'number' },
        { name: 'FirstName', type: 'string' },
        { name: 'LastName', type: 'string' },
        { name: 'City', type: 'string' },
        { name: 'Address', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'HireDate', type: 'date' },
        { name: 'BirthDate', type: 'date' }
    ],
    hierarchy:
    {
        // defines the root and record of each hiearchy level.
        root: 'Employees',
        record: 'Employee'
    },
    id: 'EmployeeID',
    root: 'Employees',
    record: 'Employee',
    url: "employees.xml"
};

var dataAdapter = new $.jqx.dataAdapter(source);
// create Tree Grid
$("#treeGrid").jqxTreeGrid(
{
    width: 680,
    source: dataAdapter,
    columnsResize: true,
    ready: function () {
        // expand row with 'EmployeeKey = 2'
        $("#treeGrid").jqxTreeGrid('expandRow', 2);
    },
    columns: [
        { text: 'FirstName', dataField: 'FirstName', minWidth: 100, width: 150 },
        { text: 'LastName', dataField: 'LastName', width: 150 },
        { text: 'Title', dataField: 'Title', width: 300 },
        { text: 'Address', dataField: 'Address', width: 200 },
        { text: 'City', dataField: 'City', width: 150 },
        { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
        { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }
    ]
});

Data Binding to CSV/TSV

The source object's dataType should be set to "csv" or "tab". Items in the data source must contain information on the parent-child relationships. Using this information, the TreeGrid will create records and organize them into a hierarchical structure. Information on parent-child relationships must be implemented in the data source by two data fields. One field must store the records' unique IDs. The other data field must contain the parent record's ID for each record. To specify these data fields for the jqxTreeGrid, use the keyDataField and parentDataField members of the hierarchy object.

1. Add a hierarchy object as a member of the source object.
2. Add a member called keyDataField and a member called parentDataField to the hierarchy object.
3. Set the keyDataField and parentDataField to point to the data fields in the data source that contain information about the parent-child relationships.

Tab Data - locations.tsv

1	Aruba	37	1030002	Afghanistan	35	227200003	Angola	36	128780004	Anguilla	37	80005	Albania	34	34012006	Andorra	34	780007	Netherlands Antilles	37	2170008	United Arab Emirates	35	24410009	Argentina	38	3703200010	Armenia	35	352000011	Antigua and Barbuda	37	6800012	Austria	34	809180013	Azerbaijan	35	773400014	Burundi	36	669500015	Belgium	34	1023900016	Benin	36	609700017	Spain	34	3944170018	Estonia	34	143920019	Ethiopia	36	6256500020	Finland	34	517130022	Falkland Islands	38	200023	France	34	5922570024	Faroe Islands	34	4300026	Gabon	36	122600027	United Kingdom	34	5962340028	Georgia	35	496800029	Ghana	36	2021200030	Gibraltar	34	2500031	Guinea	36	743000032	Guadeloupe	37	45600033	Gambia	36	130500034	Europe	null	731000000.0035	Asia	null	3879000000.00	36	Africa	null	922011000.0037	North America	null	528720588.0021	Australia	null	2330000025	Antarctica	null	132338	South America	null	382000000.0039	Lithuania	34	369850040	Luxembourg	34	43570041	Latvia	34	242420042	Monaco	34	3400043	Moldova	34	438000044	Mexico	37	9888100045	Macao	35	47300046	Morocco	36	2835100047	Madagascar	36	1594200048	Maldives	35	28600049	United States	37	27835700050	South Korea	35	4684400051	India	35	101366200052	Canada	37	3114700053	Brazil	38	17011500054	Russian Federation	34	14693400055	Zimbabwe	36	1166900056	Germany	34	8216470057	Djibouti	36	63800058	Dominica	37	7100059	Denmark	34	533000060	Hong Kong	35	678200061	Japan	35	126714000

// prepare the data
var source =
{
    dataType: "tab",
    dataFields: [
        { name: "Id", type: "number" },
        { name: "Name", type: "string" },
        { name: "ParentID", type: "number" },
        { name: "Population", type: "number" }
    ],
    hierarchy:
    {
        keyDataField: { name: 'Id' },
        parentDataField: { name: 'ParentID' }
    },
    id: 'Id',
    url: 'locations.tsv'
};
var dataAdapter = new $.jqx.dataAdapter(source);
// create Tree Grid
$("#treeGrid").jqxTreeGrid(
{
    width: 500,
    height: 400,
    source: dataAdapter,
    ready: function()
    {
        $("#treeGrid").jqxTreeGrid('expandRow', '34');
    },
    columns:
    [
        { text: 'Location Name', dataField: "Name", align: 'center', width: '50%' },
        { text: 'Population', dataField: "Population", align: 'center', width: '50%'}
    ]
});

Virtual Mode(Load on Demand)

You can load data into jqxTreeGrid dynamically, by using callback functions. For each record only when required, jqxTreeGrid calls virtualModeCreateRecords function and this allows you to provide records on demand. During the initialization of each record, jqxTreeGrid calls virtualModeRecordCreating which allows you to update some record settings.

var generateTasks = function (rowsCount) {
    var rowsCount = !rowsCount ? 1 + Math.floor(Math.random() * 5) : rowsCount;
    var data = new Array();
    var generatekey = function () {
        var S4 = function () {
            return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        };
        return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
    };

    for (var i = 0; i < rowsCount; i++) {
        var row = {};
        var tasks = ["Shopping", "Housewares", "Kitchen supplies", "Groceries", "Cleaning supplies", "Office supplies", "Remodeling", "Paint bedroom", "Paint wall", "Fitness", "Decorate living room",
            "Fix lights", "Fix front door", "Clean kitchen"];
        var firstNames =
        [
            "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
        ];

        var lastNames =
        [
            "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
        ];
        row["id"] = generatekey();
        row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
        row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
        row["name"] = row["firstname"] + " " + row["lastname"];
        var taskindex = Math.floor(Math.random() * tasks.length);
        row["task"] = tasks[taskindex];
        row["duration"] = 1+Math.floor(Math.random() * 10);
        data.push(row);
    }
    return data;
}

// create Tree Grid
$("#treeGrid").jqxTreeGrid(
{
    width: 600,
    pageable: true,
    altRows: true,
    virtualModeCreateRecords: function(expandedRecord, done)
    {
        // expandedRecord is equal to null when the function is initially called, because there is still no record to be expanded.

        // prepare the data
        var source =
        {
            dataType: "array",
            dataFields: [
                { name: "id", type: "string" },
                { name: "name", type: "string" },
                { name: "duration", type: "number" },
                { name: "task", type: "number" }
            ],
            localData: expandedRecord === null ? generateTasks(3000) : generateTasks(),
            id: 'id'
        }
        var dataAdapter = new $.jqx.dataAdapter(source, {
            loadComplete: function () {
                done(dataAdapter.records);
            }
        });
        dataAdapter.dataBind();
    },
    virtualModeRecordCreating: function(record)
    {
        if (record.level == 2) {
            // by setting the record's leaf member to true, you will define the record as a leaf node.
            record.leaf = true;
        }
    },
    columns: [
        { text: 'Task', dataField: "task", align: 'center', width: 250 },
        { text: 'Person Name', dataField: "name", cellsAlign: 'center', align: 'center', width: 200 },
        {
            text: 'Duration', dataField: "duration", cellsAlign: 'center', align: 'center', cellsRenderer: function (row, column, value) {
                var hour = value > 1 ? " hours" : " hour";
                return value + hour;
            }
        }
    ]
});

Settings which you can change in the virtualModeRecordCreating callback function:

checked - Boolean value. Determines the row's checked state.
expanded - Boolean value. Determines the row's expanded state.
icon - String value. Determines the row's icon url.
leaf - Boolean value. Determines whether the row is a leaf in the hierarchy.
selected - Boolean value. Determines whether the row is selected.
uid - Number/String value. Determines the row's unique ID/Key.