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