edit and delete image not displayed for grid

[Jayesh Goyani]

i created a custom skin for grid.
skin applied successfully on grid but only edit and delete image not displayed in grid.

regards,
Jayesh Goyani

[Pavlina]

Hello Jayesh,

The edit / delete / update / cancel images do not follow the other images' behavior for historical reasons. In other words, they do not use the skin's sprites by default, although the skin provides styles for such buttons. You can define their appearance by using CSS classes from the skin, or by using image URLs.

You can also refer to the following article:
http://www.telerik.com/help/aspnet-ajax/gridcustomizeactionbuttons.html

Regards,
Pavlina
the Telerik team

[Jayesh Goyani]

Hi Pavlina ,

thanks for your help.

i generate skin from  "http://stylebuilder.telerik.com/".
issue is why only edit/update/cancel images are not coming from "sprite.gif".


Regards,
Jayesh Goyani

[Pavlina]

Hello Jayesh,

If you are using images from a CSS sprite, then you should make sure that the following CSS classes have proper background styles defined in the custom CSS file:

.rgEdit
.rgUpdate
.rgCancel

Also, you can check whether the sprite image URL is correct and the sprite image can be accessed by the browser.

All the best,
Pavlina
the Telerik team

[Jayesh Goyani]

/*Telerik RadGrid Default Skin*/

/*global*/

.RadGrid_Jayesh
{
    /*border:1px solid #828282;*/
    border-bottom:10px solid #ffffff;
    background:#ffffff;
    color:#333333;
}

.RadGrid_Jayesh,
.RadGrid_Jayesh .rgMasterTable,
.RadGrid_Jayesh .rgDetailTable,
.RadGrid_Jayesh .rgGroupPanel table,
.RadGrid_Jayesh .rgCommandRow table,
.RadGrid_Jayesh .rgEditForm table,
.RadGrid_Jayesh .rgPager table,
.GridToolTip_Jayesh
{
    font:12px/16px "segoe ui",arial,sans-serif;
}

.RadGrid_Jayesh .rgAdd,
.RadGrid_Jayesh .rgRefresh,
.RadGrid_Jayesh .rgEdit,
.RadGrid_Jayesh .rgDel,
.RadGrid_Jayesh .rgFilter,
.RadGrid_Jayesh .rgPagePrev,
.RadGrid_Jayesh .rgPageNext,
.RadGrid_Jayesh .rgPageFirst,
.RadGrid_Jayesh .rgPageLast,
.RadGrid_Jayesh .rgExpand,
.RadGrid_Jayesh .rgCollapse,
.RadGrid_Jayesh .rgSortAsc,
.RadGrid_Jayesh .rgSortDesc,
.RadGrid_Jayesh .rgUpdate,
.RadGrid_Jayesh .rgCancel,
.RadGrid_Jayesh .rgUngroup,
.RadGrid_Jayesh .rgExpXLS,
.RadGrid_Jayesh .rgExpDOC,
.RadGrid_Jayesh .rgExpPDF,
.RadGrid_Jayesh .rgExpCSV
{
    background-image:url('<%=WebResource("Jayesh.Grid.sprite.gif")%>');
}

/*header*/

.RadGrid_Jayesh .rgHeaderDiv
{

    background:#ededed 0 -7550px repeat-x url('<%=WebResource("Jayesh.Grid.sprite.gif")%>');
}
.rgTwoLines .rgHeaderDiv
{
    background-position:0 -7050px;
}

.RadGrid_Jayesh .rgHeader,
.RadGrid_Jayesh th.rgResizeCol
{
    /* jayesh */

    font-weight:bold !important;
    border:0;
    border-bottom:1px solid #ec5b25;
    border-left:1px solid #ffffff;
    background:#c2c2c2 0 -2300px repeat-x url('<%=WebResource("Jayesh.Grid.sprite.gif")%>');
}

.RadGrid_Jayesh th.rgSorted
{
    background-color:#c4c4c4;
    background-position:0 -2600px;
}

.RadGrid_Jayesh .rgHeader,
.RadGrid_Jayesh .rgHeader a
{
    color:#333333;
}

/*rows*/

.RadGrid_Jayesh .rgRow td,
.RadGrid_Jayesh .rgAltRow td,
.RadGrid_Jayesh .rgEditRow td,
.RadGrid_Jayesh .rgFooter td
{
    border-style:solid;
    border-width:0 0 1px 0;
}

.RadGrid_Jayesh .rgRow td
{
    border-color:#ffffff;
}

.RadGrid_Jayesh .rgAltRow
{
    background:#e5e5e5;
}

.RadGrid_Jayesh .rgAltRow td
{
    border-color:#f2f2f2;
}

.RadGrid_Jayesh .rgRow .rgSorted
{
    border-bottom-color:#f2f2f2;
    background-color:#f2f2f2;
}

.RadGrid_Jayesh .rgAltRow .rgSorted
{
    border-bottom-color:#e6e6e6;
    background-color:#e6e6e6;
}

.RadGrid_Jayesh .rgSelectedRow .rgSorted,
.RadGrid_Jayesh .rgActiveRow .rgSorted,
.RadGrid_Jayesh .rgHoveredRow .rgSorted,
.RadGrid_Jayesh .rgEditRow .rgSorted
{
    background-color:transparent;
}

.RadGrid_Jayesh .rgRow a,
.RadGrid_Jayesh .rgAltRow a,
.RadGrid_Jayesh .rgEditRow a,
.RadGrid_Jayesh tr.rgEditRow a,
.RadGrid_Jayesh tr.rgHoveredRow a,
.RadGrid_Jayesh tr.rgActiveRow a,
.RadGrid_Jayesh .rgFooter a,
.RadGrid_Jayesh .rgEditForm a
{
    color:#000000;
}

.RadGrid_Jayesh .rgSelectedRow
{
    background:#828282 0 -3900px repeat-x url('<%=WebResource("Jayesh.Grid.sprite.gif")%>');
    color:#ffffff;
}
*+html .RadGrid_Jayesh .rgSelectedRow .rgSorted{background-color:#828282}
* html .RadGrid_Jayesh .rgSelectedRow .rgSorted{background-color:#828282}

.RadGrid_Jayesh .rgSelectedRow a
{
    color:#ffffff;
}

.RadGrid_Jayesh .rgActiveRow,
.RadGrid_Jayesh .rgHoveredRow
{
    background:#c4c4c4 0 -2900px repeat-x url('<%=WebResource("Jayesh.Grid.sprite.gif")%>');
    color:#333333;
}
*+html .RadGrid_Jayesh .rgActiveRow .rgSorted,
*+html .RadGrid_Jayesh .rgHoveredRow .rgSorted{background-color:#c4c4c4}
* html .RadGrid_Jayesh .rgActiveRow .rgSorted,
* html .RadGrid_Jayesh .rgHoveredRow .rgSorted{background-color:#c4c4c4}

.RadGrid_Jayesh .rgEditRow
{
    background:#ffffff 0 -4900px repeat-x url('<%=WebResource("Jayesh.Grid.sprite.gif")%>');
    color:#333333;
}
*+html .RadGrid_Jayesh .rgEditRow .rgSorted{background-color:#ffffff}
* html .RadGrid_Jayesh .rgEditRow .rgSorted{background-color:#ffffff}

.RadGrid_Jayesh .rgActiveRow td,
.RadGrid_Jayesh .rgActiveRow td.rgSorted,
.RadGrid_Jayesh .rgHoveredRow td,
.RadGrid_Jayesh .rgHoveredRow td.rgSorted
{
    border-bottom-color:#9e9e9e;
}

.RadGrid_Jayesh .rgSelectedRow td,
.RadGrid_Jayesh .rgSelectedRow td.rgSorted
{
    border-bottom-color:#6b6b6b;
}

.RadGrid_Jayesh .rgDrag
{
    background-image:url('<%=WebResource("Jayesh.Grid.rgDrag.gif")%>');
}

/*footer*/

.RadGrid_Jayesh .rgFooterDiv,
.RadGrid_Jayesh .rgFooter
{
    background:#ededed;

}

.RadGrid_Jayesh .rgFooter td
{
    border-top:1px solid #828282;
    border-bottom:1px solid #ffffff;
}

/*status*/

.RadGrid_Jayesh .rgPager .rgStatus
{
    border:1px solid;
    border-color:#828282 #c9c9c9 #ededed #c9c9c9;
    border-left-width:0;
}

.RadGrid_Jayesh .rgStatus div
{
    background-image:url('<%=WebResource("Jayesh.Grid.loading_small.gif")%>');
}

/*pager*/

.RadGrid_Jayesh .rgPager
{
    /* jayesh */
    /* background:#ededed; */
    background:#d4d4d4  repeat-x url('<%=WebResource("Jayesh.Grid.footerbgHeader.png")%>');
}

.RadGrid_Jayesh td.rgPagerCell
{
    border:1px solid;
    border-color:#828282 #ededed #ededed;
    border-right-width:0;
}

.RadGrid_Jayesh .rgInfoPart
{
    color:#8a8a8a;
}

.RadGrid_Jayesh .rgInfoPart strong
{
    color:#545454;
}

.RadGrid_Jayesh .rgPageFirst
{
    background-position:0 -550px;
}
.RadGrid_Jayesh .rgPageFirst:hover
{
    background-position:0 -600px;
}
.RadGrid_Jayesh .rgPagePrev
{
    background-position:0 -700px;
}
.RadGrid_Jayesh .rgPagePrev:hover
{
    background-position:0 -750px;
}
.RadGrid_Jayesh .rgPageNext
{
    background-position:0 -850px;
}
.RadGrid_Jayesh .rgPageNext:hover
{
    background-position:0 -900px;
}
.RadGrid_Jayesh .rgPageLast
{
    background-position:0 -1000px;
}
.RadGrid_Jayesh .rgPageLast:hover
{
    background-position:0 -1050px;
}

.RadGrid_Jayesh .rgPager .rgPagerButton
{
    border-color:#d1d1d1 #adadad #8c8c8c;
    background:#e8e8e8 repeat-x 0 -1550px url('<%=WebResource("Jayesh.Grid.sprite.gif")%>');
    color:#000000;
    font-family:"segoe ui",arial,sans-serif;
}

.RadGrid_Jayesh .rgNumPart a:hover,
.RadGrid_Jayesh .rgNumPart a:hover span,
.RadGrid_Jayesh .rgNumPart a.rgCurrentPage,
.RadGrid_Jayesh .rgNumPart a.rgCurrentPage span
{
    background:no-repeat url('<%=WebResource("Jayesh.Grid.sprite.gif")%>');
}

.RadGrid_Jayesh .rgNumPart a
{
    color:#000000;
}

.RadGrid_Jayesh .rgNumPart a:hover
{
    background-position:100% -1250px;
}

.RadGrid_Jayesh .rgNumPart a:hover span
{
    background-position:0 -1150px;
}

.RadGrid_Jayesh .rgNumPart a.rgCurrentPage,
.RadGrid_Jayesh .rgNumPart a.rgCurrentPage:hover
{
    background-position:100% -1450px;
}

.RadGrid_Jayesh .rgNumPart a.rgCurrentPage span,
.RadGrid_Jayesh .rgNumPart a.rgCurrentPage:hover span
{
    background-position:0 -1350px;
}

/*sorting, reordering*/

.RadGrid_Jayesh .rgHeader .rgSortAsc
{
    background-position:3px -248px;
    height:10px;
}

.RadGrid_Jayesh .rgHeader .rgSortDesc
{
    background-position:3px -198px;
    height:10px;
}

.GridReorderTop_Jayesh,
.GridReorderBottom_Jayesh
{
    background:0 0 no-repeat url('<%=WebResource("Jayesh.Grid.sprite.gif")%>');
}

.GridReorderBottom_Jayesh
{
    background-position:0 -50px;
}

/*filtering*/

.RadGrid_Jayesh .rgFilterRow
{
    background:#ededed;
}

.RadGrid_Jayesh .rgFilterRow td
{
    /* jayesh */
    border-top:3px solid #ffffff;
    border-bottom:1px solid #828282;

}

.RadGrid_Jayesh .rgFilter
{
    background-position:0 -300px;
}

.RadGrid_Jayesh .rgFilter:hover
{
    background-position:0 -350px;
}

.RadGrid_Jayesh .rgFilterActive,
.RadGrid_Jayesh .rgFilterActive:hover
{
    background-position:0 -400px;
}

.RadGrid_Jayesh .rgFilterBox
{
    border-color:#8f8f8f #c9c9c9 #c9c9c9 #8f8f8f;
    font-family:"segoe ui",arial,sans-serif;
    color:#333333;
}

/*filter context menu*/

.RadMenu_Jayesh .rgHCMClear,
.RadMenu_Jayesh .rgHCMFilter
{
    border-color:#d1d1d1 #a8a8a8 #8c8c8c;
    background:#e8e8e8 center -23px repeat-x url('<%=WebResource("Jayesh.Grid.ButtonSprites.gif")%>');
    color:#000000;
    font-family:"segoe ui",arial,sans-serif;
}

.RadMenu_Jayesh .rgHCMClear:hover,
.RadMenu_Jayesh .rgHCMFilter:hover
{
    border-color:#d1d1d1 #bababa #a3a3a3;
    background-position:center -67px;
    background-color:#e6e6e6;
}

/*context menu*/

.GridContextMenu_Jayesh .rmLeftImage
{
    background-image:url('<%=WebResource("Jayesh.Grid.contextMenu.gif")%>');
}

.GridContextMenu_Jayesh .rgHCMSortAsc .rmLeftImage
{
    background-position:0 0;
}

.GridContextMenu_Jayesh .rgHCMSortDesc .rmLeftImage
{
    background-position:0 -40px;
}

.GridContextMenu_Jayesh .rgHCMUnsort .rmLeftImage
{
    background-position:0 -80px;
}

.GridContextMenu_Jayesh .rgHCMGroup .rmLeftImage
{
    background-position:0 -120px;
}

.GridContextMenu_Jayesh .rgHCMUngroup .rmLeftImage
{
    background-position:0 -160px;
}

.GridContextMenu_Jayesh .rgHCMCols .rmLeftImage
{
    background-position:0 -200px;
}

.GridContextMenu_Jayesh .rgHCMFilter .rmLeftImage
{
    background-position:0 -240px;
}

.GridContextMenu_Jayesh .rgHCMUnfilter .rmLeftImage
{
    background-position:0 -280px;
}

/*grouping*/

.RadGrid_Jayesh .rgGroupPanel
{
    /* jayesh */
    border:0;
    /*border-bottom:1px solid #828282;*/
     /*border-bottom:1px solid #ec5b25;*/
    background:#ededed 0 -1900px repeat-x url('<%=WebResource("Jayesh.Grid.sprite.gif")%>');
}

.RadGrid_Jayesh .rgGroupPanel td
{
    border:0;
    padding:3px 4px;
}

.RadGrid_Jayesh .rgGroupPanel td td
{
    padding:0;
}

.RadGrid_Jayesh .rgGroupPanel .rgSortAsc
{
    background-position:4px -144px;
}

.RadGrid_Jayesh .rgGroupPanel .rgSortDesc
{
    background-position:4px -94px;
}

.RadGrid_Jayesh .rgUngroup
{
    background-position:0 -6998px;
}

.RadGrid_Jayesh .rgGroupItem
{
    border:1px solid;
    border-color:#c4c4c4 #c4c4c4 #9e9e9e;
    background:#c7c7c7 0 -6500px repeat-x url('<%=WebResource("Jayesh.Grid.sprite.gif")%>');
}

.RadGrid_Jayesh .rgMasterTable td.rgGroupCol,
.RadGrid_Jayesh .rgMasterTable td.rgExpandCol
{
    border-color:#d9d9d9;
    background:#d9d9d9 none;
}

.RadGrid_Jayesh .rgGroupHeader
{
    background:#d9d9d9;
    font-size:1.1em;
    line-height:21px;
    color:#000000;
}

.RadGrid_Jayesh .rgGroupHeader td
{
    border-top:1px solid #828282;
    border-bottom:1px solid #d9d9d9;
}

.RadGrid_Jayesh .rgGroupHeader td.rgGroupCol
{
    border-top-color:#828282;
}

.RadGrid_Jayesh .rgExpand
{
    background-position:5px -496px;
}

.RadGrid_Jayesh .rgCollapse
{
    background-position:3px -444px;
}

/*editing*/

.RadGrid_Jayesh .rgEditForm
{
    border-bottom:1px solid #828282;
}

.RadGrid_Jayesh .rgUpdate
{
    background-position:0 -1800px;
}

.RadGrid_Jayesh .rgCancel
{
    background-position:0 -1850px;
}

/*hierarchy*/

.RadGrid_Jayesh .rgDetailTable
{
    border-color:#828282;
}

/*command row*/

.RadGrid_Jayesh .rgCommandRow
{
    background:#c4c4c4 0 -2099px repeat-x url('<%=WebResource("Jayesh.Grid.sprite.gif")%>');
    color:#000000;
}

.RadGrid_Jayesh .rgCommandCell
{
    /* jayesh */
    border:1px solid;
    border-color:#ffffff;
    border-top-width:0;
    border-left-width:0;
    border-right-width:0;
    padding:0;
}

.RadGrid_Jayesh tfoot .rgCommandCell,
.RadGrid_Jayesh .rgMasterTable>tbody>tr.rgCommandRow .rgCommandCell
{
    border-top-width:1px;
    border-bottom-width:0;
}

.RadGrid_Jayesh .rgCommandTable td
{
    border:0;
    padding:2px 7px;
}

.RadGrid_Jayesh .rgCommandTable
{
    border:0;
    border-top:1px solid #fcfcfc;
    border-bottom:1px solid #e8e8e8;
}

.RadGrid_Jayesh .rgCommandRow a
{
    color:#000000;
    text-decoration:none;
}

.RadGrid_Jayesh .rgAdd
{
    margin-right:3px;
    background-position:0 -1650px;
}

.RadGrid_Jayesh .rgRefresh
{
    margin-right:3px;
    background-position:0 -1600px;
}

.RadGrid_Jayesh .rgEdit
{
    background-position:0 -1700px;
}

.RadGrid_Jayesh .rgDel
{
    background-position:0 -1750px;
}

.RadGrid_Jayesh .rgSelected .rgDel
{
    background-position:0 -1775px;
}

.RadGrid_Jayesh .rgExpXLS,
.RadGrid_Jayesh .rgExpDOC,
.RadGrid_Jayesh .rgExpPDF,
.RadGrid_Jayesh .rgExpCSV
{
    background-image:url('<%=WebResource("Jayesh.Grid.export.gif")%>');
}

.RadGrid_Jayesh .rgExpXLS
{
    background-position:0 0;
}
.RadGrid_Jayesh .rgExpDOC
{
    background-position:0 -50px;
}
.RadGrid_Jayesh .rgExpPDF
{
    background-position:0 -100px;
}
.RadGrid_Jayesh .rgExpCSV
{
    background-position:0 -150px;
}

/*multirow select*/

.GridRowSelector_Jayesh
{
    background:#545454;
}

/*row drag n drop*/

.GridItemDropIndicator_Jayesh
{
    border-top:1px dashed #666666;
}

/*tooltip*/

.GridToolTip_Jayesh
{
    border:1px solid #828282;
    padding:3px;
    background:#ffffff;
    color:#333333;
}

/*rtl*/

.RadGridRTL_Jayesh .rgPageFirst
{
    background-position:0 -1000px;
}
.RadGridRTL_Jayesh .rgPageFirst:hover
{
    background-position:0 -1050px;
}
.RadGridRTL_Jayesh .rgPagePrev
{
    background-position:0 -850px;
}
.RadGridRTL_Jayesh .rgPagePrev:hover
{
    background-position:0 -900px;
}
.RadGridRTL_Jayesh .rgPageNext
{
    background-position:0 -700px;
}
.RadGridRTL_Jayesh .rgPageNext:hover
{
    background-position:0 -750px;
}
.RadGridRTL_Jayesh .rgPageLast
{
    background-position:0 -550px;
}
.RadGridRTL_Jayesh .rgPageLast:hover
{
    background-position:0 -600px;
}

.RadGridRTL_Jayesh .rgExpand
{
    background-position:-20px -496px;
}

hi Pavlina,
Thanx for your help.
this is my css  code.
but still not able to get success in getting edit image.

Thanks,
Jayesh Goyani

[Iana Tsolova]

Hi Jayesh,

Reviewing the skin files, I can see you are referencing the sprites as embedded resources. Can you confirm you are embedding the Skin in a dll, or it is in a local for the web application folder?

Best wishes,
Iana
the Telerik team

[Jayesh Goyani]

hi Iana,

i m embedding the Skin in a dll.
another images (pagging's arrow icon,filter icon,add new record's icon..etc) coming form  sprites but only (edit/cancel/delete)  images are not coming.

Thanks,
Jayesh Goyani

[Iana Tsolova]

Hi Jayesh,

In this case the possible reasons for the edit, cancel and delete image not to be displayed are: if they are not present in the sprite.gif, or their position is not the one set in the css file. Can you check that out?

Best wishes,
Iana
the Telerik team

[Jayesh Goyani]

Hi Iana,

Thanx for your help.
i upload sprite.gif.
all images are displayed in sprite.gif with correct position.

Thanks,
Jayesh Goyani

[Iana Tsolova]

Hi Jayesh,

I checked the sprite and it looks the same as these of the built-in Skins. In this case, I would suggest that you open a formal support ticket and send us a runnable project including the project where the skins are
(as code but dll) so we can debug it here and see what went wrong.
Other than this, there not much we can do to determine the cause of the problem.

Regards,
Iana
the Telerik team

[Jayesh Goyani]

Hi Iana ,
thanx for your help.

plz let me know how can i open a formal support ticket.

Thanks,
Jayesh Goyani

[Jayesh Goyani]

Hi Iana,

Thanks for the help.

The problem is I have the trial version account in telerik and right now it is not allowing me to add new support ticket. Can you please help how can I add new support ticket with my account?

Thanks
Jayesh

[Jayesh Goyani]

Hello,

custom skin not support edit/delete image. You have to set it manually.
set manully image for edit and delete
http://www.telerik.com/community/forums/aspnet-ajax/grid/delete-image-won-t-display-when-i-use-custom-skin-in-grid.aspx

Thanks,
Jayesh Goyani

[dhuss]

I am having the same problem with my custom skin. I have embedded all of the grid GIF images in addition to the sprite into a DLL and neither the edit/delete image will show on the grid, all the others do. Your decompiler clearly shows all the imbedded images in the DLL. I know the positions are correct by using Photoshop to locate the pixel location in the sprite. I am using version 2013.1.417.35 for my skin.

.RadGrid_Hew .rgAdd,
.RadGrid_Hew .rgRefresh,
.RadGrid_Hew .rgEdit,
.RadGrid_Hew .rgDel,
.RadGrid_Hew .rgFilter,
.RadGrid_Hew .rgPagePrev,
.RadGrid_Hew .rgPageNext,
.RadGrid_Hew .rgPageFirst,
.RadGrid_Hew .rgPageLast,
.RadGrid_Hew .rgExpand,
.RadGrid_Hew .rgCollapse,
.RadGrid_Hew .rgSortAsc,
.RadGrid_Hew .rgSortDesc,
.RadGrid_Hew .rgUpdate,
.RadGrid_Hew .rgCancel,
.RadGrid_Hew .rgUngroup,
.RadGrid_Hew .rgExpXLS,
.RadGrid_Hew .rgExpDOC,
.RadGrid_Hew .rgExpPDF,
.RadGrid_Hew .rgExpCSV
{
    background-image: url('<%=WebResource("Hew.Web.UI.Skins.Hew.Grid.sprite.gif")%>');
}

.RadGrid_Hew .rgAdd
{
    margin-right: 3px;
    background-position: 0 -1650px;
}

.RadGrid_Hew .rgRefresh
{
    margin-right: 3px;
    background-position: 0 -1600px;
}

.RadGrid_Hew .rgEdit
{
    background-position: 0 -1700px;
}

.RadGrid_Hew .rgDel
{
    background-position: 0 -1750px;
}

[Pavlina]

Hi,

The edit / delete buttons do not follow the other images behavior for historical reasons. In other words, they do not use the skin's sprites by default, although the skin provides styles for such buttons. You can define their appearance by using CSS classes from the skin, or by using image URLs.

Below is example which shows how to style and add its command to the Delete button using the CSS class rgDel, which is already part of the skin file:

<telerik:RadGrid ID="RadGrid1" runat="server">
<MasterTableView>
<Columns>
<telerik:GridTemplateColumn>
<ItemTemplate>
<a href="#" class="rgDel" onclick="$find('<%= RadGrid1.ClientID %>').get_masterTableView().fireCommand('Delete', '<%# Container.ItemIndex %>')">Delete</a>
</ItemTemplate>
</telerik:GridTemplateColumn>
......
......

</Columns>
</MasterTableView>
</telerik:RadGrid>

Regards,
Pavlina
the Telerik team