jqwidgets-scripts-custom/demos/React/app/treegrid/virtualmodewithajax/app.js

jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.

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'));