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

Reset Multiple Filters and Highlighting Columns Where Filters are set

Thread ID:

Created:

Updated:

Platform:

Replies:

137531 May 13,2018 08:59 PM UTC Dec 12,2019 06:17 AM UTC ASP.NET MVC - EJ 2 5
loading
Tags: Grid
Buster
Asked On May 13, 2018 08:59 PM UTC

It gets confusing at times when you have multiple column filters set and the screen is scrolling hiding columns.  Is there a way to reset ALL filters in one step?  

Once a filter is set, is there a way to highlight it with a color to indicate this column filter has been set?

Mohammed Farook J [Syncfusion]
Replied On May 14, 2018 02:09 PM UTC

Hi Buster, 
 
Thanks for contacting Syncfusion Support. 
 
 
Query 1: It gets confusing at times when you have multiple column filters set and the screen is scrolling hiding columns. 
 
we are unable to reproduced the reported issue . could you please share the following details. 
 
  1. Please share grid code example.
  2. Please share the screenshot with reported issue.
  3. Please share the sample if it is possible
 
Query 2:  Is there a way to reset ALL filters in one step?   
 
Yes we can reset all filtered columns by ‘clearFiltering()’ method. Please find the document for your reference. 
 
 
 
Query 3:  Once a filter is set, is there a way to highlight it with a color to indicate this column filter has been set? 
 
We have created a sample ‘column header color indicate when apply filter action’ based on your requirement. Please find the code example and sample for your reference. 
 
 
 
Code example 
 
We have achieved your requirement by using ‘actionComplete’ event with its requestType as filtering  
 
 
 
<button onclick="resetFilter()">Reset Filter</button> 
    <br/> 
    <br/> 
    @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).ActionComplete("actionComplete").AllowFiltering().Height("400").Columns(col => 
    { 
        col.Field("OrderID").HeaderText("OrderID").Width("120").IsPrimaryKey(true).Add(); 
        col.Field("EmployeeID").HeaderText("EmployeeID").Width("120").Add(); 
        col.Field("CustomerID").HeaderText("FirstName").Width("120").Add(); 
        col.Field("ShipName").HeaderText("Ship Name").Width("120").Add(); 
    }).Render() 
</div> 
 
<script> 
 
    function actionComplete(args) { 
        if (args.requestType === 'filtering') { 
            var currentFlColumn = args.currentFilteringColumn; 
            curFilterCol = this.getColumnByField(args.currentFilteringColumn); 
            var alreadyFltrEle = this.element.querySelectorAll('.e-col-filtered'); 
            // header indicate color removed 
            for (var i = 0; i < alreadyFltrEle.length; i++) { 
                alreadyFltrEle[i].classList.remove('e-col-filtered'); 
            } 
            // header indicate color added 
            for (var j =0; j < this.filterSettings.columns.length; j++) { 
                var flcolFiled = this.filterSettings.columns[j].field; 
                var fltrColumn = this.getColumnByField(flcolFiled); 
                var targtEle = this.element.querySelectorAll("[e-mappinguid ='" + fltrColumn.uid + "']")[0].parentElement; 
                targtEle.classList.add('e-col-filtered'); 
            }    
        } 
    } 
 
    function resetFilter() { 
        var gridObj = document.getElementById("Grid")["ej2_instances"][0]; 
        gridObj.clearFiltering(); 
    } 
 
</script> 
 
 
 
 
Regards, 
J Mohammed Farook 


Buster
Replied On May 14, 2018 10:22 PM UTC

Query 1 was just a statement as to why I need to be able to clear all filters.  When you have multiple filters set there are times where you want to start all over and just press a button to reset all filters back to their original state.  

Thanks.

Mohammed Farook J [Syncfusion]
Replied On May 15, 2018 09:11 AM UTC

Hi Buster,  
 
Thanks for your update. 
 
Yes, we can clear all the filtered column by using ‘clearFiltering()’ method of Grid.  Please find the previous response of Query #2 for demo sample and the documentation for your reference.  
 
 
Please get back to us if you have any concerns. 
 
Regards, 
J Mohammed Farook 
 


Aman Thapar
Replied On December 9, 2019 06:38 PM UTC

Can you show how Query3 can be done in React?

Thavasianand Sankaranarayanan [Syncfusion]
Replied On December 12, 2019 06:17 AM UTC

Hi Aman 

Can you show how Query3 can be done in React? 
Query: Once a filter is set, is there a way to highlight it with a color to indicate this column filter has been set?  

We have achieved the reported query in React platform. You are able to filtering multiple column with indicates the header and clear the Grid filtering with color highlight. Please refer the below code example and sample for more information. 

[index.js] 
export class Filtering extends SampleBase { 
    constructor() { 
        super(...arguments);        
    } 
   
resetFilter() { 
        this.gridInstance.clearFiltering(); 
        this.gridInstance.refreshHeader(); 
    } 
    actionComplete(args){ 
       if (args.requestType === 'filtering') { 
           (args.currentFilteringColumn); 
            var alreadyFltrEle = this.gridInstance.element.querySelectorAll('.e-col-filtered'); 
            // header indicate color removed 
            for (var i = 0; i < alreadyFltrEle.length; i++) { 
                alreadyFltrEle[i].classList.remove('e-col-filtered'); 
            } 
            // header indicate color added 
            for (var j =0; j < this.gridInstance.filterSettings.columns.length; j++) { 
                var flcolFiled = this.gridInstance.filterSettings.columns[j].field; 
                var fltrColumn = this.gridInstance.getColumnByField(flcolFiled); 
                var targtEle = this.gridInstance.element.querySelectorAll("[e-mappinguid ='" + fltrColumn.uid + "']")[0].parentElement; 
                targtEle.classList.add('e-col-filtered'); 
            } 
             
        } 
    } 
    render() { 
        return (<div className='control-pane'> 
                <div className='control-section row'> 
                    <div style={{ padding: '14px 0' }}> 
                        <div className="select-wrap"> 
                             <button onClick={this.resetFilter.bind(this)}>Reset Filter</button> 
                        </div> 
                    </div> 
                    <GridComponent dataSource={categoryData} allowPaging={true} ref={grid => this.gridInstance = grid} pageSettings={{ pageSize: 10, pageCount: 5 }} allowFiltering={true} actionComplete={this.actionComplete.bind(this)}> 
                        <ColumnsDirective> 
                         .   .    .     . 
                        </ColumnsDirective> 
                        <Inject services={[Filter, Page]}/> 
                    </GridComponent> 
                </div> 


 
Please get back to us, if you need further assistance. 
 
Regards, 
Thavasianand 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.

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