Toolbar Customization

import React from 'react'; import DataGrid, { Grouping, Column, ColumnChooser, LoadPanel } from 'devextreme-react/data-grid'; import { Template } from 'devextreme-react/core/template'; import query from 'devextreme/data/query'; import service from './data.js'; class App extends React.Component { constructor(props) { super(props); this.orders = service.getOrders(); this.state = { expanded: true, totalCount: this.getGroupCount('CustomerStoreState') }; this.onToolbarPreparing = this.onToolbarPreparing.bind(this); this.toolbarItemRender = this.toolbarItemRender.bind(this); this.dataGrid = null; } getGroupCount(groupField) { return query(this.orders) .groupBy(groupField) .toArray().length; } toolbarItemRender() { return ( <div className={'informer'}> <h2 className={'count'}>{this.state.totalCount}</h2> <span className={'name'}>Total Count</span> </div> ); } onToolbarPreparing(e) { e.toolbarOptions.items.unshift({ location: 'before', template: 'totalGroupCount' }, { location: 'before', widget: 'dxSelectBox', options: { width: 200, items: [{ value: 'CustomerStoreState', text: 'Grouping by State' }, { value: 'Employee', text: 'Grouping by Employee' }], displayExpr: 'text', valueExpr: 'value', value: 'CustomerStoreState', onValueChanged: this.groupChanged.bind(this) } }, { location: 'before', widget: 'dxButton', options: { width: 136, text: 'Collapse All', onClick: this.collapseAllClick.bind(this) } }, { location: 'after', widget: 'dxButton', options: { icon: 'refresh', onClick: this.refreshDataGrid.bind(this) } }); } groupChanged(e) { this.dataGrid.instance.clearGrouping(); this.dataGrid.instance.columnOption(e.value, 'groupIndex', 0); this.setState({ totalCount: this.getGroupCount(e.value) }); } collapseAllClick(e) { let newValue = !this.state.expanded; e.component.option('text', newValue ? 'Collapse All' : 'Expand All'); this.setState({ expanded: newValue }); } refreshDataGrid() { this.dataGrid.instance.refresh(); } render() { return ( <DataGrid id={'gridContainer'} ref={(ref) => this.dataGrid = ref} dataSource={this.orders} showBorders={true} onToolbarPreparing={this.onToolbarPreparing}> <Grouping autoExpandAll={this.state.expanded} /> <ColumnChooser enabled={true} /> <LoadPanel enabled={true} /> <Column dataField={'OrderNumber'} caption={'Invoice Number'} /> <Column dataField={'OrderDate'} /> <Column dataField={'Employee'} /> <Column dataField={'CustomerStoreCity'} caption={'City'} /> <Column dataField={'CustomerStoreState'} caption={'State'} groupIndex={0} /> <Column dataField={'SaleAmount'} alignment={'right'} format={'currency'} /> <Template name={'totalGroupCount'} render={this.toolbarItemRender} /> </DataGrid> ); } } export default App;