Filter column programatically

[Patrick Kilgore]

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?

https://help.syncfusion.com/aspnetmvc-classic/grid/how-to/how-to-programmatically-filter-a-column

[mhlengi male]

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 {

            gridObj.clearFiltering();

        }

    });

   });

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

[Seeni Sakthi Kumar Seeni Raj]

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"> 

    <ul> 

        <li>equal</li> 

             . . 

    </ul> 

</div> 

 

@Html.EJ().Button("btn").Text("Filter").ClientSideEvents(events => events.Click("onClick")) 

 

@(Html.EJ().Grid<object>("Grid") 

        .Datasource((IEnumerable<object>)ViewBag.data) 

        .AllowPaging() 

        .AllowFiltering() 

             . . . 

                . . . 

) 

 

<script> 

    function onClick(args) { 

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

        var dropObj = $("#FilterOperators").ejDropDownList("instance"); 

        var val = dropObj.getValue(); 

        if (val == "clearfiltering") 

            gridObj.clearFiltering(); 

        else 

            gridObj.filterColumn("CustomerID", val, $("#GridCustomerIDFilter").val()); 

    } 

</script> 

 

 

Refer to the following API Reference Section of the Grid.  

 

https://help.syncfusion.com/api/js/ejgrid#methods:clearfiltering 

https://help.syncfusion.com/api/js/ejgrid#methods:filtercolumn 

https://help.syncfusion.com/api/js/ejgrid#members:filtersettings-filteredcolumns-operator 

 

We have prepared a sample that can be downloaded from the following location. 

 

Sample: http://www.syncfusion.com/downloads/support/forum/128190/ze/F128190405843902.zip 

 

Regards, 

Seeni Sakthi Kumar S. 

[Abrian Stemmet]

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:
https://www.syncfusion.com/kb/6312/how-to-store-retrieve-grid-model-values-into-from-database

[Seeni Sakthi Kumar Seeni Raj]

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.  

 

http://jsplayground.syncfusion.com/gjhhohtr 

 

Sample: http://www.syncfusion.com/downloads/support/forum/128190/ze/MvcApplication122539576.zip 

 

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.  

 

https://www.syncfusion.com/kb/6312/how-to-store-retrieve-grid-model-values-into-from-database 

 

Regards,  

Seeni Sakthi Kumar S. 

 

[Abrian Stemmet]

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

            alert(JSON.stringify(object));

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.columns(obj.cols);

            else

                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.

[Seeni Sakthi Kumar Seeni Raj]

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.  

 

Sample: http://www.syncfusion.com/downloads/support/forum/128190/ze/F128190-460452998.zip 

 

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.

 

Regards,  

Seeni Sakthi Kumar S. 

[Abrian Stemmet]

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

[Seeni Sakthi Kumar Seeni Raj]

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 

        $.ajax({ 

            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++) { 

                    fcol.push(filterCols[c].field); 

                } 

                gridObj._excelFilter.cFilteredCols = fcol; 

 

                //refresh the header to update the icons 

                gridObj.refreshHeader(); 

            }, 

        }); 

    } 

 

We have also modified the sample that can be downloaded from the following location.  

 

Sample: http://www.syncfusion.com/downloads/support/forum/128190/ze/F128190-1389366611.zip 

 

Regards,  

Seeni Sakthi Kumar S. 

[Abrian Stemmet]

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.

[Seeni Sakthi Kumar Seeni Raj]

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.  

 

Regards,  

Seeni Sakthi Kumar S.