spreadsheet filter icon change and allignment

4 posts, 0 answers
  1. Janaki
    Janaki avatar
    4 posts
    Member since:
    Nov 2019

    Posted 22 Apr Link to this post

    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.

  2. Rumen
    Admin
    Rumen avatar
    14316 posts

    Posted 24 Apr Link to this post

    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.
  3. Janaki
    Janaki avatar
    4 posts
    Member since:
    Nov 2019

    Posted 24 Apr in reply to Rumen Link to this post

    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

  4. Rumen
    Admin
    Rumen avatar
    14316 posts

    Posted 24 Apr Link to this post

    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.
Back to Top