Prevent the grid refresh in react state change in React Grid component
28 Sep 20233 minutes to read
By default, React components are automatically re-rendered based on the state value change. In this cause, Grid component is also forced to re-render. So the Grid previous state neglect in this process. But we can prevent this behavior by overriding the shouldComponentUpdate
method.
In the below code, we have prevented the Grid re-rendering, when we change the state value in rowSelected event.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GridComponent, ColumnsDirective, ColumnDirective, Page, Inject } from '@syncfusion/ej2-react-grids';
import { data } from './datasource';
class App extends React.Component<{}, {}> {
public GridRefresh: boolean = false;
shouldComponentUpdate() {
if (this.GridRefresh)
return false;
return true;
}
rowSelected(args: any) {
let data: object = this.gridInstance.getSelectedRecords();
this.GridRefresh = true;
this.setState({ selectedRecord: data });
}
actionBegin(args: any) {
if (args.requestType === 'paging') {
this.GridRefresh = false;
this.setState({ currentpage: args.currentPage });
}
}
render() {
return (<div className='control-pane'>
<div className='control-section'>
<GridComponent id='grid' ref={grid => this.gridInstance = grid} dataSource={orderDetails} allowPaging={true} selectionSettings={this.selectionsettings} rowSelected={this.rowSelected.bind(this)} ref={grid => this.gridInstance = grid} actionBegin={this.actionBegin.bind(this)}>
<ColumnsDirective>
<ColumnDirective field='OrderID' width='100' textAlign="Right"></ColumnDirective>
<ColumnDirective field='CustomerID' width='100'></ColumnDirective>
<ColumnDirective field='EmployeeID' width='100' textAlign="Right"></ColumnDirective>
<ColumnDirective field='Freight' width='100' format="C2" textAlign="Right"></ColumnDirective>
<ColumnDirective field='ShipCountry' width='100'></ColumnDirective>
</ColumnsDirective>
<Inject services={[Page]} />
</GridComponent>
</div>
</div>);
}
}
ReactDOM.render(<App />, document.getElementById('grid'));