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

How to show a colums is filtered

Thread ID:

Created:

Updated:

Platform:

Replies:

144002 Apr 13,2019 02:56 PM UTC Apr 17,2019 07:36 AM UTC ASP.NET MVC (Classic) 7
loading
Tags: Grid
Silvio
Asked On April 13, 2019 02:56 PM UTC

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:


but unfortunately it works on EJ2.
Is there a similar solution con EJ1?

Thank you.

Vignesh Natarajan [Syncfusion]
Replied On April 15, 2019 05:40 AM UTC

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 
 
 
 
Please get back to us if above solution does not resolve your query.  
 
Regards, 
Vignesh Natarajan. 


Silvio
Replied On April 15, 2019 09:03 AM UTC

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 [Syncfusion]
Replied On April 16, 2019 09:26 AM UTC

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
Replied On April 16, 2019 12:44 PM UTC

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 [Syncfusion]
Replied On April 17, 2019 04:07 AM UTC

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
Replied On April 17, 2019 07:18 AM UTC

Thank you !

A '-' character was missing!
Have a nice day.

Vignesh Natarajan [Syncfusion]
Replied On April 17, 2019 07:36 AM UTC

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. 


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