I want to apply a custom skin for RadGrids so I followed the exact instructions mentioned in the documentation, but when I tried to apply it I’ve got many problems, for example:
- EditCommandColumn image doesn’t appear.
- problems related to images alignment (selected row, header,…etc).
Note: my grids support RTL.
6 Answers, 1 is accepted
Please provide your custom RadGrid skin, so that we can test it locally.
Kind regards,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Rank 1
it is same RadGrid Forest skin exactly (except some of font's properties),, but here it is:
/*Telerik RadGrid CustomForest Skin*/
/*global*/
.RadGrid_CustomForest
{
background:#c2d197;
color:#41442b;
}
.RadGrid_CustomForest
,
.RadGrid_CustomForest
*
{
outline-color:#78884a;
}
.RadGrid_CustomForest
,
.MasterTable_CustomForest
,
.GroupPanel_CustomForest
table,
.DetailTable_CustomForest
,
.GridCommandRow_CustomForest
table,
.GridToolTip_CustomForest
{
font:11px "segoe ui",arial,sans-serif;
/*font-family:Tahoma;
font-size:11px;*/
}
.GridEditForm_CustomForest
table
{
font-family:Tahoma;
font-size:9px;
font-weight:bold;
}
.RadGrid_CustomForest
,
.DetailTable_CustomForest
{
border:1px solid #78884a;
}
.MasterTable_CustomForest
,
.DetailTable_CustomForest
{
border-collapse:separate !important;
}
.GridRow_CustomForest
td,
.GridAltRow_CustomForest
td,
.GridEditRow_CustomForest
td,
.GridFooter_CustomForest
td,
.GridGroupFooter_CustomForest
td
{
padding-left:10px;
padding-right:6px;
font-family:Tahoma;
font-size:11px;
}
.RadGrid_CustomForest
.rgAdd,
.RadGrid_CustomForest
.rgRefresh,
.RadGrid_CustomForest
.rgEdit,
.RadGrid_CustomForest
.rgDel,
.RadGrid_CustomForest
.rgFilter,
.RadGrid_CustomForest
.rgPagePrev,
.RadGrid_CustomForest
.rgPageNext,
.RadGrid_CustomForest
.rgPageFirst,
.RadGrid_CustomForest
.rgPageLast,
.RadGrid_CustomForest
.rgExpand,
.RadGrid_CustomForest
.rgCollapse,
.RadGrid_CustomForest
.rgSortAsc,
.RadGrid_CustomForest
.rgSortDesc,
.RadGrid_CustomForest
.rgUpdate,
.RadGrid_CustomForest
.rgCancel
{
width:16px;
height:16px;
border:0;
padding:0;
background-color:transparent;
background-image:url('Grid/sprite.gif');
background-repeat:no-repeat;
vertical-align:middle;
font-size:1px;
cursor:pointer;
}
.GroupPanelItems_CustomForest
input,
.GridCommandRow_CustomForest
img,
.GridHeader_CustomForest
input,
.GridFilterRow_CustomForest
img,
.GridPager_CustomForest
img
{
vertical-align:middle;
}
/*header*/
.GridHeaderDiv_CustomForest
{
background:#9cb16a url('Grid/sprite.gif') 0 -2015px repeat-x;
}
.GridHeader_CustomForest
,
.ResizeHeader_CustomForest
{
border-top:1px solid #8eb980;
border-bottom:1px solid #4a761f;
background:#71a260 url('Grid/sprite.gif') 0 0 repeat-x;
padding:8px 7px 11px 11px;
text-align:left;
font-size:1.2em;
font-weight:normal;
}
.DetailTable_CustomForest
.GridHeader_CustomForest,
.DetailTable_CustomForest
.ResizeHeader_CustomForest
{
padding-top:2px;
padding-bottom:4px;
background-position:0 -5px;
}
.GridHeader_CustomForest
,
.GridHeader_CustomForest
a
{
color:#e4f0c0;
text-decoration:none;
}
/*rows*/
.GridRow_CustomForest
td,
.GridAltRow_CustomForest
td,
.GridEditRow_CustomForest
td,
.GridFooter_CustomForest
td,
.GridGroupFooter_CustomForest
td
{
padding-top:0.3em;
padding-bottom:0.3em;
}
.GridAltRow_CustomForest
{
background:#cfdbad;
}
.GridRow_CustomForest
td,
.GridAltRow_CustomForest
td,
.GridFooter_CustomForest
td,
.GridGroupFooter_CustomForest
td
{
border:1px solid;
border-color:#c2d197 #dae7b5 #c2d197 #62703b;
border-top:0;
}
.GridAltRow_CustomForest
td
{
border-bottom-color:#cfdbad;
}
.GridRow_CustomForest>td:first-child
,
.GridAltRow_CustomForest>td:first-child
,
.GridFooter_CustomForest>td:first-child
,
.GridGroupFooter_CustomForest>td:first-child
{
border-left-color:#c2d197;
}
.GridRow_CustomForest
a,
.GridAltRow_CustomForest
a,
.GridFooter_CustomForest
a,
.GridGroupFooter_CustomForest
a,
.GridEditForm_CustomForest
a,
tr.GridEditRow_CustomForest
,
tr.GridEditRow_CustomForest
a
{
color:#41442b;
}
.ActiveRow_CustomForest
{
background:#dd620a url('Grid/sprite.gif') 0 -1715px repeat-x;
color:#ffe7c4;
}
.ActiveRow_CustomForest
td
{
border-color:#841d05 #e4660d #841d05 #89250e;
}
.ActiveRow_CustomForest>td:first-child
{
border-left-color:#dd620a;
}
.SelectedRow_CustomForest
{
background:#ba4301 url('Grid/sprite.gif') 0 -300px repeat-x;
color:#ffe7c4;
}
.SelectedRow_CustomForest
td,
.SelectedRow_CustomForest>td:first-child
{
border-color:#841d05 #e4660d #841d05 #89250e;
}
.ActiveRow_CustomForest
a,
.SelectedRow_CustomForest
a
{
color:#ffe7c4;
}
.GridRowOver_CustomForest
{
background:#dab551 url('Grid/sprite.gif') 0 -599px repeat-x;
}
.GridRowOver_CustomForest
td
{
border-color:#a16e0b #dec779 #a16e0b #ac8b4a;
}
.GridRowOver_CustomForest>td:first-child
{
border-left-color:#dab551;
}
.GridEditRow_CustomForest
{
background:#9cb16a;
}
.GridEditRow_CustomForest
td
{
border-color:#9cb16a #62703b #9cb16a #bfd090;
}
.GridEditRow_CustomForest>td:first-child
{
border-left-color:#9cb16a;
}
/*footer*/
.GridFooterDiv_CustomForest
,
.GridFooter_CustomForest
,
.GridGroupFooter_CustomForest
{
background:#aabe7a;
color:#313320;
}
.GridFooter_CustomForest
td,
.GridGroupFooter_CustomForest
td
{
border-top:1px solid #9cb16a;
border-right-color:#c2d197;
}
.GridGroupFooter_CustomForest
td
{
border-bottom:1px solid #9cb16a;
}
/*status*/
.GridPager_CustomForest
span
{
color:#e4f0c0;
}
/*paging*/
.GridPager_CustomForest
{
background:#9cb16a;
line-height:24px;
}
.GridPager_CustomForest
td
{
border:1px solid #b6c988;
border-top-color:#78884a;
padding:0 10px;
}
.GridPager_CustomForest
td td
{
border:0;
padding:1px;
}
.GridPager_CustomForest
,
.GridPager_CustomForest
div span,
.GridPager_CustomForest
a,
.GridPager_CustomForest
.sliderPagerLabel_CustomForest
{
color:#e4f0c0;
}
.PagerLeft_CustomForest
{
float:left;
}
.PagerRight_CustomForest
{
float:right;
}
.PagerCenter_CustomForest
{
text-align:center;
}
.PagerCenter_CustomForest
*
{
vertical-align:middle;
}
.RadGrid_CustomForest
.rgPagePrev
{
background-position:4px -992px;
}
.RadGrid_CustomForest
.rgPageNext
{
background-position:-20px -992px;
}
.RadGrid_CustomForest
.rgPageFirst
{
background-position:3px -960px;
}
.RadGrid_CustomForest
.rgPageLast
{
background-position:-19px -960px;
}
html
body .RadGrid_CustomForest input.PagerTextBox
{
padding:2px 0 2px 3px;
}
/*sorting, reordering*/
.GridHeader_CustomForest
.rgSortAsc
{
background-position:-20px -926px;
height:12px;
}
.GridHeader_CustomForest
.rgSortDesc
{
background-position:4px -925px;
height:12px;
}
.TopReorderIndicator_CustomForest
,
.BottomReorderIndicator_CustomForest
{
width:11px !important;
height:11px !important;
margin-left:-5px;
background:url('Grid/sprite.gif') 0 -899px no-repeat;
}
.BottomReorderIndicator_CustomForest
{
background-position:-21px -899px;
}
/*filtering*/
.GridFilterRow_CustomForest
{
background:#9cb16a;
}
.GridFilterRow_CustomForest
td
{
border-top:1px solid #b6c988;
border-bottom:1px solid #62703b;
padding:0.1em 7px 0.2em 11px;
}
.RadGrid_CustomForest
.rgFilter
{
background-position:2px -1024px;
}
.GridFilterRow_CustomForest
input[type="text"]
{
border:1px solid #78884a;
background:#f2f8e3;
font:11px "segoe ui",arial,sans-serif;
color:#41442b;
vertical-align:middle;
}
/*grouping*/
.GroupPanel_CustomForest
{
border-bottom:1px solid #202f11;
background:#425335;
color:#d3e8b1;
}
.GroupPanel_CustomForest
table td
{
line-height:1.6em;
}
.GroupPanel_CustomForest
.rgSortAsc
{
background-position:-20px -1679px;
height:12px;
}
.GroupPanel_CustomForest
.rgSortDesc
{
background-position:4px -1679px;
height:12px;
}
.GroupPanel_CustomForest
td
{
border:1px solid #465938;
padding:0 6px;
}
.GroupPanel_CustomForest
td td
{
border:0;
padding:0;
}
.GroupPanelItems_CustomForest
{
border:1px solid;
border-color:#587244 #587244 #577143;
padding:3px 0 4px 5px;
background:#4f6340;
color:#d3e8b1;
font-weight:normal;
}
.GroupHeader_CustomForest
{
font-size:1.1em;
color:#762100;
}
.GroupHeader_CustomForest
td
{
padding:0.8em 11px 0.5em 7px;
font-family:Tahoma;
font-size:11px;
font-weight:bold;
}
.RadGrid_CustomForest
.rgExpand
{
background-position:5px -1054px;
}
.RadGrid_CustomForest
.rgCollapse
{
background-position:-21px -1053px;
}
.GroupHeader_CustomForest
td div
{
top:-0.6em;
}
.GroupHeader_CustomForest
td div div
{
top:0;
}
/*editing*/
.GridEditForm_CustomForest
{
border-bottom:1px solid #62703b;
}
.RadGrid_CustomForest
.rgUpdate
{
background-position:2px -1216px;
}
.RadGrid_CustomForest
.rgCancel
{
background-position:2px -1248px;
}
/*hierarchy*/
.DetailTable_CustomForest
{
border-right:0;
}
/*command row*/
.GridCommandRow_CustomForest
{
background:#425335;
}
.GridCommandRow_CustomForest
,
.GridCommandRow_CustomForest
a
{
color:#d3e8b1;
text-decoration:none;
}
.GridCommandRow_CustomForest
td
{
border-bottom:1px solid #202f11;
padding:0;
font-family:Tahoma;
font-size:10px;
font-weight:bold;
}
tfoot
.GridCommandRow_CustomForest td
{
border-bottom:0;
}
.GridCommandRow_CustomForest
table
{
border:1px solid #465938;
}
.GridCommandRow_CustomForest
table td
{
border:0;
padding:0 6px 2px;
}
.GridCommandRow_CustomForest
table td td
{
padding:1px;
}
.RadGrid_CustomForest
.rgAdd
{
margin-right:4px;
background-position:0 -1091px;
}
.RadGrid_CustomForest
.rgRefresh
{
margin-right:4px;
background-position:0 -1123px;
}
.RadGrid_CustomForest
.rgEdit
{
background-position:1px -1154px;
}
.RadGrid_CustomForest
.rgDel
{
background-position:0 -1187px;
}
/*multirow select*/
.GridRowSelector_CustomForest
{
background:#000;
}
/*row drag n drop*/
.GridItemDropIndicator_CustomForest
{
border-top:1px dashed #78884a;
}
/*tooltip*/
.GridToolTip_CustomForest
{
border:1px solid #62703b;
padding:3px;
background:#9cb16a;
color:#41442b;
}
/*rtl*/
.RadGridRTL_CustomCustomForest
.GridHeader_CustomForest,
.RadGridRTL_CustomCustomForest
.ResizeHeader_CustomCustomForest
{
text-align:right;
font-family:Tahoma;
font-size:11px;
font-weight:bold;
}
.RadGridRTL_CustomCustomForest
.GridRow_CustomCustomForest td,
.RadGridRTL_CustomForest
.GridAltRow_CustomForest td,
.RadGridRTL_CustomForest
.GridEditRow_CustomForest td,
.RadGridRTL_CustomForest
.GridFooter_CustomForest td,
.RadGridRTL_CustomForest
.GroupHeader_CustomForest td
{
padding-right:10px;
padding-left:6px;
}
.RadGridRTL_CustomForest
.GridHeader_CustomForest,
.RadGridRTL_CustomForest
.ResizeHeader_CustomForest,
.RadGridRTL_CustomForest
.GridFilterRow_CustomForest td
{
padding-right:11px;
padding-left:7px;
}
.RadGridRTL_CustomForest
.PagerLeft_CustomForest,
.RadGridRTL_CustomForest
.GridPager_CustomForest .radslider
{
float:right;
}
.RadGridRTL_CustomForest
.PagerRight_CustomForest
{
float:left;
}
Thanks in advance
Rank 1
any help please?
Rank 2
You can set the images for EditCommandColumn directly in the markup for the column as shown below:
aspx:
| <telerik:GridEditCommandColumn ButtonType="ImageButton" EditImageUrl="Skins/Grid/Edit.gif" |
| UpdateImageUrl="Skins/Grid/Update.gif" CancelImageUrl="Skins/Grid/Cancel.gif"> |
| </telerik:GridEditCommandColumn> |
Hope this helps..
Princy.
Rank 1
Hi Princy,
Thanks, I know that I can set the image for EditCommandColumn, but I don’t want to use this option as I’ve to apply it for every single grid “then what the benefit of RadGridSkin”? On top of this, the edit image is not the only problem as the image’s alignment for most of grid parts (selected row, grid header…) are getting disturb.
To Telerik Team, you’ve asked me for my custom skin from about 3 days ago and till now no answer, help or even a hint?!!
Your custom skin is compatible with RadGrid versions Q3 2008 and earlier, so I hope you are using it with the correct control version. If you are using RadGrid 2009.1.311 or later, you can migrate your custom skin, create it again from the already migrated Q3 2008 Forest skin, or create it again from the new Forest skin (available in the Skins subfolder in your RadControls installation location). Now to your questions:
1. In order to have an image edit button when using a custom skin, you need to do one of the following things:
a) define it declaratively, as Princy has demonstrated
b) set ButtonType="PushButton" and Text=" " for the EditCommandColumn, and then set a "rgEdit" CSS class to the button inside the table cell in ItemCreated. This will make the button use the edit image from the RadGrid skin sprite
c) similar to (b), but easier - for RadGrid versions 2009.1+ you can use
<telerik:GridButtonColumn ButtonType="PushButton" Text=" " ButtonCssClass="rgEdit" CommandName="Edit" />
and no other customizations are required.
d) set ImagesPath to the RadGrid control and place all icons the control uses (see at the bottom) in the specified location with the correct file names.
2. I see some misalignment in RTL mode caused by .RadGridRTL_CustomCustomForest (duplicate skin name in the CSS class). Please check all CSS classes.
Best wishes,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.