React UI Components

Show Demo List

Theme:

Demo
App.htm
App.js

ReactJS Tree Grid demo. In virtual mode, the Tree Grid is created on demand. In this case, Child records are created and initialized when the parent record is expanded. For example when you expand a record, jqxTreeGrid makes an Ajax request to http://services.odata.org. The request contains the expanded record's EmployeeID and as a result we get all sub records whose "ReportsTo" data field match the "EmployeeID" data field.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="ReactJS TreeGrid" />
    <title id='Description'>
        ReactJS Tree Grid demo. In virtual mode, the Tree Grid is created on demand. In this case, Child records are created and initialized when the parent record is expanded. 
        For example when you expand a record, jqxTreeGrid makes an Ajax request to http://services.odata.org. 
        The request contains the expanded record's EmployeeID and as a result we get all sub records whose "ReportsTo" data field match the "EmployeeID" data field.
    </title>
	<meta name="description" content="This React Tree Grid demo showcases how to use Tree Grid in Virtual mode with AJAX"/>		
	
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script>
    <script type="text/javascript" src="../scripts/demos.js"></script>
</head>
<body>
    <div class="example-description" style="margin-bottom:3em">
        ReactJS Tree Grid demo. In virtual mode, the Tree Grid is created on demand. In this case, Child records are created and initialized when the parent record is expanded. 
        For example when you expand a record, jqxTreeGrid makes an Ajax request to http://services.odata.org. 
        The request contains the expanded record's EmployeeID and as a result we get all sub records whose "ReportsTo" data field match the "EmployeeID" data field.
    </div>
    <div id="app"></div>
    <script src="../build/treegrid_virtualmodewithajax.bundle.js"></script>
</body>
</html>

import React from 'react';import ReactDOM from 'react-dom';import JqxTreeGrid from '../../../jqwidgets-react/react_jqxtreegrid.js';class App extends React.Component {
    render() {
        let source =
            {
                dataType: 'json',
                dataFields: [
                    { name: 'EmployeeID', type: 'number' },
                    { name: 'ReportsTo', type: 'number' },
                    { name: 'FirstName', type: 'string' },
                    { name: 'LastName', type: 'string' },
                    { name: 'Country', type: 'string' },
                    { name: 'City', type: 'string' },
                    { name: 'Address', type: 'string' },
                    { name: 'Title', type: 'string' },
                    { name: 'HireDate', type: 'date' },
                    { name: 'BirthDate', type: 'date' }
                ],
                timeout: 10000,
                hierarchy:
                {
                    keyDataField: { name: 'EmployeeID' },
                    parentDataField: { name: 'ReportsTo' }
                },
                id: 'EmployeeID',
                root: 'value',
                url: 'http://services.odata.org/V3/Northwind/Northwind.svc/Employees?$format=json&$callback=?'
            };

        let virtualModeCreateRecords = (expandedRecord, done) => {

            let dataAdapter = new $.jqx.dataAdapter(source,
                {
                    formatData: (data) => {
                        if (expandedRecord == null) {
                            data.$filter = '(ReportsTo eq null)'
                        }
                        else {
                            data.$filter = '(ReportsTo eq ' + expandedRecord.EmployeeID + ')'
                        }
                        return data;
                    },
                    loadComplete: () => {
                        done(dataAdapter.records);
                    },
                    loadError: (xhr, status, error) => {
                        done(false);
                        throw new Error('http://services.odata.org: ' + error.toString());
                    }
                }
            );
            dataAdapter.dataBind();
        };

        let virtualModeRecordCreating = (record) => {
            // record is creating.
        };

        let columns = [
            { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 150 },
            { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 150 },
            { text: 'Title', dataField: 'Title', width: 200 },
            { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd' }
        ];
        return (
            <div>
                <h3 style={{ fontSize: 16, fontFamily: 'Verdana' }}>Data Source: 'http://services.odata.org'</h3>
                <JqxTreeGrid
                    width={800} columns={columns}
                    virtualModeCreateRecords={virtualModeCreateRecords}
                    virtualModeRecordCreating={virtualModeRecordCreating}
                />
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'));