How to filter custom date ranges in Grid column using date range picker

2 mins read

The date range picker can be used in the Grid Menu filtering to filter the date ranges by rendering it as a custom component in the menu filter. This is explained below,

Initially, the create and write methods need to be defined for the column filters “ui” property. In the create method, an input element is created and appended to the target element(returned in event arguments). Then, an EJ2 DateRangePicker control is rendered and appended to the input element.

{ field: 'OrderDate', format: 'yMd', textAlign: 'Right', filter: {
     ui: {
         create: function(args) {
            // Input element is created and appended to the target element 
             var flValInput = new ej.base.createElement('input', { className: 'flm-input' });
             args.target.appendChild(flValInput);
            // Date range picker is rendered and appended to the input element 
             var dateRangeInst = new ej.calendars.DateRangePicker({});
             dateRangeInst.appendTo(flValInput);
         },
         write: function(args) {
         }
      }
}},

Now, in the date range picker’s change event, the start and end date values are stored in a global variable and using the Grid’s filterByColumn the start date value is filtered with ‘greaterthan’ operator on the date column.

var dateRangeInst = new ej.calendars.DateRangePicker({
       change: function (e) {
           if (e != undefined && e.value) {
               var grid = document.getElementById("Grid").ej2_instances[0];
              // Get date values from date range picker 
               startDate = e.value[0];
               endDate = e.value[1];
              // Flag variable is used to identify this case in the Grid’s action begin event 
               customFilter = true;
             // Filter the required column with start date of the date range picker 
             // GridInstance.filterByColumn(Column field name, filter operator, filter value)
               grid.filterByColumn('OrderDate', 'greaterthan', startDate);
           }
       }
});
dateRangeInst.appendTo(flValInput);

Finally, in the Grid’s actionBegin event handler, an additional ‘lessthan’ filter for the date column is pushed to the column property(returned in event arguments) with the end date value. A flag variable is enabled in the date range picker’s change event to identify this case here.

// Grid’s actionBegin event handler 
function onActionBegin(args) {
       // Check for filter column and flag enabled in date range picker’s change event 
        if (args.requestType === "filtering" && args.currentFilteringColumn === "OrderDate" && customFilter) {
            customFilter = false;
           // End date value is added as additional filter value with ‘lessthan’ filter operator 
            args.columns.push({ actualFilterValue: {}, actualOperator: {}, field: "OrderDate", ignoreAccent: false, isForeignKey: false, matchCase: false, operator: "lessthan", predicate: "and", uid: this.getColumnByField(args.currentFilteringColumn).uid, value: endDate });
        }
}

If the previously filtered date range needs to be displayed in the filter Menu’s input element, it can be achieved by getting the filter values for the date column from the Grid’s filterSettings property and setting them to the date range picker’s startDate and endDate properties.

ui: {
    create: function(args) {
             .
             .
        var grid = document.getElementById("Grid").ej2_instances[0];
        var date = [];
        grid.filterSettings.columns.forEach(col => {
             // Filter values for the date column are pushed into an array
              if (col.field === "OrderDate")
                  date.push(col.value);
        });
        var dateRangeInst = new ej.calendars.DateRangePicker({
             // Start and end date values are set on the input
              startDate: date[0],
              endDate: date[1],
        });
        dateRangeInst.appendTo(flValInput);
    }
}