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.
Unfortunately, activation email could not send to your email. Please try again.

Filter column programatically

Thread ID:

Created:

Updated:

Platform:

Replies:

128190 Jan 6,2017 02:11 PM Oct 10,2017 09:33 AM ASP.NET MVC 10
loading
Tags: Grid
Patrick Kilgore
Asked On January 6, 2017 02:11 PM

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
Replied On January 9, 2017 03:04 AM

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 [Syncfusion]
Replied On January 9, 2017 07:07 AM

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.  
 
 
We have prepared a sample that can be downloaded from the following location. 
 
 
Regards, 
Seeni Sakthi Kumar S. 


Abrian Stemmet
Replied On October 3, 2017 10:24 AM

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 [Syncfusion]
Replied On October 4, 2017 02:14 AM

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.  
 
 
Regards,  
Seeni Sakthi Kumar S. 
 


Abrian Stemmet
Replied On October 4, 2017 05:27 AM

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 [Syncfusion]
Replied On October 5, 2017 03:20 AM

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.
 
Regards,  
Seeni Sakthi Kumar S. 


Abrian Stemmet
Replied On October 5, 2017 04:06 AM

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 [Syncfusion]
Replied On October 6, 2017 02:28 AM

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.  
 
 
Regards,  
Seeni Sakthi Kumar S. 


Abrian Stemmet
Replied On October 6, 2017 03:04 AM

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 [Syncfusion]
Replied On October 10, 2017 09:33 AM

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. 


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.

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.

;