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.

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

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

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