Change Edit cancel icons for skin

[Atlas]

We are currently using the WebBlue skin, which overall, looks great. But, we don't like some of the icons associated with this skin. The edit pencil is blue, as are the select and cancel icons. Is it possible to just change the icon set to that of another skin?
I want the cancel to be red, and the edit pencil to look like an edit pencil, not an all blue pencil.

[Daniel]

Hello Nano,

You can try the following approach:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        GridEditCommandColumn editCol = RadGrid1.MasterTableView.GetColumn("myEditColumn") as GridEditCommandColumn;
        editCol.EditImageUrl = ClientScript.GetWebResourceUrl(RadGrid1.GetType(), "Telerik.Web.UI.Skins.Black.Grid.Edit.gif");
        RadGrid1.MasterTableView.EditFormSettings.EditColumn.UpdateImageUrl = ClientScript.GetWebResourceUrl(RadGrid1.GetType(), "Telerik.Web.UI.Skins.Black.Grid.Update.gif");
        RadGrid1.MasterTableView.EditFormSettings.EditColumn.CancelImageUrl = ClientScript.GetWebResourceUrl(RadGrid1.GetType(), "Telerik.Web.UI.Skins.Black.Grid.Cancel.gif");
    }
}

Best regards,
Daniel
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.

[Atlas]

Thanks for the reply, but I was hoping for something that I could do globally. Is the only resolution to perform this action for every control in the application?

Is it possible to use the style builder to select a different set of icons?
It would be really nice if I could create a skin based on webblue, and just change the icon set to office 2007 (for example).
Is there any way to do that?

[Daniel]

Hello Nano,

A more global approach would be to use CSS. Please note that you should use GridButtonColumn and PushButtons in this case. For your convenience I attached a runnable demo to this post.

Let me know whether this helps.

Best regards,
Daniel
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.

[Atlas]

I would not really classify this as a global approach. this is a page level approach with server code in the aspx page. Not something I would prefer to do. Is your approach indicating that I can't create a custom skin like I asked previously. It would really be nice to have more control over building custom skins.

[Daniel]

Hello Nano,

My code demonstrates how to override the default images - you only have to replace the server code that gets the images from the assembly.

Step 1) Replace the server code with local path:

before:

.rgCommandRow .rgCommandTable .rgAdd
{
   background: url('<%= ClientScript.GetWebResourceUrl(RadGrid1.GetType(), "Telerik.Web.UI.Skins.Black.Grid.AddRecord.gif") %>');
}

after:

.rgCommandRow .rgCommandTable .rgAdd
{
   background: url('Nano/AddRecord.gif');
}

Step 2) Put this code in external CSS file and register it on the page

I modified the previous demo for you - it is attached to this post (nano-demo-2.zip).


Of course, you can always use a custom skin if you prefer this approach - this is demonstrated in another demo, attached to this post - nano-demo-3.zip.

I hope this helps.

Regards,
Daniel
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.