Multiple Filter Types on Single Grid

[Christopher Schipper]

Is it possible to have multiple filter types/pickers per data grid without having to use the menu option?

For example, if I had a table with the following columns:

     Name

     Occupation

     Date

Would it be possible to have the following filter types/pickers?
     Name - Simple Text  Filter

     Occupation - CheckBox

     Date - Date picker

I am trying to accomplish this without having to use the "Menu" option on the grid, and preferably without having to write a custom template/logic for each search component. 

An example of what I am attempting to accomplish is below:

Name             Occupation                                     Date

-----------------------------------------------------------------

[Text Box]     [Drop-Down of CheckBoxes]       [Date-Picker]

-----------------------------------------------------------------

<Grid Rows>

Thank you for your time!

[Hariharan J V]

Hi Christopher, 

 

Greetings from Syncfusion. 

 

We are sorry for the inconvenience. In the filter bar mode, text boxes will be displayed by default. If you to change this behaviour, then you need to use custom filter template only. Please let us know if you are facing any complexity while using custom filter.  

 

Regards,
Hariharan  

[Christopher Schipper]

While following the documentation on how to create a custom filter, I ran into an issue where the $refs object was undefined.

It seems that the example provided in the Vue documentation has the same error being logged to the console, and thus does not filter the table properly.

The example I am following is in the "Filter bar template with custom component" section in the Vue Documentation --> Grid --> Filtering documentation.

Here is a link to said documentation: https://ej2.syncfusion.com/vue/documentation/grid/filtering/?no-cache=1

Can an example of how to create a functional custom filter with the filter bar template be provided?

Thank you

[Hariharan J V]

Hi Christopher, 

  

Sorry for the inconvenience caused, 

  

Ae we have made a sample with your concern and you can bind the multiple input components render on the EJ2 Grid filtering using filterBarTemplate property. We have achieve the Multiselect component which can be multiple items filtering at same time. 

  

Please refer the below code example for more information. 

  

[index.js] 

     <ejs-grid id="Grid" ref="grid"  :dataSource="data" :allowFiltering='true' height='273px' :actionComplete='actionBegin'  > 

            <e-columns> 

                <e-column field='OrderID' :allowFiltering='false' headerText='Order ID' textAlign='Right' width=100></e-column> 

                <e-column field='CustomerID' headerText='Customer ID' width=120 :filterBarTemplate = 'templateOptions'></e-column> 

                <e-column field='ShipCity' headerText='Ship City' width=100></e-column> 

  

              <e-column field='OrderDate' headerText='Order Date' width=100 format="yMd" :filterBarTemplate = 'dpTemplateOption'></e-column>            </e-columns> 

        </ejs-grid> 

  

data() { 

    return { 

      data: data, 

      templateOptions: { 

            create: function (args) { 

                elem = document.createElement('input'); 

                return elem; 

            }, 

            write: function (args) { 

                            dObj = new MultiSelect({ 

                dataSource: data, 

                fields: { text: "CustomerID", value:'CustomerID' }, 

                

                change: function (args) {                    

                  var selVal = args.value; 

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

                  MultiSelectVals = args.value;        

                  grid.filterByColumn("CustomerID", "equal", selVal[0]); 

                } 

              }); 

              dObj.appendTo(elem); 

            }, 

        }, 

        dpTemplateOption:{ 

         create: function(args) {            

            var element = document.createElement('input'); 

            element.id = 'OrderDate'; 

            return element; 

        }, 

        write:function(args) { 

                      datePicker = new DatePicker({ placeholder: 'Enter date', value: args.column.value, 

            change: function(args) { 

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

            if (datePicker.element.value) { 

                grid.filterByColumn('OrderDate', 'equal', datePicker.element.value); 

            } else { 

                grid.removeFilteredColsByField('OrderDate'); 

            } 

        } }); 

            datePicker.appendTo('#OrderDate'); 

        },       

        }, 

  

    }; 

  }, 

    methods:{ 

actionBegin: function(args){            

            if(args.requestType == "filtering"){ 

                args.cancel= true; 

var currentPredicate, predicate=[]; 

    for (var i=0,len =MultiSelectVals.length;i<len;i++){ 

        currentPredicate = new Predicate("CustomerID", "equal", MultiSelectVals[i]); 

        predicate.push(currentPredicate); 

        } 

        var query = new Query().where(new Predicate.or(predicate) 

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

        grid.query = query; 

        grid.refresh(); 

           } 

        } 

    }, 

}, 

  

  

Sample link: https://next.plnkr.co/edit/jLtKg4JAkzHBGw7y 

  

Regards, 

Hariharan 

[Christopher Schipper]

Thank you for the response, Hariharan.

Unfortunately, the example you provided does not filter the date properly in the example and I am not able to force it to filter properly when following your example on my local computer. It seems to always find 0 records that match the selected date. Could this be an issue with the data, or possibly the filter itself?

Thank you,

Chris

[Christopher Schipper]

In addition to not filtering the data properly, it seems that removeFilteredColsByField() does not work either. It gives me an error in the console saying that the grid does not have a method named "removeFilteredColsByField()" which I am inclined to agree because this method does not show up anywhere in the api documentation for the grid.

See: https://ej2.syncfusion.com/vue/documentation/api/grid

I looked more into the documentation, and supposedly I should be able to use the clearFiltering() method and pass it the column whose filter I would like to clear. That does not work either. It does not work when I try to call it with no parameters either. It does not error out in the console, but it does not do anything either.

How do I remove filtering on a particular column?

Thank you,

Chris

[Hariharan J V]

Hi Christopher, 

  

We have modified a sample filterBarTemplate feasible to support the custom component in filtering. You can achieve the custom component with filtering in the filterBar mode using following code example and you can cleared the specific column by using removeFilteredColsByField. 

  

<ejs-grid ref='grid' :created='created' :actionComplete='actionComplete' :actionBegin='actionBegin' :allowPaging='true' :allowSorting='true' :allowFiltering='true'> 

    <e-columns> 

      <e-column field='OrderID' headerText='Order ID' :isPrimaryKey=true textAlign='Right' width='200'></e-column> 

      <e-column field='CustomerID' headerText='Customer ID'  textAlign='Right' :filterBarTemplate = 'templateOptions' width='120'></e-column>     

      <e-column field='OrderDate' headerText='Order Date' textAlign='Right' type="date" format='yMd' :filterBarTemplate ='dpTemplateOption' width='90'></e-column> 

    </e-columns> 

</ejs-grid> 

    </div> 

</template> 

.    .    .    . 

export default { 

  data() { 

    return { 

  

       templateOptions: { 

            create: function (args) { 

                elem = document.createElement('input'); 

                return elem; 

            }, 

            write: function (args) { 

               

                            dObj = new MultiSelect({ 

                dataSource: localData, 

                fields: { text: "CustomerID", value:'CustomerID' }, 

                

                change: function (args) {                    

                  var selVal = args.value; 

                  var grid =  document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 

                  MultiSelectVals = args.value;        

                  var currentPredicate, predicate=[]; 

    for (var i=0,len =MultiSelectVals.length;i<len;i++){     

        currentPredicate = new Predicate("CustomerID", "equal", MultiSelectVals[i]);       

        predicate.push(currentPredicate); 

                  } 

                  var query = new Query().where(new Predicate.or(predicate)) 

                   var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 

                   grid.query = query; 

                   grid.filterSettings.columns=[]; 

                   grid.refresh(); 

                   

                } 

              }); 

              dObj.appendTo(elem); 

            }, 

        },    

          dpTemplateOption:{ 

         create: function() {           

            var element = document.createElement('input'); 

            element.id = 'OrderDate'; 

            return element; 

        }, 

        write:function(args) { 

.     .     .   . 

        },       

        }, 

    } 

  }, 

  

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/sample587783029.zip 

  

Regards, 

Hariharan 

[Christopher Schipper]

Hariharan,

Thank you for the response. From your code example, I was able to discover that my dates were not filtering because they needed to be in the form of a JavaScript Date object. My dates now filter correctly.

I still have the issue of not being able to remove the filter from the date object. I have attempted to instantiate the grid variable by using the code you provided:

var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0];

This resulted in the grid object being undefined and therefor the method below was not callable:

grid.removeFilteredColsByField('OrderDate');

I was able to instantiate the grid by its' reference by doing the following:

var grid= this.$refs.grid;

When I try to call the following line of code, I get the following error:

grid.removeFilteredColsByField('OrderDate');

How can I get this function to work, or what code can I use to remove the filter on the column?

Thank you,

Chris

[Hariharan J V]

Hi Christoper, 

  

Query: what code can I use to remove the filter on the column? 

  

As per your query, you can take the instances of EJ2 Grid and clear the filtered column using following code example in the Vue platform. 

  

[code example] 

var gridInstances = this.element.closest(".e-grid").ej2_instances[0]   // Here, you can get the EJ2 Grid instances 

gridInstances. removeFilteredColsByField("OrderDate");   // Clear the OrderDate filter state 

  

Please get back to us, if you have any concern, 

  

Regards, 

Hariharan 

[Hariharan J V]

Hi Christoper, 

 

Please ignore last response. 

  

Query: what code can I use to remove the filter on the column? 

  

As per your query, you can take the instances of EJ2 Grid and clear the filtered column using following code example in the Vue platform. 

  

[code example] 

var gridInstances = this.element.closest(".e-grid").ej2_instances[0]   // Here, you can get the EJ2 Grid instances 

gridInstances. removeFilteredColsByField("OrderDate");   // Clear the OrderDate filter state 

  

Please get back to us, if you have any concern, 

  

Regards, 

Hariharan 

[Christopher Schipper]

Hariharan,

This worked. Thank you very much.

[Hariharan J V]

Hi Christoper,

Thanks for your update.

We are happy to hear that your problem has been resolved.

Regards,
Hariharan

[Jesse LaVere]

Can you please show how this (searching for multiple criteria programmatically) is done with the React package?

[Balaji Sekar]

Hi Jesse, 

 

By default, our Grid’s searching will work one value or column only 

Based on your query we have bound actionBegin event and prevent the default search action and customize the filter query based on the multiple keywords(search). Please refer the below code example and sample for more information. 

In actionComplete event, we have maintain the searched text in Search input element. 

 

Please refer the below code example and sample for more information. 

 

[index.js] 

 

  actionComplete(e) { 

    if (e.requestType === "refresh") { 

      this.grid.query = this.gquery; 

      document.getElementById( 

        this.grid.element.id + "_searchbar" 

      ).value = this.val; 

    } 

    if (e.requestType === "paging") { 

      document.getElementById( 

        this, 

        grid.element.id + "_searchbar" 

      ).value = this.val; // reset the searchstring 

    } 

  } 

 

  actionBegin(args) { 

    //Beverages_Condiments 

    if (args.requestType === "searching" && args.searchString.length > 0) { 

      const text = args.searchString.split(" "); //Split your search text based in Space and get the values 

      var flag = true; 

      var predicate; 

      this.val = args.searchString; 

      // preparing filter query 

      text.forEach(key => { 

        this.grid.getColumns().forEach(col => { 

          if (flag) { 

            predicate = new Predicate(col.field, "contains", key); 

            flag = false; 

          } else { 

            predicate = predicate.or(col.field, "contains", key); 

          } 

        }); 

      }); 

      this.grid.query = new Query().where(predicate); 

      this.gquery = this.grid.query; 

      this.grid.searchSettings.key = ""; //  resetting the search value 

      this.grid.refresh(); 

    } 

  } 

 

Sample link: https://stackblitz.com/edit/react-clpqrm-u9udku  

 

Help Documentation: https://ej2.syncfusion.com/react/documentation/api/grid/#actionbegin  

                                         https://ej2.syncfusion.com/react/documentation/api/grid/#actioncomplete  

 

Please get back to us, if you need further assistance. 

 

Regards, 

Balaji Sekar