How to show the active and outdated records in React Grid

[Jesse LaVere]

Is it possible to have (permanent) filters criteria? For example, if I have a status field with active, inactive, and outdated; is it possible to have the grid ALWAYS show the active records even when the user has searched for outdated? In this case I would want it to show outdated AND active.

[Rajapandi Ravi]

Hi Jesse, 

Greetings from syncfusion support 

We have analyzed your query and we could see that you like to show the Active records in grid and then you also like to display the outdated records. You can achieve your requirement by setting the initial filter in Grid. Please refer the below code example , sample, video demo and documentation for more information. 

 

export class Localbinding extends SampleBase { 

   filterOptions = {  //Initial filtering 

     type: 'Excel', 

     columns: [ 

      { field: 'Status', matchCase: false, 

        operator: 'startswith', predicate: 'and', value: 'Active' 

      } 

    ] 

  }; 

    render() { 

        return (<div className='control-pane'> 

                    <GridComponent dataSource={this.datas} allowFiltering={true} filterSettings={this.filterOptions} ref={g => this.grid = g} allowPaging={true} pageSettings={{ pageCount: 5 }}> 

                        <ColumnsDirective> 

                            <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign="Right"/> 

          <ColumnDirective field='Status' headerText='Status' width='150'/> 

                        </ColumnsDirective> 

                        <Inject services={[Page, Filter]}/> 

                    </GridComponent> 

            </div>); 

    } 

} 

Sample: https://stackblitz.com/edit/react-y4lzue-2ypv2f?file=index.js 

Video demo: https://www.syncfusion.com/downloads/support/forum/158310/ze/158310-36087886.zip 

Documentation: https://ej2.syncfusion.com/react/documentation/grid/filtering/#initial-filter 

Regards,
Rajapandi R