Custom filters in the toolbar - Filtering date column between two values

Question

Hello,

I am using the Grid Component with Angular and I am trying to filter the grid on a date column with two DatePickers (date-from and date-to) inside the toolbar :
Basically I am trying to replicate the behavior of the built-in Excel date Between filter without the AND/OR buttons and with fixed operators (greaterThanOrEqual and lessThanOrEqual).

Here is a sample of what I am trying to achieve :
https://stackblitz.com/edit/syncfusion-angular-editable-grid-msgnpa?file=app.component.ts

As seen here I know that it is not possible to do have more than one filter on a field using the filterByColumn method of the GridComponent, so I am using the filterByColumn method for the first filter and then manually trying to add another filter with the following code :

App.component.ts > line 43 :

    this.grid.filterSettings.columns.push(
      new Predicate(
        'OrderDate',
        'lessThanOrEqual',
        new Date('7/10/1996'),
        true,
        true
      ) as PredicateModel
    );

But this method doesn't seem to create the same type of Predicate inside this.grid.filterSettings.columns array as the one created by the filterByColumn method, as shown in this console log :

(The first item of the Array , is the Predicate added by the filterByColumn method and the second one is the one I added as seen in the code sample above)

Is there any way to create a predicate that will work ? Or any other way to filter a date column between two values ?

Regards,

Rajapandi Ravi · Answer

Hi Karim, 

Greetings from Syncfusion support 

From your update we could see that you like to filter the date values with certain range, you can achieve your requirement by using dateRangePicker component. We have already discussed about your requirement in our Knowledge Base. The below article explains how to filter custom date ranges in Grid column using date range picker. Please refer the below KB for more information. 

KB: https://www.syncfusion.com/kb/12390/how-to-filter-custom-date-ranges-in-grid-column-using-date-range-picker 

Regards, 
Rajapandi R

Karim · Answer

Hello Rajapandi Ravi,Thank you for your quick response,Unfortunately, the DateRangePicker will not suit my needs for this use case.I would like the user to be able to either specify the from Date, the to Date, or Both. So I really need two separate DatePickers inside the Toolbar as shown in the Stackblitz I provided previously. Can you tell me how to add a correctly formed Predicate object inside the filterOptions.columns array for the Angular version, as shown here https://www.syncfusion.com/forums/153440/filtering-with-more-criteria-for-the-same-field?reply=NfY59v ?  ​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​Regards,Karim E.

Rajapandi Ravi · Answer

Hi Karim, 

Currently we have forwarded this query to our internal team, and we need some more time to validate. So, we will update you the details by tomorrow, 10th Nov 2021. Until then we appreciate your patience. 

Regards, 
Rajapandi R

Rajapandi Ravi · Answer

Hi Karim, 

Thanks for your patience 

Based on your query we have prepared a sample and we suggest you follow the below way to achieve your requirement. Please refer the below code example and sample for more information. 





 
acionBegin(args) { 
    if (args.requestType === "filtering" && args.currentFilteringColumn === "OrderDate") { 
    var fromDatePicker = (document.getElementById('from') as any).ej2_instances[0]; 
    var toDatePicker = (document.getElementById('to') as any).ej2_instances[0]; 

     if(this.flag == "to") { 
       if(fromDatePicker.value && toDatePicker.value) { 
        args.columns.push({ actualFilterValue: {}, actualOperator: {}, field: "OrderDate", ignoreAccent: false, isForeignKey: false, matchCase: false, operator: "greaterThanOrEqual", predicate: "and", uid: this.grid.getColumnByField(args.currentFilteringColumn).uid, value:  fromDatePicker.value}); 
       } 
     } 

     else if(this.flag =="from"){ 
      if(fromDatePicker.value && toDatePicker.value) { 
        args.columns.push({ actualFilterValue: {}, actualOperator: {}, field: "OrderDate", ignoreAccent: false, isForeignKey: false, matchCase: false, operator: "lessthan", predicate: "and", uid: this.grid.getColumnByField(args.currentFilteringColumn).uid, value:  toDatePicker.value}); 
       } 
     } 
  } 
  } 
  public onValueChanged($event, filter): void { 
    var fromDatePicker = (document.getElementById('from') as any).ej2_instances[0]; 
    var toDatePicker = (document.getElementById('to') as any).ej2_instances[0]; 
    this.flag = filter; 
    this.grid.filterByColumn( 
      'OrderDate', 
      filter === 'from' ? 'greaterThanOrEqual' : 'lessThanOrEqual', 
      $event.value 
    ); 
  } 

Sample: https://stackblitz.com/edit/syncfusion-angular-editable-grid-nrmhqp?file=app.component.ts 

Regards, 
Rajapandi R