React UI Components

Show Demo List

Theme:

Demo
App.htm
App.js

ReactJS Tree Grid demo. Data Binding to Array data in jqxTreeGrid.

Order 0	Vel Ltd	$19.50	16-August-2016
Order 1	Maecenas Mi Felis LLC	$21.10	09-August-2016
Order 2	Turpis Incorporated	$29.60	05-September-2016
Green Tea	Petra Saavedra	$1.50	05-September-2016 06:57
Black Tea	Elio Davolio	$2.25	05-September-2016 01:24
Peppermint Mocha Twist	Regina Saavedra	$4.00	05-September-2016 10:36
Caffe Americano	Andrew Peterson	$2.50	05-September-2016 01:00
Caffe Latte	Elio Fuller	$4.50	05-September-2016 01:16
Caramel Latte	Michael Nagase	$3.80	05-September-2016 04:45
Espresso con Panna	Guylene Burke	$3.25	05-September-2016 12:44

<!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. Data Binding to Array data in jqxTreeGrid.
    </title>
	<meta name="description" content="This React Tree Grid demo showcases how to bind the TreeGrid to local data"/>		
	
    <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>
    <script type="text/javascript" src="../sampledata/generatedata.js"></script>
</head>
<body>
    <div class="example-description" style="margin-bottom:3em">
        ReactJS Tree Grid demo. Data Binding to Array data in jqxTreeGrid.
    </div>
    <div id="app"></div>
    <script src="../build/treegrid_localdata.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 {
    componentDidMount() {
        this.refs.myTreeGrid.expandRow(2);
    }
    render () {
        // prepare the data
        let source =
        {
            dataType: 'array',
            dataFields: [
                { name: 'name', type: 'string' },
                { name: 'quantity', type: 'number' },
                { name: 'id', type: 'string' },
                { name: 'parentid', type: 'number' },
                { name: 'price', type: 'number' },
                { name: 'date', type: 'date' },
                { name: 'customer', type: 'string' }
            ],
            hierarchy:
            {
                keyDataField: { name: 'id' },
                parentDataField: { name: 'parentid' }
            },
            id: 'id',
            localData: generateordersdata()
        };
        let dataAdapter = new $.jqx.dataAdapter(source);
        // create Tree Grid
        let columns = [
            { text: 'Order Name', dataField: 'name', align: 'center', width: 200 },
            { text: 'Customer', dataField: 'customer', align: 'center', width: 200 },
            { text: 'Price', dataField: 'price', cellsFormat: 'c2', align: 'center', cellsAlign: 'right', width: 80 },
            {
                text: 'Order Date', dataField: 'date', align: 'center', cellsFormat: 'dd-MMMM-yyyy hh:mm', cellsRenderer: (rowKey, column, cellValue, rowData, cellText) => {
                    if (rowData.level === 0) {
                        return dataAdapter.formatDate(cellValue, 'dd-MMMM-yyyy');
                    }
                    return cellText;
                }
            }
        ];
        return (
            <JqxTreeGrid
                ref='myTreeGrid'
                width={850} 
                source={dataAdapter} 
                pageable={true}
                sortable={true}
                columns={columns}
            />
        )
    }
}

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