1. Home
  2. Forum
  3. ASP.NET Core
  4. Programically clear all filters + set a new one at the same time

Programically clear all filters + set a new one at the same time

Hi,

Query 1: I am trying to add a feature to clear out all the filters currently set in the grid and set a new one at the same time. (via a button click)

I can get it to clear out all the filters by doing something like this:

var gridObj = $("#MyGrid").ejGrid("instance");
gridObj.model.filterSettings.filteredColumns = [];
gridObj.refreshContent();

When I try to clear out the filters and add a new one it doesn't work.  It does not remove the old filters.

var gridObj = $("#MyGrid").ejGrid("instance");
gridObj.model.filterSettings.filteredColumns = [];

// months start at 0 in javascript
var dateFilter = new Date(2015, 11, 31, 0, 0, 0);

gridObj.model.filterSettings.filteredColumns = [
     { field: "CreationDate", operator: "greaterthan", predicate: "and", matchcase: true, value: dateFilter },
];

gridObj.refreshContent();

Query 2: I am using Excel filters.  I noticed that when you clear out the filters programically the column header still looks like it has been filtered even though the filter has been removed.  (The filter icon has a line through it).  Is there any way to clear filters + change the icon to what it is supposed to be?

Thanks,
Chris


7 Replies
SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team August 3, 2018 06:07 AM UTC

Hi Chris,  
 
Thanks for contacting Syncfusion Support.  
 
We can clear and update the Grid filters along with the filter icons in the following way.  
 
    function applyState(obj) { 
        var gridObj = $("#PersistenceGrid").ejGrid("instance"); 
        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(); 
             
    } 
 
 
Regards,  
Seeni Sakthi Kumar S. 


CH Chris August 3, 2018 04:53 PM UTC

Hi,

I'm sorry, I don't understand the sample.  What is calling "ApplyState"?  How is the "obj" parameter set up?

I set it up by creating a custom button in the grid's toolbar.  My code looks like this:

function OnToolbarClick(args) {
     if (args.itemName == "ClearFilters") {
          var gridObj = $("#MyGrid").ejGrid("instance");

          // months start at 0 in javascript
          var dateFilter = new Date(2015, 11, 31, 23, 59, 59);

          // clear out any existing filters and create a new filter to show only rows created after Dec 31, 2015
          gridObj.model.filterSettings.filteredColumns = [
               { field: "CreationDate", operator: "greaterthan", predicate: "and", matchcase: true, value: dateFilter },
          ];

          gridObj.refreshContent();
     }
}

The problem I'm facing is that gridObj.refreshContent() is not refreshing the grid.  Or it thinks that the filters have not changed.  The spinning icon comes up but when it is finished the rows in the grid have not changed. I had the console open in Chrome and didn't see any errors.

If I change the line that sets filteredColumns to "gridObj.model.filterSettings.filteredColumns = [];" it works correctly but then I don't meet my requirement of showing rows that were created after Dec 31, 2015.

Thanks,
Chris

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team August 6, 2018 12:05 PM UTC

Hi Chris,  
 
We have prepared a sample with the provided solution that can be downloaded from the following location.  
 
 
As per your codes, we have modified the code example as follows with the toolbar-click event and updated the filteredColumns. This solution ensured to clear the existing filters applied to Grid and updating the new filters. Later, headers has been refreshed to update the filter icons. 
 
<ej-grid id="FlatGrid" datasource="ViewBag.dataSource" allow-paging="true" allow-filtering="true" filter-settings="@(new FilterSettings() { FilterType=FilterType.Excel})" toolbar-click="click"> 
 
               .... 
 
</ej-grid> 
 
<script id="button" type="text/x-jsrender"> 
    <button type="button">Click</button> 
</script> 
 
<script type="text/javascript"> 
    function click(args) { 
        var gridObj = $("#FlatGrid").ejGrid("instance"); 
        gridObj.model.filterSettings.filteredColumns = [{ field: "OrderID", operator: "equal", value: 10258, predicate: "or", matchcase: false }]; 
        gridObj._excelFilter._predicates = []; 
        gridObj.refreshContent(); 
        gridObj.refreshHeader(); 
        gridObj.setWidthToColumns(); 
    } 
</script> 
 
Refer the following links to know about refreshContent, refreshHeader, setWidthToColumns methods of Grid: 
 
 
Regards,  
Seeni Sakthi Kumar S. 


CH Chris August 7, 2018 09:54 PM UTC

Thank you, that worked.

Chris

TS Thavasianand Sankaranarayanan Syncfusion Team August 8, 2018 06:54 AM UTC

Hi Chris, 
 
We are happy that the problem has been solved. 
 
Please get back to us if you need any further assistance.  
                          
Regards, 
Thavasianand S.                         


CH Chris August 10, 2018 09:50 PM UTC

Hi again,

Thank you for your previous help, I have some more questions regarding this.

Question 1

In one case I don't think I am fully clearing the filter.  The filter is set by clicking filter icon, choosing "Text Filters" and then "Contains". The column is a FK to another table, the type is set as "string".  It has its own datasource method.  (of type URL)

It looks like this in gridObj.model.filterSettings.filteredColumns:

{value: 161163, operator: "equal", isCustom: true, actualFilterOperator: "contains", actualFilterValue: "abc-123", actualPredicate: "or", actuals: [{actualFilterOperator: "contains", actualFilterValue: "abc-123", actualPredicate: "or", field: "FileId", isCustom: true, matchcase: false, operator: "contains", predicate: "or", value: "abc-123"}], field: "FileId", matchcase: false, operator: "equal", predicate: "or"}

After clearing the filter using my button, if I attempt to set the same filter again I get this javascript error "TypeError: Cannot read property 'actuals' of undefined".  Also, "abc-123" is still in the custom filter dialog.

How do I properly clear this filter programmatically?

Question 2

This applies to all the string columns including the ones that are just text.  I can filter by "Text Filters" -> "Contains" one time successfully.  I cannot filter the same column a second time. If I go back in and change the value to something else I get an "Uncaught TypeError: Cannot read property 'indexOf' of undefined" javascript error.  This is also happens if I clear the filter first.  (using my button or using the syncfusion menus)

Question 3

The users frequently set more then one filter at the same time.  I have been tasked with making a screen where they can set all their filters in one place.  I have an idea on how to do it but I'm not sure how to do it for the FK column that was described in Question 1 programmatically.  How can I do it by adding to the gridObj.model.filterSettings.filteredColumns array?

Thanks,
Chris


VN Vignesh Natarajan Syncfusion Team August 14, 2018 02:51 AM UTC

Hi Chris, 
 
Thanks for the update. 
 
Query1 & Query2: “if I attempt to set the same filter again I get this javascript error "TypeError: Cannot read property 'actuals' of undefined".  Also, "abc-123" is still in the custom filter dialog.” && “I cannot filter the same column a second time.” 
 
From your query we understand that you you are facing issue while filtering the ForeignKey column. We have prepared a sample with foreignkey column and we are not able to reproduce the reported issue at our.  
 
kindly refer the blow link for the sample. 
 
 
Share the following details to reproduce the reported issue at our end. 
 
1.       Share the Grid code example 
2.       Share the video demonstration (with replication procedure) of reported issue. 
3.       Share the screenshot of script error in console window with full stack trace. 
4.       If possible try to produce the reported issue in provided sample. 
 
 
Query3: “How can I do it by adding to the gridObj.model.filterSettings.filteredColumns array?” 
 
We suspect that you to filter multiple column on single button click. We suggest you to achieve your requirement by filterColumn() method of ejGrid. 
 
Refer the below code example 
 
function clik2() { 
        var gridObj = $("#FlatGrid").ejGrid("instance"); 
        gridObj.filterColumn([{ field: "OrderID", operator: "lessthan", value: 10281, predicate: "or", matchcase: true },//normal column 
        { field: "EmployeeID", operator: "equal", value: 5, predicate: "or", matchcase: true }// foreignKey column]) 
 
    } 
 
Note: here we have filtered the ForeignKeycolumn based on the foreignKey field value. If you want to perform filtering based on the text displayed then you need to use ForeignKey Adaptor . Refer our UG documentation for your reference 
 
  
Regards, 
Vignesh Natarajan 


Loader.
Up arrow icon