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

5 posts, 1 answers
  1. Mahmoud Bekhit
    Mahmoud Bekhit avatar
    2 posts
    Member since:
    Mar 2010

    Posted 01 Jun 2011 Link to this post

    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 .

  2. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 02 Jun 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mahmoud Bekhit
    Mahmoud Bekhit avatar
    2 posts
    Member since:
    Mar 2010

    Posted 06 Jun 2011 Link to this post

           
      
      
    /*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.

     

  5. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010
  6. Answer
    Galin
    Admin
    Galin avatar
    526 posts

    Posted 09 Jun 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017