Filtering by multiple columns

[Kulcsár Norbert]

Hi Team!

Is it possible to use a method like filterByColumn() on the grid that filters by multiple columns at the same time?

I have a dateRangePicker filter that provides startdate and enddate, and I would like to filter the grid using both in one request.

For example: grid.filterByColumns(['fieldname1', 'greaterthan', startdate], ['fieldname1', 'lessthan', enddate]);

Thank you!

[Rajapandi Ravi]

Hi Atif, 

Greetings from syncfusion support 

Based on your query we could see that you are using a dataRangePicker in filter menu and you like to filter the date values with daterange. 

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. 

The daterange 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.  

{ 

      field: "OrderDate", 

      headerText: "Order Date", 

      width: 130, 

      format: "yMd", 

      textAlign: "Right", 

      filter: { 

        ui: { 

          create: function(args) { 

            var flValInput = new ej.base.createElement("input", { 

              className: "flm-input" 

            }); 

            args.target.appendChild(flValInput); 

            var grid = document.getElementById("Grid").ej2_instances[0]; 

            var date = []; 

            grid.filterSettings.columns.forEach(col => { 

              if (col.field === "OrderDate") date.push(col.value); 

            }); 

            var dateRangeInst = new ej.calendars.DateRangePicker({ 

              startDate: date[0], 

              endDate: date[1], 

              change: function(e) { 

                if (e != undefined && e.value) { 

                  var grid = document.getElementById("Grid").ej2_instances[0]; 

                  startDate = e.value[0]; 

                  endDate = e.value[1]; 

                  customFilter = true; 

                  grid.filterByColumn("OrderDate", "greaterthan", startDate); 

                } 

              } 

            }); 

            dateRangeInst.appendTo(flValInput); 

          }, 

          write: function(args) {} 

        } 

      } 

    }, 

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. 

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; 

    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 

    }); 

  } 

} 

Sample: https://stackblitz.com/edit/ypcdwq-caserq?file=index.js 

Regards, 

Rajapandi R