Reset Multiple Filters and Highlighting Columns Where Filters are set

[Buster]

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]

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. 

 

ClearAll filter columns : https://ej2.syncfusion.com/16.1.37/documentation/grid/api-grid.html?lang=typescript#clearfiltering  

 

 

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. 

 

 

Sample :  http://www.syncfusion.com/downloads/support/directtrac/general/ze/gridmvclocalization-681634871.zip  

 

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> 

 

 

 

actioncomplete: https://ej2.syncfusion.com/16.1.37/documentation/grid/api-grid.html?lang=typescript#actioncomplete  

 

Regards, 

J Mohammed Farook 

[Buster]

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]

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.  

 

ClearAll filter columns : https://ej2.syncfusion.com/16.1.37/documentation/grid/api-grid.html?lang=typescript#clearfiltering   

 

Please get back to us if you have any concerns. 

 

Regards, 

J Mohammed Farook 

 

[Aman Thapar]

Can you show how Query3 can be done in React?

[Thavasianand Sankaranarayanan]

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> 

Sample link: https://stackblitz.com/edit/react-2bkz8q-8q7rny?file=index.js 

 

Please get back to us, if you need further assistance. 

 

Regards, 

Thavasianand S.