React UI Components Documentation

Sets or gets the altRows property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} altRows={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the autoRowHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} autoRowHeight={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the aggregatesHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} aggregatesHeight={40}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the autoShowLoadElement property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} autoShowLoadElement={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the checkboxes property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} checkboxes={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the columnsHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} columnsHeight={40}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the columns property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the columnGroups property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} columnGroups={columnGroups}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the columnsResize property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} columnsResize={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the columnsReorder property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} columnsReorder={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} disabled={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the editable property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} editable={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the editSettings property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} editSettings={editSettings}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the exportSettings property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} exportSettings={exportSettings}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the enableHover property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} enableHover={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the enableBrowserSelection property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} enableBrowserSelection={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the filterable property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} filterable={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the filterHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} filterable={true} filterHeight={40}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the filterMode property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} filterable={true} filterMode={'advanced'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} height={200}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the hierarchicalCheckboxes property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} checkboxes={true} hierarchicalCheckboxes={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the icons property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} icons={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the incrementalSearch property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} incrementalSearch={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the localization property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} localization={localization}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the pagerHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} pageable={true} pagerHeight={35}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the pageSize property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} pageable={true} pageSize={5}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the pageSizeOptions property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} pageable={true} pageSizeOptions={['2', '3', '5']}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the pageable property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} pageable={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the pagerPosition property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} pageable={true} pagerPosition={'top'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the pagerMode property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} pageable={true} pagerMode={'advanced'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the pageSizeMode property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} pageable={true} pageSizeMode={'root'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the pagerButtonsCount property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} pageable={true} pagerButtonsCount={2}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the pagerRenderer property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} pageable={true} pagerRenderer={pagerRenderer}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the ready property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} ready={ready}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rowDetails property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} rowDetails={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rowDetailsRenderer property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} rowDetailsRenderer={rowDetailsRenderer}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the renderToolbar property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} renderToolbar={renderToolbar}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the renderStatusbar property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} renderStatusbar={renderStatusbar}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rendering property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} rendering={rendering}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rendered property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} rendered={rendered}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rtl property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} rtl={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the source property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the sortable property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} sortable={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showAggregates property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} showAggregates={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showSubAggregates property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} showAggregates={true} showSubAggregates={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showToolbar property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} showToolbar={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showStatusbar property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} showStatusbar={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the statusBarHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} statusBarHeight={40}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the scrollBarSize property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} scrollBarSize={15}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the selectionMode property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} selectionMode={'singleRow'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showHeader property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} showHeader={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the theme property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} theme={'energyblue'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the toolbarHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} toolbarHeight={40}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the virtualModeCreateRecords property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} virtualModeCreateRecords={virtualModeCreateRecords}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the virtualModeRecordCreating property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns} virtualModeRecordCreating={virtualModeRecordCreating}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the jqxTreeGrid binding is completed. *Bind to that event before the jqxTreeGrid's initialization. Otherwise, if you are populating the widget from a local data source and bind to bindingComplete after the initialization, the event could be already raised when you attach an event handler to it.

Code examples

Bind to the bindingComplete event of jqxTreeGrid.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTreeGrid.on('bindingComplete', (event) => {
            // Do Something...
        });
    }

    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This is triggered when a cell edit begins. Note: To turn on cell editing, you should set the editSettings property and make sure that its editSingleCell sub property is set to true.

Code examples

Bind to the cellBeginEdit event of jqxTreeGrid.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTreeGrid.on('cellBeginEdit', (event) => {
            // Do Something...
        });
    }

    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This is triggered when a cell edit ends. Note: To turn on cell editing, you should set the editSettings property and make sure that its editSingleCell sub property is set to true.

Code examples

Bind to the cellEndEdit event of jqxTreeGrid.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTreeGrid.on('cellEndEdit', (event) => {
            // Do Something...
        });
    }

    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when a cell value is changed.

Code examples

Bind to the cellValueChanged event of jqxTreeGrid.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTreeGrid.on('cellValueChanged', (event) => {
            // Do Something...
        });
    }

    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when a column is resized.

Code examples

Bind to the columnResized event of jqxTreeGrid.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTreeGrid.on('columnResized', (event) => {
            // Do Something...
        });
    }

    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the column's order is changed.

Code examples

Bind to the columnReordered event of jqxTreeGrid.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTreeGrid.on('columnReordered', (event) => {
            // Do Something...
        });
    }

    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the jqxTreeGrid's rows filter is changed.

Code examples

Bind to the filter event of jqxTreeGrid.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTreeGrid.on('filter', (event) => {
            // Do Something...
        });
    }

    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This is triggered when the jqxTreeGrid's current page is changed.

Code examples

Bind to the pageChanged event of jqxTreeGrid.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTreeGrid.on('pageChanged', (event) => {
            // Do Something...
        });
    }

    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This is triggered when the jqxTreeGrid's page size is changed.

Code examples

Bind to the pageSizeChanged event of jqxTreeGrid.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTreeGrid.on('pageSizeChanged', (event) => {
            // Do Something...
        });
    }

    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This is triggered when a row is clicked.

Code examples

Bind to the rowClick event of jqxTreeGrid.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTreeGrid.on('rowClick', (event) => {
            // Do Something...
        });
    }

    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This is triggered when a row is double-clicked.

Code examples

Bind to the rowDoubleClick event of jqxTreeGrid.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTreeGrid.on('rowDoubleClick', (event) => {
            // Do Something...
        });
    }

    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This is triggered when a row is selected.

Code examples

Bind to the rowSelect event of jqxTreeGrid.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTreeGrid.on('rowSelect', (event) => {
            // Do Something...
        });
    }

    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This is triggered when a row is unselected.

Code examples

Bind to the rowUnselect event of jqxTreeGrid.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTreeGrid.on('rowUnselect', (event) => {
            // Do Something...
        });
    }

    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This is triggered when a row edit begins.

Code examples

Bind to the rowBeginEdit event of jqxTreeGrid.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTreeGrid.on('rowBeginEdit', (event) => {
            // Do Something...
        });
    }

    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This is triggered when a row edit ends.

Code examples

Bind to the rowEndEdit event of jqxTreeGrid.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTreeGrid.on('rowEndEdit', (event) => {
            // Do Something...
        });
    }

    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This is triggered when a row is expanded.

Code examples

Bind to the rowExpand event of jqxTreeGrid.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTreeGrid.on('rowExpand', (event) => {
            // Do Something...
        });
    }

    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This is triggered when a row is collapsed.

Code examples

Bind to the rowCollapse event of jqxTreeGrid.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTreeGrid.on('rowCollapse', (event) => {
            // Do Something...
        });
    }

    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This is triggered when a row is checked.

Code examples

Bind to the rowCheck event of jqxTreeGrid.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTreeGrid.on('rowCheck', (event) => {
            // Do Something...
        });
    }

    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This is triggered when a row is unchecked.

Code examples

Bind to the rowUncheck event of jqxTreeGrid.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTreeGrid.on('rowUncheck', (event) => {
            // Do Something...
        });
    }

    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the jqxTreeGrid sort order or sort column is changed.

Code examples

Bind to the sort event of jqxTreeGrid.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTreeGrid.on('sort', (event) => {
            // Do Something...
        });
    }

    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeGrid, { jqx } from 'jqwidgets-react/react_jqxtreegrid.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTreeGrid.addRow(10,{},'first');
    }

    render() {       
        let employees = [
            { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
            { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
            { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
            { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
            { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
        ];
 
        let source =
        {
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'LastName', type: 'string' },
                { name: 'Title', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
          
        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
            { text: 'Title', dataField: 'Title', width: 160 }
        ];
        return (
            <JqxTreeGrid ref='myTreeGrid'
                 width={850} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));