This is a migrated thread and some comments may be shown as answers.

GridEditCommandColumn swap out default pencil image

1 Answer 49 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Kieran
Top achievements
Rank 1
Kieran asked on 27 Sep 2019, 05:40 PM

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

1 Answer, 1 is accepted

Sort by
0
Attila Antal
Telerik team
answered on 01 Oct 2019, 08:26 AM

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.
Tags
Grid
Asked by
Kieran
Top achievements
Rank 1
Answers by
Attila Antal
Telerik team
Share this question
or