jqwidgets-scripts-custom/demos/React/app/grid/grouping/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 JqxGrid from '../../../jqwidgets-react/react_jqxgrid.js';
import JqxButton from '../../../jqwidgets-react/react_jqxbuttons.js';
import JqxInput from '../../../jqwidgets-react/react_jqxinput.js';

class App extends React.Component {
    componentDidMount() {
        this.refs.ExpandButton.on('click', () => {
            let groupnum = this.refs.myInput.val();
            if (!isNaN(groupnum)) {
                this.refs.Grid.expandgroup(groupnum);
            }
        });
        // collapse group.
        this.refs.CollapseButton.on('click', () => {
            let groupnum = this.refs.myInput.val();
            if (!isNaN(groupnum)) {
                this.refs.Grid.collapsegroup(groupnum);
            }
        });
        // expand all groups.
        this.refs.ExpandAllButton.on('click', () => {
            this.refs.Grid.expandallgroups();
        });
        // collapse all groups.
        this.refs.CollapseAllButton.on('click', () => {
            this.refs.Grid.collapseallgroups();
        });
        // trigger expand and collapse events.
        this.refs.Grid.on('groupexpand', (event) => {
            let args = event.args;
            document.getElementById('expandedgroup').innerHTML = 'Group: ' + args.group + ', Level: ' + args.level;
        });
        this.refs.Grid.on('groupcollapse', (event) => {
            let args = event.args;
            document.getElementById('collapsedgroup').innerHTML = 'Group: ' + args.group + ', Level: ' + args.level
        });
    }
    render() {
        let source =
            {
                datatype: 'xml',
                datafields: [
                    { name: 'CompanyName', map: 'm\\:properties>d\\:CompanyName', type: 'string' },
                    { name: 'ContactName', map: 'm\\:properties>d\\:ContactName', type: 'string' },
                    { name: 'ContactTitle', map: 'm\\:properties>d\\:ContactTitle', type: 'string' },
                    { name: 'City', map: 'm\\:properties>d\\:City', type: 'string' },
                    { name: 'PostalCode', map: 'm\\:properties>d\\:PostalCode', type: 'string' },
                    { name: 'Country', map: 'm\\:properties>d\\:Country', type: 'string' }
                ],
                root: 'entry',
                record: 'content',
                id: 'm\\:properties>d\\:CustomerID',
                url: '../sampledata/customers.xml'
            };
        let dataAdapter = new $.jqx.dataAdapter(source);

        let columns =
            [
                { text: 'Company Name', datafield: 'CompanyName', width: 250 },
                { text: 'City', datafield: 'City', width: 120 },
                { text: 'Country', datafield: 'Country' }
            ];
        return (
            <div>
                <JqxGrid ref='Grid'
                    width={850} source={dataAdapter} groupable={true}
                    columns={columns} groups={['City']}
                />
                <div style={{ marginTop: 30 }}>
                    <div style={{ float: 'left', marginLeft: 20 }}>
                        <JqxButton ref='ExpandButton' width={125} height={25} value='Expand Group' />
                        <br />
                        <JqxButton ref='CollapseButton' width={125} height={25} style={{ marginTop: 10 }} value='Collapse Group' />
                        <br />
                        <span style={{ marginTop: 10 }}>Group:</span>
                        <JqxInput ref='myInput' style={{ marginLeft: 10, marginTop: 10 }} width={20} value={1} />
                    </div>
                    <div style={{ float: 'left', marginLeft: 20 }}>
                        <JqxButton ref='ExpandAllButton' width={125} height={25} value='Expand All' />
                        <br />
                        <JqxButton ref='CollapseAllButton' width={125} height={25} value='Collapse All' style={{ marginTop: 10, marginBottom: 10 }} />
                        <br />
                    </div>
                    <div style={{ float: 'left', marginLeft: 20 }}>
                        <div style={{ fontWeight: 'bold' }}>
                            <span>Event Log:</span>
                        </div>
                        <div style={{ marginTop: 10 }}>
                            <span>Expanded Group:</span>
                            <span id='expandedgroup'></span>
                        </div>
                        <div style={{ marginTop: 10 }}>
                            <span>Collapsed Group:</span>
                            <span id='collapsedgroup'></span>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

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