Multiple-condition filtering

Question

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

Category3When 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 displayedWhen user select Category3, devices with ID in range 100001~149999 are displayedHow to achieve this?  Thanks.

Joseph Christ Nithin Issack · Accepted Answer

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.

Joseph Christ Nithin Issack · Answer

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 · Answer

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~49999Category2: ID 50000~100000 and 150000~200000Category3: ID 100001~149999All devices: All devices with ID 1~2000002) Data is fetched from remote server and stored locally. Related code shown belowCode in HTML file:

Code in TS file:constructor(private http:HttpClient,public deviceService:DeviceService,private dataService:DataService) { this.http.get(this.prodUrl+"/home/getdevicestats").subscribe(response => { this.devices = response; },error=>{ }); }

Joseph Christ Nithin Issack · Answer

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 17th December, 2021. We appreciate your patience until then. 

Regards, 
Joseph I.

Joseph Christ Nithin Issack · Answer

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 23rd December 2021. We appreciate your patience until then. 


Regards, 
Joseph I.

Huifei Rao · Answer

Thanks Joesph,It works great!

Rajapandiyan Settu · Answer

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