GridBuilder Change arrow icon to '+'

4 posts, 1 answers
  1. Scott
    Scott avatar
    7 posts
    Member since:
    Apr 2016

    Posted 12 May Link to this post

    Hello. I have a standard Kendo Grid using GridBuilder. Currently, you expand a record with the arrow icon.  Is it possible to switch this to a '+' sign?
  2. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 13 May Link to this post

    Hi Scott,

    To achieve this you should change the defaults icons with custom ones. The following CSS rules should help:
    .k-grid .k-hierarchy-cell .k-minus {
        background-image: url('/* ... */');
        background-position: 0 0;
    }
     
    .k-grid .k-hierarchy-cell .k-plus {
        background-image: url('/* ... */');
        background-position: 0 0;
    }

    Regards,
    Iliana Nikolova
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Scott
    Scott avatar
    7 posts
    Member since:
    Apr 2016

    Posted 13 May in reply to Iliana Nikolova Link to this post

    That did the trick, thanks! 
  5. Stefan Timm
    Stefan Timm avatar
    6 posts
    Member since:
    May 2007

    Posted 18 Oct in reply to Iliana Nikolova Link to this post

    That's not working anymore. Try this:

    .k-grid .k-hierarchy-cell .k-i-collapse {
     
        background-image: url('../Images/minus.png');
        background-position: 0 0;
    }
     
      
    .k-grid .k-hierarchy-cell .k-i-expand {
     
        background-image: url('../Images/plus.png');
        background-position: 0 0;
     
    }
Back to Top
UI for ASP.NET MVC is VS 2017 Ready