This is a migrated thread and some comments may be shown as answers.

Change filter column icon when filter is added

17 Answers 99 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sriram
Top achievements
Rank 1
Sriram asked on 18 Jan 2020, 12:35 AM

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#

17 Answers, 1 is accepted

Sort by
0
Petar
Telerik team
answered on 21 Jan 2020, 01:53 PM

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

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
0
Sriram
Top achievements
Rank 1
answered on 21 Jan 2020, 08:16 PM

Hi Petar,

I tried this option but it did not work.

0
Petar
Telerik team
answered on 23 Jan 2020, 10:00 AM

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

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
0
Sriram
Top achievements
Rank 1
answered on 24 Jan 2020, 09:41 PM
Thanks Petar. I will give it a try.
0
Petar
Telerik team
answered on 27 Jan 2020, 07:41 AM

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

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
0
Sriram
Top achievements
Rank 1
answered on 30 Jan 2020, 03:38 PM

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%);
}
0
Petar
Telerik team
answered on 31 Jan 2020, 10:12 AM

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

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
0
Hung
Top achievements
Rank 1
Veteran
answered on 03 Aug 2020, 07:10 PM
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?)
0
Petar
Telerik team
answered on 05 Aug 2020, 12:35 PM

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

0
Hung
Top achievements
Rank 1
Veteran
answered on 05 Aug 2020, 11:12 PM

Peter. 

You are great.

Thanks.

 

0
Petar
Telerik team
answered on 07 Aug 2020, 10:19 AM

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

0
Hung
Top achievements
Rank 1
Veteran
answered on 24 Aug 2020, 02:13 PM

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.

0
Petar
Telerik team
answered on 25 Aug 2020, 10:47 AM

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

0
Hung
Top achievements
Rank 1
Veteran
answered on 25 Aug 2020, 03:14 PM

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.

0
Petar
Telerik team
answered on 25 Aug 2020, 03:40 PM

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

0
Hung
Top achievements
Rank 1
Veteran
answered on 25 Aug 2020, 03:43 PM

Petar, 

Sorry, it worked great!

Thanks

0
Petar
Telerik team
answered on 25 Aug 2020, 04:17 PM

Great! :)

Regards,
Petar
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

Tags
Grid
Asked by
Sriram
Top achievements
Rank 1
Answers by
Petar
Telerik team
Sriram
Top achievements
Rank 1
Hung
Top achievements
Rank 1
Veteran
Share this question
or