This is a migrated thread and some comments may be shown as answers.
spreadsheet filter icon change and allignment
3 Answers 8 Views
This is a migrated thread and some comments may be shown as answers.
Janaki
Top achievements
Rank 1
Janaki asked on 22 Apr 2020, 07:00 PM

HI,

 

Attached an image of how my cell looks. changed the icon of filter, but on click of it the filter drop down doesn't open. When i click on right-top (even if this is blank space) it opens.

3 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 24 Apr 2020, 10:00 AM

Hi Janaki,

Can you please shed more light on how you have changed the filter icon?

If you have only changed the font icon content and size then everything should work as expected, e.g.

.k-i-arrow-60-down::before, .k-i-arrow-s::before, .k-i-collapse::before, .k-i-expand-s::before, .k-i-sarrow-s::before {
    content: "\e031" !important;
}

For your convenience, I recorded a short video demonstrating the solution. You can find the list of available Kendo Font Icons in the documentation.

Regards,
Rumen
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Janaki
Top achievements
Rank 1
answered on 24 Apr 2020, 10:05 AM

im changing it this way

 

.k-i-arrow-60-down:before {
  content: "\e913";
  font-family: icomoon;
}
.k-spreadsheet-filter {
  margin-left: -8px;
  top: 33px !important;
}

 

The icon gets changed aligned as well . but the the drop down only open when i click the  top right area and doesnt open when i click the icon

0
Rumen
Telerik team
answered on 24 Apr 2020, 11:05 AM

Hi Janaki,

Thank you for the extra details and the example!

I see that you are changing the position of the filter button, which breaks its click handler. Another issue is that by setting it in this way, if there is a height set, and if the user scrolls, the icon will remain fixed at the top and will not move.

With the current implementation of the Spreadsheet, you can only change the font icon but not reposition the button since this breaks the overflow-button handler.

So please remove the 

 

.k-spreadsheet-filter {
  margin-left: -8px;
  top: 33px !important;
}

 

class and keep only the

 

.k-i-arrow-60-down:before {
  content: "\e913";
  font-family: icomoon;
}

one.

Regards,
Rumen
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Asked by
Janaki
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Janaki
Top achievements
Rank 1
Share this question
or