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

Custom Skin - Wrong path to command buttons

12 Answers 139 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Justin Lee
Top achievements
Rank 1
Justin Lee asked on 02 Jul 2010, 03:49 PM

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

12 Answers, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 07 Jul 2010, 01:39 PM
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
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
0
Doug
Top achievements
Rank 1
answered on 24 Jul 2010, 11:55 PM
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
0
Dimo
Telerik team
answered on 26 Jul 2010, 02:53 PM
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
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
0
Doug
Top achievements
Rank 1
answered on 26 Jul 2010, 05:20 PM
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
   


0
Dimo
Telerik team
answered on 28 Jul 2010, 10:19 AM
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"
 
<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
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
0
Doug
Top achievements
Rank 1
answered on 05 Aug 2010, 04:17 PM
That's exactly what I needed.

Thanks!!!
0
Mike Lichter
Top achievements
Rank 1
answered on 16 Aug 2010, 05:14 PM
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.
0
Dimo
Telerik team
answered on 17 Aug 2010, 09:33 AM
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
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
0
Julian Pirola
Top achievements
Rank 1
answered on 17 Sep 2015, 07:41 PM

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

did you fix it?

 how can i solved this issue?

0
Angel Petrov
Telerik team
answered on 22 Sep 2015, 01:19 PM
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
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 Feedback Portal and vote to affect the priority of the items
0
Julian Pirola
Top achievements
Rank 1
answered on 25 Sep 2015, 03:00 PM

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.

 

0
Angel Petrov
Telerik team
answered on 30 Sep 2015, 10:08 AM
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
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 Feedback Portal and vote to affect the priority of the items
Tags
Grid
Asked by
Justin Lee
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Doug
Top achievements
Rank 1
Mike Lichter
Top achievements
Rank 1
Julian Pirola
Top achievements
Rank 1
Angel Petrov
Telerik team
Share this question
or