Multiple-condition filtering

[Huifei Rao]

Hi, I have a grid which lists all of my devices. There is an 'ID' column. ID is in range of 1~200000.

I need to provide user a selection with three options: Category1,  Category2 and  Category3

When user select Category1, devices with ID < 50000 are displayed.

When user select Category2, devices with ID in range 50000~100000 and range 150000~200000 are displayed

When user select Category3, devices with ID in range 100001~149999 are displayed

How to achieve this?  Thanks.

[Joseph Christ Nithin Issack]

Hi Huifei, 

Greetings from Syncfusion support. 

We have validated your requirement and logged this as a custom solution. Before we proceed with the solution we need the following details so that we may be able to proceed with the custom sample.  

• You have mentioned that you want to select category and fetch data based on the category selected. Please ensure if you will select only one category or will select multiple categories at the same time.
• Share if you are using the local data or remote data  in your grid.

Please get back to us for further details. 

Regards, 

Joseph I. 

[Huifei Rao]

Hi Joseph,

Thanks for the response.

1) Only one category will be selected at one time.  But I forgot to mention there is actually a fourth category "All devices". If "All devices" is selected, then all devices in range 1~200000 will be displayed.

To summarize: Four single options as shown below.

Category1: ID 1~49999

Category2: ID 50000~100000 and 150000~200000

Category3: ID 100001~149999

All devices: All devices with ID 1~200000

2) Data is fetched from remote server and stored locally. Related code shown below

Code in HTML file:

<ejs-grid id="lstDevices" #grid [dataSource]="devices" (actionComplete)='actionComplete($event)' [editSettings]='editSettings' allowSelection="true" allowSorting="true" allowFiltering="true" [toolbar]='toolbarOptions' allowPaging='true' [pageSettings]='pageOptions' [searchSettings]="searchOptions" allowResizing="true" height='150' (rowSelected)='rowSelected($event)' (rowDeselected)='rowDeselected($event)' allowResizeToFit="false" [selectionSettings]='selectionOptions'>

        <e-columns>

            <e-column type='checkbox' width='40' cssclass="e-custom"></e-column>

            <e-column field='Name' headerText='Name' textAlign='Center' width='100'></e-column>

            <e-column field='ID' headerText='ID' textAlign='Center' width='70' isPrimaryKey='true'></e-column>

        </e-columns>

    </ejs-grid>

Code in TS file:

constructor(private http:HttpClient,public deviceService:DeviceService,private dataService:DataService) {

        this.http.get<IDevice[]>(this.prodUrl+"/home/getdevicestats").subscribe(response => {

            this.devices = response;

        },error=>{

        });

    }

[Joseph Christ Nithin Issack]

Hi Huifei, 

   Thanks for the update. 

   We have validated your requirement and logged this as a custom solution. We will provide further details on or before 17^th December, 2021. We appreciate your patience until then. 

Regards, 

Joseph I.  

[Joseph Christ Nithin Issack]

Hi Huifei, 

  Sorry for the late reply, 

  Currently we are facing some complexities in achieving your requirement in the custom sample. We will provide further details one or before 23^rd December 2021. We appreciate your patience until then. 

Regards, 

Joseph I. 

[Joseph Christ Nithin Issack]

Hi Huifei, 

  Thanks for your patience. 

  Based on your requirement, we have created a custom sample to display the data in the grid based on the option selected from an external dropdown with 20,000 records. This can be achieved using the `query` property of the EJ2 Grid in the change event of the dropdown. 

Please refer the below code example. 

public ngOnInit(): void { 

    datasource(); 

    this.data = virtualData; 

    this.gridQuery = new Query().where(new Predicate('SNo', 'lessthan', 5000)); 

  } 

 

valueChange(args: any): void { 

    let predicate: Predicate; 

    let query: Query; 

    this.listObj.hidePopup(); 

    this.gridInstance.showSpinner(); 

    switch (args.value) { 

      case 1: 

        predicate = new Predicate('SNo', 'lessthan', 5000); 

        query = new Query().where(predicate); 

        break; 

      case 2: 

        predicate = new Predicate('SNo', 'greaterthanorequal', 5000) 

          .and('SNo', 'lessthanorequal', 10000) 

          .or('SNo', 'greaterthanorequal', 15000) 

          .and('SNo', 'lessthanorequal', 20000); 

        query = new Query().where(predicate); 

        break; 

      case 3: 

        predicate = new Predicate('SNo', 'greaterthan', 10000).and( 

          'SNo', 

          'lessthan', 

          15000 

        ); 

        query = new Query().where(predicate); 

        break; 

      case 4: 

        query = new Query(); 

        break; 

    } 

    this.gridInstance.query = query; 

    this.gridInstance.refreshColumns(); 

    this.gridInstance.hideSpinner(); 

  } 

Sample: https://stackblitz.com/edit/angular-uwxqqs?file=app.component.ts 

Please find the attached sample and revert for more queries. 

Regards, 

Joseph I. 

[Huifei Rao]

Thanks Joesph,

It works great!

[Rajapandiyan Settu]

Hi Huifei, 

We are glad that the provided solution resolves your requirement. 

Please get back to us if you need any assistance. 

Regards, 

Rajapandiyan S