How to show a colums is filtered

[Silvio]

Hi,

I'm wondering how it is possible to visually show to the user when a particular column of a grid is filtered.
I've found this discussion that perfect answer my question:

https://www.syncfusion.com/forums/137531/reset-multiple-filters-and-highlighting-columns-where-filters-are-set

but unfortunately it works on EJ2.

Is there a similar solution con EJ1?

Thank you.

[Vignesh Natarajan]

Hi Silivo,  

 

Thanks for contacting Syncfusion support.  

 

Query: “how it is possible to visually show to the user when a particular column of a grid is filtered.” 

 

From your query, we understand that you need to show visually (highlight) when the column filtered. We have achieved your requirement using actionComplete event and getColumnIndexByFiled() method of ejGrid. Refer the below code example 

 

<style type="text/css"> 

    .e-ejinputtext.e-filtertext.fill { 

        background: yellow; 

    } 

</style> 

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

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

                .AllowSorting() 

                .AllowFiltering() 

                .AllowPaging()                

                .IsResponsive() 

                .Columns(col => 

                { 

………………………………………. 

                }) 

                .ClientSideEvents(e => e.ActionComplete("complete"))) 

<script type="text/javascript"> 

    complete: function(args) { 

        if (args.requestType == "filtering") { 

            // use this if condition if you want to highlight the last filtered column. 

            if (this.getHeaderTable().find(".e-filtertext").hasClass("fill")) 

                this.getHeaderTable().find(".e-filtertext").removeClass("fill"); 

            for (var i = 0; i < this.model.filterSettings.filteredColumns.length; i++) { 

// we have used current filtering column index. so while clearing the incident it highlight the cell when multiple columns are filtered  

                var index = this.getColumnIndexByField(args.currentFilteringColumn);  

                 var cell = this.getHeaderTable().find(".e-filtertext").eq(index); 

                cell.addClass("fill"); 

            } 

        } 

    } 

</script> 

 

Refer the below screenshot for the output 

 

 

     

Refer our API documentation for your reference 

 

https://help.syncfusion.com/api/js/ejgrid#events:actioncomplete  

 

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

 

Please get back to us if above solution does not resolve your query.  

 

Regards, 

Vignesh Natarajan. 

[Silvio]

Thank you very much for your reply.

But, if in my grid I use FilterType Excel (FilterSettings(d => d.FilterType(FilterType.Excel))), what change could I make in the "complete" function to yellow colouring the celle background of the header related cell column ?

[Vignesh Natarajan]

Hi Silvio, 

 

Thanks for the update.  

 

Query: what change could I make in the "complete" function to yellow colouring the celle background of the header related cell column ? 

 

As per your requirement we have modified our solution to change the background color of headercell when using excel filter. 

 

Please refer the below code example, 

 

<style type="text/css">  

    .fill {  

        background: yellow;  

    }  

</style>  

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

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

                .AllowSorting()  

                .AllowFiltering()  

                .AllowPaging()                 

                .IsResponsive()  

                .Columns(col =>  

                {  

……………………………………….  

                })  

                .ClientSideEvents(e => e.ActionComplete("complete")))  

<script type="text/javascript">  

    function complete (args) {  

       if(args.requestType == "filtering"){ 

             // use this if condition if you want to highlight the last filtered column.  

         if (this.getHeaderTable().find(".e-headercelldiv").hasClass("fill"))  

               this.getHeaderTable().find(".eheadercelldiv").removeClass("fill");  

            for (var i = 0; i < this.model.filterSettings.filteredColumns.length; i++){  

// we have used current filtering column index. so while clearing the incident it highlight the cell when multiple columns are filtered   

                var index = this.getColumnIndexByField(args.currentFilteringColumn);   

                 var cell = this.getHeaderTable().find(".e-headercelldiv").eq(index);  

                cell.addClass("fill");  

        } 

      } 

   }  

</script>  

 

 

 

Refer the below screenshot for the output 

 

 

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan. 

 

[Silvio]

Thank you!

I've tried your suggestion but it seems that the background color is not resetted when the filter is cleared.

I supposed that this line 

if (this.getHeaderTable().find(".e-headercelldiv").hasClass("fill"))  

               this.getHeaderTable().find(".eheadercelldiv").removeClass("fill");  

should remove the fill class, so that the yellow background should automatically disappear.

But it seems not to work and the column where you clear the filter remains yellow.

[Vignesh Natarajan]

Hi Silvio, 

 

Sorry for the inconvenience caused.  

 

Query: “I've tried your suggestion but it seems that the background color is not resetted when the filter is cleared.” 

 

We are able to reproduce the reported issue at our end while using the provided code example. So we have modified the code to remove the highlight when filtering is removed. Please refer the below modified code for your reference 

 

<script type="text/javascript">   

    function complete (args) {   

       if(args.requestType == "filtering"){  

             // use this if condition if you want to highlight the last filtered column.   

         if (this.getHeaderTable().find(".e-headercelldiv").hasClass("fill"))   

               this.getHeaderTable().find(".e-headercelldiv").removeClass("fill") 

            for (var i = 0; i < this.model.filterSettings.filteredColumns.length; i++){   

// we have used current filtering column index. so while clearing the incident it highlight the cell when multiple columns are filtered    

                var index = this.getColumnIndexByField(args.currentFilteringColumn);    

                 var cell = this.getHeaderTable().find(".e-headercelldiv").eq(index);   

                cell.addClass("fill");   

        }  

      }  

   }   

</script>   

 

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan.  

[Silvio]

Thank you !

A '-' character was missing!

Have a nice day.

[Vignesh Natarajan]

Hi Silvio,  

Thanks for update. 

We are glad to know that your query has been resolved by our solution.  

Please get back to us if you have further queries.  

Regards, 

Vignesh Natarajan.