We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: JavaScript - EJ 2 |
Control: Grid |
Published Date: February 26, 2021 |
Last Revised Date: February 26, 2021

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);
    }
}
 

 

Output

Custom date range picker in menu filtering

You can find the samples here: 

JavaScript (ES5) sample

ASP.NET Core sample

 

Documentation:

Render custom component in the filter menu: https://ej2.syncfusion.com/javascript/documentation/grid/filtering/#custom-component-in-filter-menu

EJ2 DateRangePicker: https://ej2.syncfusion.com/javascript/documentation/daterangepicker/es5-getting-started/ 

 

API links:

filterByColumn: https://ej2.syncfusion.com/javascript/documentation/api/grid/#filterbycolumn

actionBegin: https://ej2.syncfusion.com/javascript/documentation/api/grid/#actionbegin

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile