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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Multiple Filter Types on Single Grid

Thread ID:

Created:

Updated:

Platform:

Replies:

144341 May 1,2019 05:12 PM UTC Oct 15,2020 02:55 AM UTC Vue 13
loading
Tags: Data Grid
Christopher Schipper
Asked On May 1, 2019 05:12 PM UTC

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 [Syncfusion]
Replied On May 3, 2019 03:40 AM UTC

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
Replied On May 3, 2019 07:38 PM UTC

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.


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

Thank you

Hariharan J V [Syncfusion]
Replied On May 7, 2019 04:26 PM UTC

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(); 
           } 
        } 
    }, 
}, 
  
  
  
Regards, 
Hariharan 


Christopher Schipper
Replied On May 8, 2019 12:16 PM UTC

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
Replied On May 9, 2019 12:46 PM UTC

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 [Syncfusion]
Replied On May 10, 2019 05:29 PM UTC


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) { 
.     .     .   . 
        },       
        }, 
    } 
  }, 
  
  
Regards, 
Hariharan 


Christopher Schipper
Replied On May 13, 2019 03:33 PM UTC

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 [Syncfusion]
Replied On May 14, 2019 12:44 PM UTC

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 [Syncfusion]
Replied On May 15, 2019 12:16 PM UTC

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
Replied On May 16, 2019 12:04 PM UTC

Hariharan,

This worked. Thank you very much.

Hariharan J V [Syncfusion]
Replied On May 17, 2019 05:26 AM UTC

Hi Christoper,

Thanks for your update.

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

Regards,
Hariharan

Jesse LaVere
Replied On October 13, 2020 10:21 PM UTC

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

Balaji Sekar [Syncfusion]
Replied On October 15, 2020 02:55 AM UTC

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(); 
    } 
  } 
 
 
                                         https://ej2.syncfusion.com/react/documentation/api/grid/#actioncomplete  
 
Please get back to us, if you need further assistance. 
 
Regards, 
Balaji Sekar 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

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

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
Live Chat Icon