Change filter column icon when filter is added

[Sriram]

Hi,

I need to change the default icon for the Kendo Grid when the filter is selected. Currently it displays the below icon by default. I have attached the screenshot of the current grid which we are using.

.k-i-more-vertical
Unicode: e031

So when the user adds a filter I need it to change to the below

k-i-filter-sm

Unicode: e12b

I need to do this in either my css file or any common javascript file. Please advise. Below is the current configuration which I am using.

Version: 2019.2.619.545 (Kendo Web Extensions for ASP.NET MVC)
MVC version: 5.0
IDE: Visual Studio 2015
Browser : Chrome  76.0.3809.100, IE 11.0
.Net Framework: 4.6.2
Programming Language: C#

[Petar]

Hi Sriram,

If I am understanding the described scenario correctly, applying the following CSS should achieve the desired functionality.

    .k-state-active > .k-i-more-vertical::before {
            content: "\e12b";
        }

Let me know if the above resolves the issue in the application you are working on. 

Regards,
Petar
Progress Telerik

[Sriram]

Hi Petar,

I tried this option but it did not work.

[Petar]

Hi Sriram,

Please check the attached project and let me know if it demonstrates the desired functionality. In another zip file there is a video with the changing filter icon. 

If filters' behavior in the attached project is the one you want to achieve then you will have to check your CSS styles trying to find what is overwriting the default Grid styling. If the behavior is not the correct one, please give me more details about the targeted functionality. 

If you don't manage to resolve the issue, you can send me a runnable project in which the reported behavior can be reproduced. If you don't want to share your code with the community, you can open a support ticket about this case and we will handle it according to its response time. 

Regards,
Petar
Progress Telerik

[Sriram]

Thanks Petar. I will give it a try.

[Petar]

Hi Sriram,

Take your time to check the functionality demonstrated in the project. I hope it will help you resolve the issue in the application you are working on. 

Regards,
Petar
Progress Telerik

[Sriram]

Hi Petar,

I tried the below option again and I noticed that I had to add some additional properties for the override.css which we were using in the project. It works now.

.k-state-active > .k-i-more-vertical::before {
    content: "\e129";
    color: white;
    background-color: #174d98;
}

 

Also I had to override some additional css properties to get it working like below.

a.k-header-column-menu.k-state-active {
    background: #174d98;
    margin: -1.3px -5.2px -5.2px 0px;
}
.k-menu .k-state-selected>.k-link {
    color: #fff;
    background-color: #174d98;
    border-color: #b6b6b6;
    background-image: url(textures/highlight.png);
    background-image: none,linear-gradient(to bottom,rgba(255,255,255,.15) 0,rgba(255,255,255,0) 100%);
}

[Petar]

Hi Sriram,

I am glad to hear that you've managed to resolve the issue!

Thank you for sharing what worked on your end. This may help someone in the future. 

Regards,
Petar
Progress Telerik

[Hung]

Using kendo ASP.NET core, is there a way for me to hide the filter icon, then display the filter when user move the cursor in the column header? (or make the icon much smaller, no background color?)

[Petar]

Hi Hung,

The targeted functionality can be implemented using the following code inside the dataBound function of the Grid. 

  $(".k-i-filter").hide();
  $('[role="columnheader"]').on("mouseover", function(e){		
    $(e.target).find(".k-i-filter").show();
  });
  $('[role="columnheader"]').on("mouseout", function(e){
    $(".k-i-filter").hide();
  });

The above code can be observed in action in this Dojo example. The same code is applicable in the context of UI for ASP.NET Core and you can directly use it.

I hope the example will help you implement the targeted functionality in your application.

Regards,
Petar
Progress Telerik

[Hung]

Peter. 

You are great.

Thanks.

 

[Petar]

Hi Hung,

Thank you for the positive feedback! I am happy that the suggested approach has helped you implement the targeted functionality in the application you are working on.

Regards,
Petar
Progress Telerik

[Hung]

Peter, 

I am using the code below to hide/show the filter icon, it worked great

$(".k-i-filter").hide(); $('[role="columnheader"]').on("mouseover", function(e){ $(e.target).find(".k-i-filter").show(); }); $('[role="columnheader"]').on("mouseout", function(e){ $(".k-i-filter").hide(); });

currently, when the column is filtered, a blue box is displayed. If we just want to display just a filter icon in blue or some other color ?

Thanks.

[Petar]

Hi Hung,

Here is Dojo demonstrating the implementation of the targeted functionality of the filter icon. To implement it, the following CSS is used. 

     .k-grid-header .k-grid-filter.k-state-active{
        background-color:transparent;
      }
      
      .k-grid-header .k-grid-filter.k-state-active > span{
        display: initial !important;
        color: blue;
      }

You can see that there is the 'important' keyword added to the display property of the second style definition. Although it is not a good practice to use the 'important' keyword, it is needed in the current scenario because the filter icon has an inline style which has to be overwritten. 

Regards,
Petar
Progress Telerik

[Hung]

Petar, Thanks. There is no way for me to figure out this trick. As a developer on window apps for last several years, working on these web layout is really challenge for me. 

Regards.

[Petar]

Hi Hung,

I couldn't understand from your post if the suggested approach has helped you implement the targeted functionality. Does the filter start working according to the requirements, after applying the shared CSS style? 

Regards,
Petar
Progress Telerik

[Hung]

Petar, 

Sorry, it worked great!

Thanks

[Petar]

Great! :)

Regards,
Petar
Progress Telerik