Custom Skin - Wrong path to command buttons

13 posts, 1 answers
  1. Justin Lee
    Justin Lee avatar
    149 posts
    Member since:
    Dec 2009

    Posted 02 Jul 2010 Link to this post


    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
  2. Answer
    Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 07 Jul 2010 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Doug
    Doug avatar
    4 posts
    Member since:
    Jul 2010

    Posted 24 Jul 2010 Link to this post

    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
  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 26 Jul 2010 Link to this post

    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
  6. Doug
    Doug avatar
    4 posts
    Member since:
    Jul 2010

    Posted 26 Jul 2010 Link to this post

    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
       


  7. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 28 Jul 2010 Link to this post

    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
  8. Doug
    Doug avatar
    4 posts
    Member since:
    Jul 2010

    Posted 05 Aug 2010 Link to this post

    That's exactly what I needed.

    Thanks!!!
  9. Mike Lichter
    Mike Lichter avatar
    2 posts
    Member since:
    Apr 2010

    Posted 16 Aug 2010 Link to this post

    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.
  10. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 17 Aug 2010 Link to this post

    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
  11. Julian Pirola
    Julian Pirola avatar
    4 posts
    Member since:
    Oct 2009

    Posted 17 Sep 2015 in reply to Dimo Link to this post

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

    did you fix it?

     how can i solved this issue?

  12. Angel Petrov
    Admin
    Angel Petrov avatar
    1006 posts

    Posted 22 Sep 2015 Link to this post

    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
  13. Julian Pirola
    Julian Pirola avatar
    4 posts
    Member since:
    Oct 2009

    Posted 25 Sep 2015 in reply to Angel Petrov Link to this post

    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.

     

  14. Angel Petrov
    Admin
    Angel Petrov avatar
    1006 posts

    Posted 30 Sep 2015 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017