GridEditCommandColumn swap out default pencil image

2 posts, 0 answers
  1. Kieran
    Kieran avatar
    2 posts
    Member since:
    Jun 2019

    Posted 27 Sep Link to this post

    Hi, I'm trying to swap out the default pencil image when using GridEditCommandColumn. Can you please instruct on how to accomplish that.  Thank you

  2. Attila Antal
    Admin
    Attila Antal avatar
    428 posts

    Posted 01 Oct Link to this post

    Hi Kieran,

     

    The easiest way is to replace the icon using CSS. This only works with the RenderMode="Lightweight" as this uses Font icons.

    Inspect the icon to find out which class is being used to style the icon (for example: .RadGrid .rgEditIcon:before

     

    Once you know the class, you can override it by adding your on CSS on the page. First, visit the List of Font Icons page and pick an icon that you like. You will need its Unicode which you can use in the CSS file to override the built-in icon.

    For example:

    <style type="text/css">
        html body .RadGrid .rgEditIcon:before {
            content: "\e646";
        }
    </style>

     

    Results

     

    For further customization, you can follow the suggestions in the first two points of the Improve Your Debugging Skills with Chrome DevTools blog post explaining how to inspect the generated HTML and check the applied styles for various elements. 

    Once you know the styles you need to override, you can use the same style selector and add "html body " in front of it to make it more specific, "stronger". More on CSS specificity you can find here: 

     

    Kind regards,
    Attila Antal
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top