"delete image won't display when i use custom skin in grid

[Mahmoud Bekhit]

Hi ;
"delete image won't display when i use custom skin in grid "

 I have trayed to used the image pathe to display it and it work nice if i want to display a one skin , but i don't want this Solution because i have built my application withe multi theems and i want to made a mulity skin for telerik rad to give clint to choice the theeme what he need .

thank You .

[Vasil]

Hello Mahmoud,

You need to add the delete image in your custom skin images as it done for the default provided skins. In your skin folder you should make a "Grid" folder that contains all required images for the grid.

MySite\MyCustomSkin\Grid.MyCustomSkin.css

MySite\MyCustomSkin\Grid\Delete.gif
MySite\MyCustomSkin\Grid\Cancel.gif
MySite\MyCustomSkin\Grid\Edit.gif

You could copy all images for the grid from the default skin located in:

\**Installation folder of RadControls for ASP.NET AJAX**\Skins\Default\Grid\

Best practice will be to copy one of the existing skins and then modify it, this way you will be sure that no images are missing.

Let me know if you need further assistance.

Greetings,
Vasil
the Telerik team

[Mahmoud Bekhit]

/*Telerik RadGrid Default Skin*/

/*global*/

.RadGrid_Solid
{
    border:1px solid #828282;
    background:#fff;
    color:#333;
}

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

.RadGrid_Solid .rgAdd,
.RadGrid_Solid .rgRefresh,
.RadGrid_Solid .rgEdit,
.RadGrid_Solid .rgDel,
.RadGrid_Solid .rgFilter,
.RadGrid_Solid .rgPagePrev,
.RadGrid_Solid .rgPageNext,
.RadGrid_Solid .rgPageFirst,
.RadGrid_Solid .rgPageLast,
.RadGrid_Solid .rgExpand,
.RadGrid_Solid .rgCollapse,
.RadGrid_Solid .rgSortAsc,
.RadGrid_Solid .rgSortDesc,
.RadGrid_Solid .rgUpdate,
.RadGrid_Solid .rgCancel,
.RadGrid_Solid .rgUngroup,
.RadGrid_Solid .rgExpXLS,
.RadGrid_Solid .rgExpDOC,
.RadGrid_Solid .rgExpPDF,
.RadGrid_Solid .rgExpCSV
{
    background-image:url('Grid/sprite.gif');
}

/*header*/

.RadGrid_Solid .rgHeaderDiv
{
    background:#eee 0 -7550px repeat-x url('Grid/sprite.gif');

}
.rgTwoLines .rgHeaderDiv
{
    background-position:0 -7050px;
}

.RadGrid_Solid .rgHeader,
.RadGrid_Solid th.rgResizeCol
{
    border:0;
    border-bottom:1px solid #828282;
    background:#eaeaea 0 -2300px repeat-x url('Grid/sprite.gif');
    font-size:14px;
    font-family: Al-hadith1;
}

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

.RadGrid_Solid .rgHeader,
.RadGrid_Solid .rgHeader a
{
    color:#333;
}

/*rows*/

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

.RadGrid_Solid .rgRow td
{
    border-color:#fff;
}

.RadGrid_Solid .rgAltRow
{
    background:#f2f2f2;
}

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

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

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

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

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

.RadGrid_Solid .rgSelectedRow
{
    background:#828282 0 -3900px repeat-x url('Grid/sprite.gif');
    color:#fff;
}
*+html .RadGrid_Solid .rgSelectedRow .rgSorted{background-color:#828282}
* html .RadGrid_Solid .rgSelectedRow .rgSorted{background-color:#828282}

.RadGrid_Solid .rgSelectedRow a
{
    color:#fff;
}

.RadGrid_Solid .rgActiveRow,
.RadGrid_Solid .rgHoveredRow
{
    background:#c5c5c5 0 -2900px repeat-x url('Grid/sprite.gif');
    color:#333;
}
*+html .RadGrid_Solid .rgActiveRow .rgSorted,
*+html .RadGrid_Solid .rgHoveredRow .rgSorted{background-color:#c5c5c5}
* html .RadGrid_Solid .rgActiveRow .rgSorted,
* html .RadGrid_Solid .rgHoveredRow .rgSorted{background-color:#c5c5c5}

.RadGrid_Solid .rgEditRow
{
    background:#fff 0 -4900px repeat-x url('Grid/sprite.gif');
    color:#333;
}
*+html .RadGrid_Solid .rgEditRow .rgSorted{background-color:#fff}
* html .RadGrid_Solid .rgEditRow .rgSorted{background-color:#fff}

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

.RadGrid_Solid .rgSelectedRow td,
.RadGrid_Solid .rgSelectedRow td.rgSorted
{
    border-bottom-color:#6c6c6c;
}

.RadGrid_Solid .rgDrag
{
    background-image:url('Grid/rgDrag.gif');
}

/*footer*/

.RadGrid_Solid .rgFooterDiv,
.RadGrid_Solid .rgFooter
{
    background:#eee;
}

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

/*status*/

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

.RadGrid_Solid .rgStatus div
{
    background-image:url('Common/loading_small.gif');
}

/*pager*/

.RadGrid_Solid .rgPager
{
    background:#eee;
}

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

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

.RadGrid_Solid .rgInfoPart strong
{
    color:#4c4e54;
}

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

.RadGrid_Solid .rgPager .rgPagerButton
{
    border-color:#d0d0d0 #aeaeae #8b8b8b;
    background:#e8e8e8 repeat-x 0 -1550px url('Grid/sprite.gif');
    color:#000;
    font-family:"segoe ui",arial,sans-serif;
}

.RadGrid_Solid .rgNumPart a:hover,
.RadGrid_Solid .rgNumPart a:hover span,
.RadGrid_Solid .rgNumPart a.rgCurrentPage,
.RadGrid_Solid .rgNumPart a.rgCurrentPage span
{
    background:no-repeat url('Grid/sprite.gif');
}

.RadGrid_Solid .rgNumPart a
{
    color:#000;
}

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

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

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

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

/*sorting, reordering*/

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

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

.GridReorderTop_Solid,
.GridReorderBottom_Solid
{
    background:0 0 no-repeat url('Grid/sprite.gif');
}

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

/*filtering*/

.RadGrid_Solid .rgFilterRow
{
    background:#eee;
}

.RadGrid_Solid .rgFilterRow td
{
    border-bottom:1px solid #828282;
}

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

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

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

.RadGrid_Solid .rgFilterBox
{
    border-color:#8e8e8e #c9c9c9 #c9c9c9 #8e8e8e;
    font-family:"segoe ui",arial,sans-serif;
    color:#333;
}

/*filter context menu*/

.RadMenu_Solid .rgHCMClear,
.RadMenu_Solid .rgHCMFilter
{
    border-color:#d0d0d0 #a8a8a8 #8b8b8b;
    background:#e8e8e8 center -23px repeat-x url('FormDecorator/ButtonSprites.gif');
    color:#000;
    font-family:"segoe ui",arial,sans-serif;
}

.RadMenu_Solid .rgHCMClear:hover,
.RadMenu_Solid .rgHCMFilter:hover
{
    border-color:#d1d1d1 #b9b9b9 #a3a3a3;
    background-position:center -67px;
    background-color:#e5e5e5;
}

/*context menu*/

.GridContextMenu_Solid .rmLeftImage
{
    background-image:url('../Common/Grid/contextMenu.gif');
}

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

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

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

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

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

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

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

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

/*grouping*/

.RadGrid_Solid .rgGroupPanel
{
    border:0;
    border-bottom:1px solid #828282;
    background:#eee 0 -1900px repeat-x url('Grid/sprite.gif');
}

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

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

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

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

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

.RadGrid_Solid .rgGroupItem
{
    border:1px solid;
    border-color:#c4c4c4 #c4c4c4 #9e9e9e;
    background:#c6c6c6 0 -6500px repeat-x url('Grid/sprite.gif');
}

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

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

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

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

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

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

/*editing*/

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

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

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

/*hierarchy*/

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

/*command row*/

.RadGrid_Solid .rgCommandRow
{
    background:#c5c5c5 0 -2099px repeat-x url('Grid/sprite.gif');
    color:#000;
}

.RadGrid_Solid .rgCommandCell
{
    border:1px solid;
    border-color:#999 #f2f2f2;
    border-top-width:0;
    padding:0;
}

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

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

.RadGrid_Solid .rgCommandTable
{
    border:0;
    border-top:1px solid #fdfdfd;
    border-bottom:1px solid #e7e7e7;
}

.RadGrid_Solid .rgCommandRow a
{
    color:#000;
    text-decoration:none;
}

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

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

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

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

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

.RadGrid_Solid .rgExpXLS,
.RadGrid_Solid .rgExpDOC,
.RadGrid_Solid .rgExpPDF,
.RadGrid_Solid .rgExpCSV
{
    background-image:url('../Common/Grid/export.gif');
}

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

/*multirow select*/

.GridRowSelector_Solid
{
    background:#4c4e54;
}

/*row drag n drop*/

.GridItemDropIndicator_Solid
{
    border-top:1px dashed #666;
}

/*tooltip*/

.GridToolTip_Solid
{
    border:1px solid #828282;
    padding:3px;
    background:#fff;
    color:#333;
}

/*rtl*/

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

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

 This is My Custom Skin for grid in App_Thems\MB\MySkin\Grid.Solid.css
"Grid" folder that alrady contains all images
App_thems\MB\MYSkin\Grid\Delete.gif 
App_thems\MB\MYSkin\Grid\Cancel.gif
App_thems\MB\MYSkin\Grid\Edit.gif
but the images can't disblay without i make te 
 

ImagesPath="~/App_Themes/MB/MySkin/Grid/"   (I Don't want this )

Thank You.

 

[Jayesh Goyani]

hi All,

i had also same issue.

http://www.telerik.com/community/forums/aspnet-ajax/skin-manager/edit-and-delete-image-not-displayed-for-grid.aspx

Thanks,
Jayesh Goyani

[Galin]

Hello Mahmoud,

The Command images (edit / delete / update / cancel) do not follow the other images behavior for historical reasons. You can define their appearance by using CSS classes from the skin, or by using image URLs.
Below is how to style the Delete button using the CSS class rgDel, which is already part of the skin file:

Copy Code

<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>

Add this Css for the button:

Copy Code

.RadGrid .rgDel
{
    display: inline-block;
    text-indent: -9999px;
    overflow: hidden;
}

Additionally, please read this example how to customize action buttons using image URLs.

Our system indicates that you have opened a support ticket concerning the same issue. In order to avoid duplicate posts, I suggest that we continue the communication in the support ticket.

Kind regards,
Galin
the Telerik team