Custom Skin - Wrong path to command buttons

[Justin Lee]

I created a custom skin via copying the Default skin.  Before I edited the skin at all, I ran into a problem with the row command buttons not showing up. (Edit, Delete, Save, etc).  The paging buttons show up fine, and the skin is being applied. (I changed some font sizes to make sure the skin was being applied)  I also double-checked that I had the button images in the Grid folder of my skin.

The grid is in a UserControl which is in a folder similar to this: ~/UserControls/TheUserControl.ascx
When I view source of the page, it is looking for the images in the same directory as the usercontrol, (ex:  UserControls/Edit.gif) which it should be looking in the skin folder ( Skins/MySkin/Grid/Edit.gif)

Any idea what I could be doing wrong?  Do you have to specify the location of these buttons in the markup when using a custom skin?

I'm using 2009 Q3.

Thanks,
Justin

[Dimo]

Hi Justin,

Yes, when using a custom skin, you need to specify the edit and delete images explicitly, because they are not defined in the skin CSS, unlike other buttons.

<telerik:GridClientDeleteColumn ButtonType="ImageButton" ImageUrl="~/grid_images/Delete.gif" />
<telerik:GridEditCommandColumn ButtonType="ImageButton" EditImageUrl="~/grid_images/Edit.gif" />

Apart from EditImageUrl, you also need to set InsertImageUrl, UpdateImageUrl and CancelImageUrl for the EditCommandColumn.

Best wishes,
Dimo
the Telerik team

[Doug]

Is there a way to load different images from a skin contained within a theme?  I have tried several approaches but no luck.

Thanks
Doug

[Dimo]

Hi Doug,

I am afraid your question is not very clear - can you please explain what exactly are you trying to achieve and what have you tried so far?

All the best,
Dimo
the Telerik team

[Doug]

I am using asp.net themes and want to keep customized images for each theme.  In the following code, I have hard coded the location to come from my main images directory.

<telerik:GridEditCommandColumn UniqueName="EditCommandColumn"
     ButtonType="ImageButton" EditImageUrl="~/images/editbutton.jpg">
</telerik:GridEditCommandColumn>

My preference would be to store a custom version in each theme directory. Here is the structure of my theme's folder

App_Themes
   DoorStepChefFrisco     
        Images
   DoorStepChefPlano
        Images

I tried the following, but received an error:

<telerik:GridEditCommandColumn UniqueName="EditCommandColumn"
     ButtonType="ImageButton" EditImageUrl="App_Themes/" & <%=App.Theme%> & "/images/editbutton.jpg">
</telerik:GridEditCommandColumn>

Thanks for the help
Doug
   

[Dimo]

Hello Doug,

You can use the following approach and supply different CSS styles (background image styles) for each ASP.NET theme.

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<script runat="server">

    protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable dt = new DataTable();
        DataRow dr;
        int colsNum = 4;
        int rowsNum = 6;
        string colName = "Column";

        for (int j = 1; j <= colsNum; j++)
        {
            dt.Columns.Add(String.Format("{0}{1}", colName, j));
        }

        for (int i = 1; i <= rowsNum; i++)
        {
            dr = dt.NewRow();

            for (int k = 1; k <= colsNum; k++)
            {
                dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);
            }
            dt.Rows.Add(dr);
        }

        (sender as RadGrid).DataSource = dt;
    }

    protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridEditableItem)
        {
            Button editButton = (e.Item as GridEditableItem).FindControl("EditButton") as Button;
            if (editButton != null)
            {
                editButton.CssClass = "MyEditBtn";
                editButton.Text = " ";
            }
        }
    }

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
<style type="text/css">

.MyEditBtn
{
    width:20px;
    height:16px;
    margin:0;
    padding:0;
    border:0;
    cursor:pointer;
    background:yellow no-repeat center center url(....);
}

</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    OnNeedDataSource="RadGrid_NeedDataSource" OnItemCreated="RadGrid1_ItemCreated">
    <MasterTableView>
        <Columns>
            <telerik:GridEditCommandColumn ButtonType="PushButton" />
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

</form>
</body>
</html>

Kind regards,
Dimo
the Telerik team

[Doug]

That's exactly what I needed.

Thanks!!!

[Mike Lichter]

Why are these buttons not taken from the skin file?  That's where I changed them.  The add new row and refresh buttons are updated on my page from the skin file.

[Dimo]

Hello Mike,

The buttons are not taken from the skin for historical reasons. We will change this for some of the next RadGrid versions.

Best wishes,
Dimo
the Telerik team

[Julian Pirola]

Hi im using 2013.2.717.40 version and still have the same problem.

did you fix it?

 how can i solved this issue?

[Angel Petrov]

Hello Julian,

Could you please elaborate more on the exact scenario? If you can share with us the code and describe the actual behavior we should be able to provide you with a solution on how to change the images?


Regards,
Angel Petrov
Telerik

[Julian Pirola]

I created a custom skin via copying the Default skin. I created it in a new proyect in my Solution. Then i referenced it in my web proyect.

It works perfect but not the images, so i opened telerik source code to find out why, and i have found an internal method that resolves the image url, its like harcoded, the method name is "internal string ResolveGridImageUrl(string imageName, bool canBeSpriteButton)" inside Radgrid Class in the telerik.web.ui assembly.

My assembly name is Telerik.CustomSkins, so thats why dont work.

 

[Angel Petrov]

Hi,

Indeed your observation are correct. However altering the current implementation of the method will result in a breaking change which is not desirable.

Considering the aforementioned I recommend setting the respective image urls in the PreRender event. I strongly suggest examining this blog post as well if you need to extract an embedded resource from a custom skin assembly.

Regards,
Angel Petrov
Telerik