GridEditCommandColumn swap out default pencil image

[Kieran]

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

[Attila Antal]

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: 

• Specifics on CSS Specificity;
• CSS Specificity: Things You Should Know;
• Specificity - CSS | MSDN;

 

Kind regards,
Attila Antal
Progress Telerik