Custom Elements

Show Demo List

Theme:

Demo
View Source
API Reference

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element FilteringAPI</title>    <meta name="description" content="This is an example of the filtering API in TreeGrid Custom Element." />    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script type="text/javascript">        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.'                }            ];        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);        JQXElements.settings['treeGridSettings'] =            {                source: dataAdapter,                ready: function () {                    var myTreeGrid = document.querySelector('jqx-tree-grid');                    myTreeGrid.expandRow(2);                },                columns: [                    { text: 'First Name', dataField: 'FirstName', minWidth: 100, width: 200 },                    { text: 'Last Name', dataField: 'LastName', width: 200 },                    { text: 'City', dataField: 'City' }                ]                 };        JQXElements.settings['dropDownListSettings'] =            {                autoDropDownHeight: true,                 source: [{ label: 'First Name', value: 'FirstName' },{ label: 'Last Name', value: 'LastName' },{ label: 'City', value: 'City' }]            };        JQXElements.settings['listBoxSettings'] =            {               checkboxes: true            };        window.onload = function() {            var myTreeGrid = document.querySelector('jqx-tree-grid');            var myDropDownList = document.querySelector('jqx-drop-down-list');            var myListBox = document.querySelector('jqx-list-box');            var myButtons = document.querySelectorAll('jqx-button');            var handleCheckChange = true;            var updatemyListBox = function (dataField) {                myTreeGrid.clearFilters();                var myListBoxAdapter = new jqx.dataAdapter(source,                    {                        uniqueDataFields: [dataField],                        async: false,                        autoBind: true                    });                var uniqueRecords = myListBoxAdapter.records;                uniqueRecords.splice(0, 0, '(Select All)');                myListBox.source = uniqueRecords;                myListBox.displayMember = dataField;                myListBox.checkAll();            };            var applyFilter = function (dataField) {                myTreeGrid.clearFilters();                var filtertype = 'stringfilter';                var filtergroup = new jqx.filter();                var checkedItems = myListBox.getCheckedItems();                if(checkedItems.length == 0) {                    var filter_or_operator = 1;                    var filtervalue = "Empty";                    var filtercondition = 'equal';                    var filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition);                    filtergroup.addfilter(filter_or_operator, filter);                } else {                    for(var i = 0; i < checkedItems.length; i++) {                        var filter_or_operator = 1;                        var filtervalue = checkedItems[i].label;                        var filtercondition = 'equal';                        var filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition);                        filtergroup.addfilter(filter_or_operator, filter);                    }                }                myTreeGrid.addFilter(dataField, filtergroup);                myTreeGrid.applyFilters();            }            myDropDownList.addEventListener('select', function (event) {                updatemyListBox(event.args.item.value);            });            myDropDownList.selectedIndex = 0;            myListBox.addEventListener('checkChange', function(event) {                if(!handleCheckChange)                    return;                if (event.args.label != '(Select All)') {                    handleCheckChange = false;                    myListBox.checkIndex(0);                    var checkedItems = myListBox.getCheckedItems();                    var items = myListBox.getItems();                    if (checkedItems.length == 1) {                        myListBox.uncheckIndex(0);                    }                    else if (items.length != checkedItems.length) {                        myListBox.indeterminateIndex(0);                    }                    handleCheckChange = true;                } else {                    handleCheckChange = false;                    event.args.checked ? myListBox.checkAll() : myListBox.uncheckAll();                                handleCheckChange = true;                }            });            myButtons[0].addEventListener('click', function () {                var dataField = myDropDownList.getSelectedItem().value;                applyFilter(dataField);            });            myButtons[1].addEventListener('click', function () {                myTreeGrid.clearFilters();            });        };    </script></head><body>    <div class="example-description">        Data Filtering API in Tree Grid Custom Element.    </div>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid><br />    <div>        <div>Filter By:</div>        <jqx-drop-down-list settings="dropDownListSettings"></jqx-drop-down-list>        <div style="margin-top: 10px"></div>        <jqx-list-box settings="listBoxSettings"></jqx-list-box>        <div style="margin-top: 10px">            <jqx-button>Apply Filter</jqx-button>            <jqx-button>Clear Filter</jqx-button>        </div>    </div></body></html>

altRows boolean false

Sets or gets the altRows property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source,altRows:true, theme:"light"        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

autoRowHeight boolean true

Sets or gets the autoRowHeight property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source,autoRowHeight:true, theme:"light"        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

aggregatesHeight number 34

Sets or gets the aggregatesHeight property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source,aggregatesHeight:40, theme:"light"        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

autoShowLoadElement boolean true

Sets or gets the autoShowLoadElement property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source,autoShowLoadElement:true, theme:"light"        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

checkboxes boolean false

Sets or gets the checkboxes property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source,checkboxes:true, theme:"light"        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

columnsHeight number 30

Sets or gets the columnsHeight property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source,columnsHeight:40, theme:"light"        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

columns array []

Sets or gets the columns property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light"        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

columnGroups array []

Sets or gets the columnGroups property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light"        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

columnsResize boolean false

Sets or gets the columnsResize property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light",columnsResize:true        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

columnsReorder boolean false

Sets or gets the columnsReorder property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light",columnsReorder:true        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

disabled boolean false

Sets or gets the disabled property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light",disabled:true        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

editable boolean false

Sets or gets the editable property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light",editable:true        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

editSettings object { saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true }

Sets or gets the editSettings property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light", editSettings:"editSettings"        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

exportSettings object {columnsHeader: true, hiddenColumns: false, serverURL: null, characterSet: null, collapsedRecords: false, recordsInView: true,fileName: "jqxTreeGrid"}

Sets or gets the exportSettings property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light", exportSettings:"exportSettings"        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

enableHover boolean true

Sets or gets the enableHover property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light",enableHover:true        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

enableBrowserSelection boolean false

Sets or gets the enableBrowserSelection property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light",enableBrowserSelection:true        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

filterable boolean false

Sets or gets the filterable property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light"        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

filterHeight number 30

Sets or gets the filterHeight property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light",filterHeight:40        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

filterMode string "default"

Sets or gets the filterMode property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light", filterMode:"advanced"        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

height number null

Sets or gets the height property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light",height:200        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

hierarchicalCheckboxes boolean false

Sets or gets the hierarchicalCheckboxes property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light",checkboxes:true,hierarchicalCheckboxes:true        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

icons boolean false

Sets or gets the icons property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light",icons:true        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

incrementalSearch boolean true

Sets or gets the incrementalSearch property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light",incrementalSearch:true        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

localization object default localization strings.

Sets or gets the localization property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light", localization:"localization"        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

pagerHeight number 28

Sets or gets the pagerHeight property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light",pageable:true,pagerHeight:35        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

pageSize number 10

Sets or gets the pageSize property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light",pageable:true,pageSize:5        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

pageSizeOptions array ['5', '10', '20']

Sets or gets the pageSizeOptions property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light",pageable:true, pageSizeOptions:'['2', '3', '5']'        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

pageable boolean false

Sets or gets the pageable property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light",pageable:true        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

pagerPosition string "bottom"

Sets or gets the pagerPosition property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light",pageable:true, pagerPosition:"top"        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

pagerMode string "default"

Sets or gets the pagerMode property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light",pageable:true, pagerMode:"advanced"        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

pageSizeMode string "default"

Sets or gets the pageSizeMode property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light",pageable:true, pageSizeMode:"root"        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

pagerButtonsCount number 5

Sets or gets the pagerButtonsCount property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light",pageable:true,pagerButtonsCount:2        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

pagerRenderer function null

Sets or gets the pagerRenderer property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light",pageable:true, pagerRenderer:"pagerRenderer"        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

ready function null

Sets or gets the ready property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light", ready:"ready"        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

rowDetails boolean false

Sets or gets the rowDetails property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light",rowDetails:true        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

rowDetailsRenderer function null

Sets or gets the rowDetailsRenderer property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light", rowDetailsRenderer:"rowDetailsRenderer"        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

renderToolbar function null

Sets or gets the renderToolbar property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light", renderToolbar:"renderToolbar"        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

renderStatusbar function null

Sets or gets the renderStatusbar property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light", renderStatusbar:"renderStatusbar"        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

rendering function null

Sets or gets the rendering property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light", rendering:"rendering"        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

rendered function null

Sets or gets the rendered property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light", rendered:"rendered"        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

rtl boolean false

Sets or gets the rtl property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light",rtl:true        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

source object null

Sets or gets the source property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light"        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

sortable boolean false

Sets or gets the sortable property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light"        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

showAggregates boolean false

Sets or gets the showAggregates property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light",showAggregates:true        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

showSubAggregates boolean false

Sets or gets the showSubAggregates property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light",showAggregates:true,showSubAggregates:true        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

showToolbar boolean false

Sets or gets the showToolbar property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light",showToolbar:true        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

showStatusbar boolean false

Sets or gets the showStatusbar property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light",showStatusbar:true        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

statusBarHeight number 34

Sets or gets the statusBarHeight property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light",statusBarHeight:40        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

scrollBarSize number 17

Sets or gets the scrollBarSize property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light",scrollBarSize:15        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

selectionMode string "multipleRows"

Sets or gets the selectionMode property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light", selectionMode:"singleRow"        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

showHeader boolean true

Sets or gets the showHeader property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light",showHeader:false        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

theme string ''

Sets or gets the theme property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light"        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

toolbarHeight number 34

Sets or gets the toolbarHeight property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light",toolbarHeight:40        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

width number null

Sets or gets the width property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light"        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

virtualModeCreateRecords function null

Sets or gets the virtualModeCreateRecords property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light", virtualModeCreateRecords:"virtualModeCreateRecords"        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

virtualModeRecordCreating function null

Sets or gets the virtualModeRecordCreating property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light", virtualModeRecordCreating:"virtualModeRecordCreating"        }            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

bindingComplete Event

Code examples

Bind to the bindingComplete event of jqxTreeGrid.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light"        }	window.onload = function() {		document.querySelector("jqx-tree-grid").addEventListener("bindingComplete", function(event) {			// Your code here.		});	};            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

cellBeginEdit Event

Code examples

Bind to the cellBeginEdit event of jqxTreeGrid.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light"        }	window.onload = function() {		document.querySelector("jqx-tree-grid").addEventListener("cellBeginEdit", function(event) {			// Your code here.		});	};            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

cellEndEdit Event

Code examples

Bind to the cellEndEdit event of jqxTreeGrid.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light"        }	window.onload = function() {		document.querySelector("jqx-tree-grid").addEventListener("cellEndEdit", function(event) {			// Your code here.		});	};            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

cellValueChanged Event

Code examples

Bind to the cellValueChanged event of jqxTreeGrid.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light"        }	window.onload = function() {		document.querySelector("jqx-tree-grid").addEventListener("cellValueChanged", function(event) {			// Your code here.		});	};            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

columnResized Event

Code examples

Bind to the columnResized event of jqxTreeGrid.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light"        }	window.onload = function() {		document.querySelector("jqx-tree-grid").addEventListener("columnResized", function(event) {			// Your code here.		});	};            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

columnReordered Event

Code examples

Bind to the columnReordered event of jqxTreeGrid.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light"        }	window.onload = function() {		document.querySelector("jqx-tree-grid").addEventListener("columnReordered", function(event) {			// Your code here.		});	};            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

filter Event

Code examples

Bind to the filter event of jqxTreeGrid.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light"        }	window.onload = function() {		document.querySelector("jqx-tree-grid").addEventListener("filter", function(event) {			// Your code here.		});	};            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

pageChanged Event

Code examples

Bind to the pageChanged event of jqxTreeGrid.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light"        }	window.onload = function() {		document.querySelector("jqx-tree-grid").addEventListener("pageChanged", function(event) {			// Your code here.		});	};            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

pageSizeChanged Event

Code examples

Bind to the pageSizeChanged event of jqxTreeGrid.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light"        }	window.onload = function() {		document.querySelector("jqx-tree-grid").addEventListener("pageSizeChanged", function(event) {			// Your code here.		});	};            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

rowClick Event

Code examples

Bind to the rowClick event of jqxTreeGrid.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light"        }	window.onload = function() {		document.querySelector("jqx-tree-grid").addEventListener("rowClick", function(event) {			// Your code here.		});	};            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

rowDoubleClick Event

Code examples

Bind to the rowDoubleClick event of jqxTreeGrid.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light"        }	window.onload = function() {		document.querySelector("jqx-tree-grid").addEventListener("rowDoubleClick", function(event) {			// Your code here.		});	};            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

rowSelect Event

Code examples

Bind to the rowSelect event of jqxTreeGrid.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light"        }	window.onload = function() {		document.querySelector("jqx-tree-grid").addEventListener("rowSelect", function(event) {			// Your code here.		});	};            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

rowUnselect Event

Code examples

Bind to the rowUnselect event of jqxTreeGrid.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light"        }	window.onload = function() {		document.querySelector("jqx-tree-grid").addEventListener("rowUnselect", function(event) {			// Your code here.		});	};            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

rowBeginEdit Event

Code examples

Bind to the rowBeginEdit event of jqxTreeGrid.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light"        }	window.onload = function() {		document.querySelector("jqx-tree-grid").addEventListener("rowBeginEdit", function(event) {			// Your code here.		});	};            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

rowEndEdit Event

Code examples

Bind to the rowEndEdit event of jqxTreeGrid.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light"        }	window.onload = function() {		document.querySelector("jqx-tree-grid").addEventListener("rowEndEdit", function(event) {			// Your code here.		});	};            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

rowExpand Event

Code examples

Bind to the rowExpand event of jqxTreeGrid.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light"        }	window.onload = function() {		document.querySelector("jqx-tree-grid").addEventListener("rowExpand", function(event) {			// Your code here.		});	};            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

rowCollapse Event

Code examples

Bind to the rowCollapse event of jqxTreeGrid.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light"        }	window.onload = function() {		document.querySelector("jqx-tree-grid").addEventListener("rowCollapse", function(event) {			// Your code here.		});	};            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

rowCheck Event

Code examples

Bind to the rowCheck event of jqxTreeGrid.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light"        }	window.onload = function() {		document.querySelector("jqx-tree-grid").addEventListener("rowCheck", function(event) {			// Your code here.		});	};            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

rowUncheck Event

Code examples

Bind to the rowUncheck event of jqxTreeGrid.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light"        }	window.onload = function() {		document.querySelector("jqx-tree-grid").addEventListener("rowUncheck", function(event) {			// Your code here.		});	};            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

sort Event

Code examples

Bind to the sort event of jqxTreeGrid.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme:"light"        }	window.onload = function() {		document.querySelector("jqx-tree-grid").addEventListener("sort", function(event) {			// Your code here.		});	};            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

addRow Method

Parameter	Type	Description
rowKey	string
rowData	object
rowPosition	string
parent	string

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").addRow(10,{},'first');								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

addFilter Method

Parameter	Type	Description
dataField	string
filerGroup	object

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").addFilter('firstName',new $.jqx.filtergroup());								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

applyFilters Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").applyFilters();								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

beginUpdate Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").beginUpdate();								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

beginRowEdit Method

Parameter	Type	Description
rowKey	string	Unique ID which identifies the row

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").beginRowEdit(10);								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

beginCellEdit Method

Parameter	Type	Description
rowKey	string	Unique ID which identifies the row
dataField	string

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").beginCellEdit(10,'firstName');								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

clearSelection Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").clearSelection();								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

clearFilters Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").clearFilters();								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

clear Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").clear();								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

checkRow Method

Parameter	Type	Description
rowKey	string	Unique ID which identifies the row

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").checkRow(10);								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

collapseRow Method

Parameter	Type	Description
rowKey	string	Unique ID which identifies the row

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").collapseRow(10);								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

collapseAll Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").collapseAll();								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

destroy Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").destroy();								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

deleteRow Method

Parameter	Type	Description
rowKey	string	Unique ID which identifies the row

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").deleteRow(10);								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

expandRow Method

Parameter	Type	Description
rowKey	string	Unique ID which identifies the row

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").expandRow(10);								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

expandAll Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").expandAll();								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

endUpdate Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").endUpdate();								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

ensureRowVisible Method

Parameter	Type	Description
rowKey	string	Unique ID which identifies the row

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").ensureRowVisible(10);								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

endRowEdit Method

Parameter	Type	Description
rowKey	string	Unique ID which identifies the row
cancelChanges	boolean

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").endRowEdit(10,true);								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

endCellEdit Method

Parameter	Type	Description
rowKey	string	Unique ID which identifies the row
dataField	string
cancelChanges	boolean	Determines whether the changes would be canceled or confirmed. Default: false

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").endCellEdit(10,'firstName');								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

exportData Method

Parameter	Type	Description
exportDataType	string	'xls', 'html', 'xml', 'json', 'csv', 'tsv' or 'pdf'

Return Value
Object(optional)

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").exportData('xls');								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

focus Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").focus();								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

getColumnProperty Method

Parameter	Type	Description
dataField	string
propertyName	string

Return Value
Object

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").getColumnProperty('firstName');								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

goToPage Method

Parameter	Type	Description
pageIndex	number

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").goToPage();								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

goToPrevPage Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").goToPrevPage();								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

goToNextPage Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").goToNextPage();								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

getSelection Method

Parameter	Type	Description
None

Return Value
Array

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		var result = document.querySelector("jqx-tree-grid").getSelection();								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

getKey Method

Parameter	Type	Description
row	object

Return Value
String

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").getKey(row);								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

getRow Method

Parameter	Type	Description
rowKey	string

Return Value
Object

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").getRow(1);								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

getRows Method

Parameter	Type	Description
None

Return Value
Array

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		var result = document.querySelector("jqx-tree-grid").getRows();								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

getCheckedRows Method

Parameter	Type	Description
None

Return Value
Array

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		var result = document.querySelector("jqx-tree-grid").getCheckedRows();								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

getView Method

Parameter	Type	Description
None

Return Value
Array

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		var result = document.querySelector("jqx-tree-grid").getView();								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

getCellValue Method

Parameter	Type	Description
rowKey	string	Unique ID which identifies the row
dataField	string

Return Value
Object

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").getCellValue(1,'firstName');								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

hideColumn Method

Parameter	Type	Description
dataField	string

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").hideColumn('firstName');								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

isBindingCompleted Method

Parameter	Type	Description
None

Return Value
Boolean

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		var result = document.querySelector("jqx-tree-grid").isBindingCompleted();								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

lockRow Method

Parameter	Type	Description
rowKey	string	Unique ID which identifies the row

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").lockRow(10);								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

refresh Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").refresh();								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

render Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").render();								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

removeFilter Method

Parameter	Type	Description
dataField	string

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").removeFilter(firstName);								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

scrollOffset Method

Parameter	Type	Description
top	number	vertical scrollbar value
left	number	horizontal scrollbar value

Return Value
Object

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").scrollOffset(10,0);								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

setColumnProperty Method

Parameter	Type	Description
dataField	string
propertyName	string
propertyValue	object

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").setColumnProperty('firstName','text','New Text');								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

showColumn Method

Parameter	Type	Description
dataField	string

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").showColumn('firstName');								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

selectRow Method

Parameter	Type	Description
rowId	string	Unique ID which identifies the row

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").selectRow(1);								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

setCellValue Method

Parameter	Type	Description
rowId	string
dataField	string
cellValue	object

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").setCellValue(1,'firstName','New Value');								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

sortBy Method

Parameter	Type	Description
dataField	string
sortOrder	string	'asc', 'desc' or null

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").sortBy('FirstName','asc');								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

updating Method

Parameter	Type	Description
None

Return Value
Boolean

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		var result = document.querySelector("jqx-tree-grid").updating();								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

updateBoundData Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").updateBoundData();								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

unselectRow Method

Parameter	Type	Description
rowId	string	Unique ID which identifies the row

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").unselectRow(1);								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

uncheckRow Method

Parameter	Type	Description
rowId	string	Unique ID which identifies the row

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").uncheckRow(1);								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

updateRow Method

Parameter	Type	Description
rowId	number	Unique ID which identifies the row
data	object

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").updateRow(1,{FirstName: 'Nancy', LastName: 'Davolio});								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

unlockRow Method

Parameter	Type	Description
rowId	string	Unique ID which identifies the row

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript">	    var source = new jqx.dataAdapter({			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: [                    { "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." }        ]});        var columns = [            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },            { 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' }        ];        var columnGroups = [            { text: 'Name', name: 'Name' }        ];        JQXElements.settings["treeGridSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-tree-grid").unlockRow(1);								}            </script></head><body>    <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid></body></html>

Custom Elements

Custom Elements

Properties

Events

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Methods