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

Filter column programatically

Hi, I'm trying to set up a text box that filters a column outside of the built in filter feature.

I found the article below, which describes it, but it seems to want me to use the method QueryCellInfo that doesn't exist.  Has QueryCellInfo been replaced by some other method?


10 Replies

MM mhlengi male January 9, 2017 08:04 AM UTC

Hi  this is how i did it .

$(document).ready(function () {
 $("#owned-me").input(function () {
        var gridObj = $("#FlatGrid").data("ejGrid");
        if (this.value.length !== 0) {
            gridObj.filterColumn([{ field: "OwnerUserName", operator: ej.FilterOperators.equal, value: this.value, predicate: "and", matchcase: true }]);
        } else {

Hope this helps. also note to filter programatically, you need to enable  filtering on the grid ( .AllowFiltering()  )

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team January 9, 2017 12:07 PM UTC

Hi Patrick, 
Thanks for contacting Syncfusion Support. 
From your previous forums, we suspect that you are using ejGrid a JavaScript Grid but have referred a MVC Classic Grid Help Document. So we suggest to follow the solution explained below. 
We can use the filterColumn method to filter the Grid from the external sources. In the following code example, we have rendered the operators as a Dropdown and using that value, filterColumn method filters the Grid. 
<label>Filter CustomerID Column:</label> 
<input type="text" id="GridCustomerIDFilter"> @*text box*@ 
@*filter operators*@ 
@Html.EJ().DropDownList("FilterOperators").TargetID("Operators").WatermarkText("Select a Operator") 
<div id="Operators"> 
             . . 
@Html.EJ().Button("btn").Text("Filter").ClientSideEvents(events => events.Click("onClick")) 
             . . . 
                . . . 
    function onClick(args) { 
        var gridObj = $("#Grid").ejGrid("instance"); 
        var dropObj = $("#FilterOperators").ejDropDownList("instance"); 
        var val = dropObj.getValue(); 
        if (val == "clearfiltering") 
            gridObj.filterColumn("CustomerID", val, $("#GridCustomerIDFilter").val()); 
Refer to the following API Reference Section of the Grid.  
We have prepared a sample that can be downloaded from the following location. 
Seeni Sakthi Kumar S. 

AS Abrian Stemmet October 3, 2017 02:24 PM UTC

Good day

Regarding the programmatic filtering of the javascript grid we are able to filter as indicated:
gridObj.filterColumn("CustomerID", val, $("#GridCustomerIDFilter").val()); 

Setting this however does not update the grid's ui to reflect this filter.

How can this be achieved?

Please see the following link for reference of what we are trying to achieve:

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team October 4, 2017 06:14 AM UTC

Hi Abrian,  
Query #1: programmatic filtering of the javascript grid 
Using the provided code example, we have prepared a sample that can be downloaded from the following location.  
Query #2: KB discussion 
In the following KB, Grid has been filtered based on the model values. Whereas the filterColumn method will not deals with the model values and it will filter the values based on the parameters assigned to them. In the KB, we have assigned the stored values from the server-end to the filterSettings.filteredColumns directly. Refreshing the content using the refreshContent method will re-populate the Grid. Here, we cannot use the filterColumn method.  
Seeni Sakthi Kumar S. 

AS Abrian Stemmet October 4, 2017 09:27 AM UTC

Good day

Thank you for your reply. I need to explain more in what I am trying to achieve.

We are using the excel filtering functionality of the grid. We set filter criteria by using the grid's UI filtering functionality. We then get these filtered values by using the following code:

let grid: ej.Grid = $("#grid").ejGrid("instance");

            var state = {

                filteredCol: grid.model.filterSettings.filteredColumns.slice()


            var object = JSON.stringify(state); //converting object to string


We can then clear the filters and set the previous filters by using the following code:

var gridObj: ej.Grid = $("#grid").ejGrid("instance");

            var obj = JSON.parse(data);

            gridObj.model.filterSettings.filteredColumns = obj.filteredCol;

            if (obj.cols)



                gridObj.refreshContent();//Refresh the Grid to apply the saved settings

When we set the filters programatically the UI of the grid does not update to show the filters we set.

How can this be achieved? Kindly advise.

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team October 5, 2017 07:20 AM UTC

Hi Abrian,  
We are unable to reproduce any problem at our end with KB approach for Filtering.  We have prepared sample that can be downloaded from the following location.  
Provide the following details to analyze the problem at our end.  
  1. Complete code example of the Grid
  2. Screenshot with the replication procedure or vide demo of the issue
  3. If possible, modify the attached sample and reproduce the issue.
Seeni Sakthi Kumar S. 

AS Abrian Stemmet October 5, 2017 08:06 AM UTC

Thank you for your feedback. Unfortunately it still doesn't work.

Step 1: Change the grid to enable excel filtering: filterSettings : { filterType : "excel" }
Step 2: Create a filter on the EmployeeID to show ids between 1 and 5. The EmployeeID of the grid now shows that it has a filter on the column. When you open the excel filter menu the Number Filters is ticked and the popup menu shows between as ticked. When clicking on between you see the filter as previously set.
Step 3: You can now save this filter.
Step 4: Now we can clear the filter.
Step 5: Now we can apply the saved filter. This applies the filter to the grid which is correct. BUT IT DOES NOT UPDATE the excel menu of the EmployeeID column to show that there is a number filter of BETWEEN applied to this column. As previously explained the EXCEL UI filter does not update the column.

Please find screenshots attached. I hope it is now clear what we are trying to do.  

On a side note: Guys, the communication is not great and we are frustrated that it takes 3 times to explain what we are trying to do. Even in our previous support request we explicitly stated that we use Excel filtering but your example does not portray this. We need to improve here please.

Attachment: 20171005_100050_fb52d8ba.zip

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team October 6, 2017 06:28 AM UTC

Hi Nomesh,  
We are sorry for the inconvenience.  
Usually, apart from the Grid content, the Grid will not be refreshed while using the refreshContent. Since we are explicitly updating the values to the filteredColumns, we have update the Excel Filter and custom dialogs, externally. So, we suggest to push the filter collection to the cFilteredCols a property of the excelFilter, which will internally update the respective elements on dialog open. refreshHeader has been called to update the header icons in the Grid.  
    function applyState(args) { 
        var gridObj = $("#PersistenceGrid").ejGrid("instance"); 
        var obj = $('#list').ejDropDownList("instance"); 
        var value = obj.model.value; 
        //Post the saved (in ejDropDownlist) time 
        //To retrieve the Grid objects 
            type: "POST", 
            url: "/Home/Restate", 
            data: { "dropObject": value }, 
            success: function (data) { 
                var obj = JSON.parse(data); 
                gridObj.model.filterSettings.filteredColumns = obj.filterCol; 
                gridObj.refreshContent();//Refresh the Grid to apply the saved settings 
                //update filter collection to cFilteredCols 
                var filterCols = gridObj.filterColumnCollection, fcol = []; 
                for(var c = 0; c < filterCols.length; c++) { 
                gridObj._excelFilter.cFilteredCols = fcol; 
                //refresh the header to update the icons 
We have also modified the sample that can be downloaded from the following location.  
Seeni Sakthi Kumar S. 

AS Abrian Stemmet October 6, 2017 07:04 AM UTC

Thank you. This is working. Unfortunately I do not find the filterColumnCollection property in your documentation nor the API. How would we do this in TypeScript as there is no gridObj.filterColumnCollection?

We are defining the grid as follows:

var gridObj: ej.Grid = $("#grid").ejGrid("instance");
var filterCols = gridObj.filterColumnCollection, fcol = []; // This line does not work.

Kindly advise.

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team October 10, 2017 01:33 PM UTC

Hi Customer,  
Excel Filter UIs were updated on the interaction of the user with them. But, in your case, we are externally updating the values to the Grid Filters. However, we have achieved your requirement using some private properties and filterColumnCollection. But, we cannot avail the same in the typescript. So, we suggest to use the JavaScript provided in our previous update.  
Seeni Sakthi Kumar S. 

Live Chat Icon For mobile
Up arrow icon