RadGrid Custom Skin

[ajit]

Hi,
        i am having some trouble while applying the custom skin to Rad Grid. I have followed the procedure to apply custom skin. It works very well on the grid but not the filter row and the page size.  I have even tried to use your visual style builder to do it but it does not seem to work. The issue is only with filter row and page size. ... they do not seem to apply the skin or font size.Please could you provide me some feedback as to what else needs to be done to fix this issue.

Regards,
Ajit

[Dimo]

Hi Ajit,

When dealing with custom skins, we need the CSS code in order to test it locally.

Greetings,
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.

[ajit]

Hi Dimo,
                  Here is the css code.

/*Telerik RadGrid Office2007 Skin*/

/*global*/

.RadGrid_MySkin
{
    border:1px solid #688caf;
    background:#fff;
    color:#333;
}

.RadGrid_MySkin,
.RadGrid_MySkin .rgMasterTable,
.RadGrid_MySkin .rgDetailTable,
.RadGrid_MySkin .rgGroupPanel table,
.RadGrid_MySkin .rgCommandRow table,
.RadGrid_MySkin .rgEditForm table,
.RadGrid_MySkin .rgPager table,
.GridToolTip_MySkin
{
    font:8pt verdana,arial,sans-serif;
}

.RadGrid_MySkin .rgMasterTable,
.RadGrid_MySkin .rgDetailTable
{
    border-collapse:separate;
}

.RadGrid_MySkin .rgRow,
.RadGrid_MySkin .rgAltRow,
.RadGrid_MySkin .rgHeader,
.RadGrid_MySkin .rgResizeCol,
.RadGrid_MySkin .rgPager,
.RadGrid_MySkin .rgGroupPanel,
.RadGrid_MySkin .rgGroupHeader
{
 cursor:default;
}

.RadGrid_MySkin input[type="image"]
{
 cursor:pointer;
}

.RadGrid_MySkin .rgRow td,
.RadGrid_MySkin .rgAltRow td,
.RadGrid_MySkin .rgEditRow td,
.RadGrid_MySkin .rgFooter td,
.RadGrid_MySkin .rgFilterRow td,
.RadGrid_MySkin .rgHeader,
.RadGrid_MySkin .rgResizeCol,
.RadGrid_MySkin .rgGroupHeader td
{
 padding-left:7px;
 padding-right:7px;
}

.RadGrid_MySkin .rgClipCells .rgHeader,
.RadGrid_MySkin .rgClipCells .rgRow>td,
.RadGrid_MySkin .rgClipCells .rgAltRow>td
{
 overflow:hidden;
}

.RadGrid_MySkin .rgHeader:first-child,
.RadGrid_MySkin th.rgResizeCol:first-child,
.RadGrid_MySkin .rgFilterRow>td:first-child,
.RadGrid_MySkin .rgRow>td:first-child,
.RadGrid_MySkin .rgAltRow>td:first-child
{
 border-left:0;
 padding-left:8px;
}

.RadGrid_MySkin .rgAdd,
.RadGrid_MySkin .rgRefresh,
.RadGrid_MySkin .rgEdit,
.RadGrid_MySkin .rgDel,
.RadGrid_MySkin .rgFilter,
.RadGrid_MySkin .rgPagePrev,
.RadGrid_MySkin .rgPageNext,
.RadGrid_MySkin .rgPageFirst,
.RadGrid_MySkin .rgPageLast,
.RadGrid_MySkin .rgExpand,
.RadGrid_MySkin .rgCollapse,
.RadGrid_MySkin .rgSortAsc,
.RadGrid_MySkin .rgSortDesc,
.RadGrid_MySkin .rgUpdate,
.RadGrid_MySkin .rgCancel,
.RadGrid_MySkin .rgUngroup
{
 width:16px;
 height:16px;
 border:0;
 margin:0;
 padding:0;
 background-color:transparent;
 background-image:url('Grid/sprite.gif');
 background-repeat:no-repeat;
 vertical-align:middle;
 font-size:1px;
 cursor:pointer;
}

.RadGrid_MySkin .rgGroupItem input,
.RadGrid_MySkin .rgCommandRow img,
.RadGrid_MySkin .rgHeader input,
.RadGrid_MySkin .rgFilterRow img,
.RadGrid_MySkin .rgFilterRow input,
.RadGrid_MySkin .rgPager img
{
 vertical-align:middle;
}

/*header*/

.RadGrid_MySkin .rgHeaderDiv
{
 background:#d6e5f3 0 -5900px repeat-x url('Grid/sprite.gif');
}
.rgTwoLines .rgHeaderDiv
{
 background-position:0 -6200px;
}

.rgNoScrollImage .rgHeaderDiv
{
 background-image:none;
}

.RadGrid_MySkin .rgHeader,
.RadGrid_MySkin th.rgResizeCol
{
 border:solid #5d8cc9;
 border-width:0 0 1px 1px;
 padding-top:5px;
 padding-bottom:4px;
 background:0 -2300px repeat-x #c3d8f1 url('Grid/sprite.gif');
 text-align:left;
 font-weight:normal;
}

.RadGrid_MySkin th.rgSorted
{
 border-bottom-color:#ff9b35;
 background-color:#ffca5e;
 background-position:0 -2600px;
}

.RadGrid_MySkin .rgHeader,
.RadGrid_MySkin .rgHeader a
{
    color:#00156e;
    text-decoration:none;
}

.RadGrid_MySkin th.rgSorted,
.RadGrid_MySkin th.rgSorted a
{
    color:#000;
}

.RadGrid_MySkin .rgCheck
{
 height:15px;
 margin:0;
 padding:0;
}

/*rows*/

.RadGrid_MySkin .rgRow td,
.RadGrid_MySkin .rgAltRow td,
.RadGrid_MySkin .rgEditRow td,
.RadGrid_MySkin .rgFooter td
{
 border:1px solid;
 border-top:0;
 border-right:0;
 padding-top:4px;
 padding-bottom:3px;
}

.RadGrid_MySkin .rgRow td,
.RadGrid_MySkin .rgAltRow td
{
 border-color:#d0d7e5;
}

.RadGrid_MySkin .rgRow .rgSorted,
.RadGrid_MySkin .rgAltRow .rgSorted
{
 background-color:#f2f2f2;
}

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

.RadGrid_MySkin .rgRow a,
.RadGrid_MySkin .rgAltRow a,
.RadGrid_MySkin .rgEditRow a,
.RadGrid_MySkin .rgFooter a,
.RadGrid_MySkin .rgEditForm a
{
 color:#00156e;
}

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

.RadGrid_MySkin .rgActiveRow,
.RadGrid_MySkin .rgHoveredRow
{
    background:#ecf4ff;
}
*+html .RadGrid_MySkin .rgActiveRow .rgSorted,
*+html .RadGrid_MySkin .rgHoveredRow .rgSorted{background-color:#ecf4ff}
* html .RadGrid_MySkin .rgActiveRow .rgSorted,
* html .RadGrid_MySkin .rgHoveredRow .rgSorted{background-color:#ecf4ff}

.RadGrid_MySkin .rgEditRow
{
 background:#ffe5ad;
}
*+html .RadGrid_MySkin .rgEditRow .rgSorted{background-color:#ffe5ad}
* html .RadGrid_MySkin .rgEditRow .rgSorted{background-color:#ffe5ad}

.RadGrid_MySkin .rgSelectedRow td,
.RadGrid_MySkin .rgActiveRow td,
.RadGrid_MySkin .rgHoveredRow td,
.RadGrid_MySkin .rgEditRow td
{
 border-left:0;
 padding-left:8px;
}

.RadGrid_MySkin .rgSelectedRow td
{
 border-bottom-color:#ff9b35;
}

.RadGrid_MySkin .rgActiveRow td,
.RadGrid_MySkin .rgHoveredRow td,
.RadGrid_MySkin .rgEditRow td
{
 border-bottom-color:#d0d7e5;
}

/*footer*/

.RadGrid_MySkin .rgFooterDiv,
.RadGrid_MySkin .rgFooter
{
 background:#9ab5db 0 -6500px repeat-x url('Grid/sprite.gif');
}

.RadGrid_MySkin .rgFooter td
{
 border-width:1px 0;
 border-color:#567db0 #fff #fff;
 padding-left:8px;
}

/*status*/

.RadGrid_MySkin .rgPager .rgStatus
{
 width:35px;
 border:0;
 border-top:1px solid #5d8cc9;
 border-right:1px solid #9cb9dc;
 border-color:#5d8cc9 #9cb9dc;
 padding:3px;
}

.RadGrid_MySkin .rgStatus div
{
 width:24px;
 height:24px;
 overflow:hidden;
 border:0;
 margin:0 auto;
 padding:0;
 background:transparent center center no-repeat url('Common/loading_small.gif');
 text-indent:-2222px;
}

/*pager*/

.RadGrid_MySkin .rgPager
{
 background:#ecf3fc 0 -7000px repeat-x url('Grid/sprite.gif');
}

.RadGrid_MySkin .rgPager td
{
 padding:0;
}

.RadGrid_MySkin .rgPager .rgPagerCell
{
 border:0;
 border-top:1px solid #5d8cc9;
 border-left:1px solid #fff;
 padding:5px 0;
}

.RadGrid_MySkin .rgWrap
{
 float:left;
 padding:0 10px;
 line-height:22px;
 white-space:nowrap;
}

.RadGrid_MySkin .rgArrPart1
{
 padding-right:0;
}

.RadGrid_MySkin .rgArrPart2
{
 padding-left:0;
}

.RadGrid_MySkin .rgInfoPart
{
 float:right;
 color:#333;
}

.RadGrid_MySkin .rgInfoPart strong
{
 font-weight:normal;
 color:#000;
}

.RadGrid_MySkin .rgArrPart1 img,
.RadGrid_MySkin .rgArrPart2 img
{
 margin:0 8px;
}

.RadGrid_MySkin .rgPageFirst,
.RadGrid_MySkin .rgPagePrev,
.RadGrid_MySkin .rgPageNext,
.RadGrid_MySkin .rgPageLast
{
 width:17px;
 height:22px;
 vertical-align:top;
}

.RadGrid_MySkin .NextPrev .rgPageFirst,
.RadGrid_MySkin .NextPrev .rgPagePrev,
.RadGrid_MySkin .NextPrev .rgPageNext,
.RadGrid_MySkin .NextPrev .rgPageLast
{
 vertical-align:middle;
}

.RadGrid_MySkin .rgPageFirst
{
 margin:0 3px 0 0;
 background-position:0 -548px;
}
.RadGrid_MySkin .rgPageFirst:hover
{
 background-position:0 -598px;
}
.RadGrid_MySkin .rgPagePrev
{
 margin:0 3px 0 0;
 background-position:0 -698px;
}
.RadGrid_MySkin .rgPagePrev:hover
{
 background-position:0 -748px;
}
.RadGrid_MySkin .rgPageNext
{
 margin:0 0 0 3px;
 background-position:0 -848px;
}
.RadGrid_MySkin .rgPageNext:hover
{
 background-position:0 -898px;
}
.RadGrid_MySkin .rgPageLast
{
 margin:0 0 0 3px;
 background-position:0 -998px;
}
.RadGrid_MySkin .rgPageLast:hover
{
 background-position:0 -1048px;
}

.RadGrid_MySkin .rgPagerButton
{
 height:22px;
 border:1px solid #7793b9;
 margin:0 14px 0 0;
 padding:0 4px 2px;
 background:#e8f1fc repeat-x 0 -1550px url('Grid/sprite.gif');
 color:#00156e;
 font:8pt Verdana,arial,sans-serif;
 vertical-align:middle;
 cursor:pointer;
}

.RadGrid_MySkin .rgNumPart
{
 padding:0;
}

.RadGrid_MySkin .NumericPages .rgNumPart
{
 padding:0 10px;
 font:8pt Verdana,arial,sans-serif;
}

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

.RadGrid_MySkin .rgNumPart a
{
 float:left;
 line-height:22px;
 margin:0;
 padding:0 5px 0 0;
 color:#00156e;
 text-decoration:none;
}

.RadGrid_MySkin .rgNumPart span
{
 float:left;
 padding:0 0 0 5px;
}

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

.RadGrid_MySkin .rgNumPart a:hover span
{
 background-position:0 -1150px;
 cursor:pointer;
}

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

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

.RadGrid_MySkin .NextPrevNumericAndAdvanced .rgAdvPart
{
 float:none;
 text-align:center;
}

.RadGrid_MySkin .rgPager .RadSlider
{
 float:left;
 margin:0 10px 0 0;
}

.RadGrid_MySkin .rgPager .rgPagerLabel,
.RadGrid_MySkin .rgPager .RadComboBox,
.RadGrid_MySkin .rgPager .RadInput_MySkin
{
 margin:0 4px 0 0;
 vertical-align:middle;
 font:8pt Verdana,arial,sans-serif;
}

*+html .RadGrid_MySkin .rgPager .RadComboBox{margin-top:-1px;}
* html .RadGrid_MySkin .rgPager .RadComboBox{margin-top:-1px;padding:1px 0;}

.RadGrid_MySkin .rgPagerTextBox
{
 text-align:center;
 font:8pt Verdana,arial,sans-serif;
}

/*sorting, reordering*/

.RadGrid_MySkin .rgHeader .rgSortAsc
{
 background-position:3px -147px;
 height:10px;
}

.RadGrid_MySkin .rgHeader .rgSortDesc
{
 background-position:3px -96px;
 height:10px;
}

.GridReorderTop_MySkin,
.GridReorderBottom_MySkin
{
 width:9px !important;
 height:9px !important;
 margin-left:-5px;
 background:0 0 no-repeat url('Grid/sprite.gif');
}

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

/*filtering*/

.RadGrid_MySkin .rgFilterRow
{
 background:#d6e5f3;
 font:8pt Verdana,arial,sans-serif;
}

.RadGrid_MySkin .rgFilterRow td
{
    padding-top:5px;
    padding-bottom:6px;
    border:solid #9eb6ce;
    border-width:0 0 1px 1px;
}

.RadGrid_MySkin .rgFilter
{
 width:22px;
 height:22px;
 margin:0 0 0 2px;
 background-position:0 -300px;
}

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

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

.RadGrid_MySkin .rgFilterBox
{
 border:1px solid #abc1de;
 padding:2px 1px 3px;
 font:8pt verdana,arial,sans-serif;
 color:#000;
 vertical-align:middle;
}

/*grouping*/

.RadGrid_MySkin .rgGroupPanel
{
 height:24px;
 border:0;
 border-bottom:1px solid #688caf;
 background:#ecf3fc;
}

.RadGrid_MySkin .rgGroupPanel td
{
 border:0;
 padding:3px 4px;
 vertical-align:middle;
}

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

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

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

.RadGrid_MySkin .rgUngroup
{
 background-position:0 -7500px;
}

.RadGrid_MySkin .rgGroupItem
{
 border:1px solid #4b78ca;
 padding:0 2px 1px 3px;
 background:#e6ebf5 0 -1900px repeat-x url('Grid/sprite.gif');
 color:#00156e;
 line-height:20px;
 font-weight:normal;
 vertical-align:middle;
}

.RadGrid_MySkin .rgGroupHeader
{
    background:#d7e6f7;
    font-size:1.1em;
    line-height:21px;
 color:#567db0;
}

.RadGrid_MySkin .rgGroupHeader td
{
 border-top:1px solid #fcfcfd;
 border-bottom:1px solid #6f92b3;
    padding:0 7px 0 8px;
}

.RadGrid_MySkin td.rgGroupCol,
.RadGrid_MySkin td.rgExpandCol
{
 background:#d7e6f7 none;
 border-color:#d7e6f7;
}

.RadGrid_MySkin .rgGroupHeader .rgExpand
{
 background-position:5px -495px;
}

.RadGrid_MySkin .rgGroupHeader .rgCollapse
{
 background-position:3px -93px;
}

.RadGrid_MySkin .rgGroupHeader td p
{
    display:inline;
    margin:0;
    padding:0 10px;
}

.RadGrid_MySkin .rgGroupHeader td div div
{
 top:-0.8em;
 padding:0 10px;
}

.RadGrid_MySkin .rgGroupHeader td div div div
{
 top:0;
 padding:0;
 border:0;
}

/*editing*/

.RadGrid_MySkin .rgEditForm
{
 border-bottom:1px solid #d0d7e5;
}

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

.RadGrid_MySkin .rgCancel
{
 background-position:2px -1848px;
}

/*hierarchy*/

.RadGrid_MySkin .rgDetailTable
{
 border:1px solid #688caf;
 border-right:0;
}

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

.RadGrid_MySkin .rgCollapse
{
 background-position:3px -94px;
}

/*command row*/

.RadGrid_MySkin .rgCommandRow
{
 background:#d6e6f4 0 -2099px repeat-x url('Grid/sprite.gif');
 color:#333;
}

.RadGrid_MySkin .rgCommandCell
{
 border:0;
 padding:0;
}

.RadGrid_MySkin thead .rgCommandCell
{
 border-bottom:1px solid #688caf;
}

.RadGrid_MySkin tfoot .rgCommandCell
{
 border-top:1px solid #688caf;
}

.RadGrid_MySkin .rgCommandTable td
{
 border:0;
 padding:3px 7px 4px;
}

.RadGrid_MySkin .rgCommandTable
{
 border:1px solid #f6f7f9;
}

.RadGrid_MySkin .rgCommandRow a
{
 color:#00156e;
 text-decoration:none;
}

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

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

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

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

/*multirow select*/

.GridRowSelector_MySkin
{
 background:#00156e;
}

/*row drag n drop*/

.GridItemDropIndicator_MySkin
{
    border-top:1px dashed #00156e;
}

/*tooltip*/

.GridToolTip_MySkin
{
 border:1px solid #6187b8;
 padding:3px;
 background:#d7e3f2;
 color:#333;
}

/*rtl*/

.RadGridRTL_MySkin .rgHeader,
.RadGridRTL_MySkin .rgResizeCol
{
 text-align:right;
}

.RadGridRTL_MySkin .rgHeader:first-child,
.RadGridRTL_MySkin th.rgResizeCol:first-child,
.RadGridRTL_MySkin .rgFilterRow>td:first-child,
.RadGridRTL_MySkin .rgRow>td:first-child,
.RadGridRTL_MySkin .rgAltRow>td:first-child
{
 border-left:1px solid;
 padding-left:7px;
}

.RadGridRTL_MySkin .rgPager .rgStatus
{
 border-right:0;
 border-left-width:1px;
}

.RadGridRTL_MySkin .rgWrap
{
 float:right;
}

.RadGridRTL_MySkin .rgInfoPart
{
 float:left;
}

.RadGridRTL_MySkin .rgNumPart
{
 width:220px;
}

.RadGridRTL_MySkin .rgNumPart a
{
 float:right;
}

.RadGridRTL_MySkin .rgDetailTable
{
 border-right:1px solid;
 border-left:0;
}

 

 

 

 

 

 

 

 

 

div.RadGrid_MySkin {  }
div.RadGrid_MySkin .rgCommandRow { font-family: Verdana; }
div.RadGrid_MySkin .rgCommandCell { font-family: Verdana; }
div.RadGrid_MySkin .rgHeader {  }
div.RadGrid_MySkin th.rgResizeCol {  }
div.RadGrid_MySkin th.rgSorted {  }
div.RadGrid_MySkin .rgHeader { font-family: Verdana; }
div.RadGrid_MySkin .rgHeader a { font-family: Verdana; }
div.RadGrid_MySkin th.rgSorted {  }
div.RadGrid_MySkin th.rgSorted a {  }
div.RadGrid_MySkin .rgFilterRow { font-family: Verdana; }
div.RadGrid_MySkin .rgFilterRow td {  }
div.RadGrid_MySkin .rgRow td {  }
div.RadGrid_MySkin .rgSelectedRow td {  }
div.RadGrid_MySkin .rgActiveRow td {  }
div.RadGrid_MySkin .rgHoveredRow td {  }
div.RadGrid_MySkin .rgRow { font-family: Verdana; font-size: 8pt; }
div.RadGrid_MySkin tr.rgSelectedRow {  }
div.RadGrid_MySkin table .rgActiveRow {  }
div.RadGrid_MySkin table tr.rgHoveredRow {  }
div.RadGrid_MySkin .rgAltRow td {  }
div.RadGrid_MySkin .rgAltRow { font-family: Verdana; line-height: 16px; }
div.RadGrid_MySkin .rgFooter td { line-height: 16px; }
div.RadGrid_MySkin .rgFooter { font-family: Verdana; }
div.RadGrid_MySkin .rgPager { font-family: Verdana; }
div.RadGrid_MySkin .rgPager .rgPagerCell { font-size: 8pt; font-family: Verdana; }
div.RadGrid_MySkin .rgGroupHeader {  }
div.RadGrid_MySkin .rgGroupHeader td {  }
div.RadGrid_MySkin .rgEditForm {  }
div.RadGrid_MySkin .rgDetailTable {  }


Thank you,

Regards,
Ajit

[Dimo]

Hello Ajit,

Your RadGrid skin seems OK. Have you registered custom skins (named "MySkin") for RadMenu and RadComboBox as well? They are needed by the filtering menu and the page size dropdown.

Greetings,
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.

[ajit]

Hi Dimo,
                   Thank you very much. I had not registered my combo and menu skin. It looks good now.

Thank you

Regards,
Ajit

[Robert Bergbrant]

- Have you registered custom skins (named "MySkin") for RadMenu and RadComboBox as well?

What do you mean by register skin for the combobox? Where?

/Robert

[Dimo]

Hi Robert,

RadControls skins consist of CSS files and images. CSS files are normally registered in the <head> of the web page. Embedded skins' CSS files are registered automatically by the control, but custom CSS files should be registered by you (unless you are using ASP.NET themes).

Please refer to our documentation:

http://www.telerik.com/help/aspnet-ajax/skinregistration.html

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.

[Robert Bergbrant]

We´re using skins and themes and I have as Ajit custom skin and css:s for my radgrid. How can I set default "telerik" or "vista" skin for the radcombobox for page size? I´m trying to set the property for the radcombobox skin in code behind in itemcreated event without success. I am using default pager-mode.

/Robert

[Dimo]

The skin name of the pager combobox always matches the skin name of the RadGrid control. So if you are using a custom skin for RadGrid, you should use one for the RadComboBox as well.

The only exception is when the custom skin name matches one of the embedded skin names. In this case you can set EnableEmbeddedSkins="true" for the pager combobox in RadGrid.ItemCreated and the control will use its embedded skin.

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.

[Robert Bergbrant]

I have already tested EnableEmbeddedSkins="true" but I get following error:
Telerik.Web.UI.RadComboBox with ID='PageSizeComboBox' was unable to find embedded skin with name 'Custom'

Here is some code:
code-behind
  Protected Sub RadGrid1_ItemCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles RadGrid1.ItemCreated
    If e.Item.ItemType = GridItemType.Pager Then
      CType(CType(e.Item.FindControl("PageSizeComboBox"), System.Web.UI.Control), RadComboBox).EnableEmbeddedSkins = True
    End If
  End Sub

Skin-file for radgrid
<telerik:RadGrid runat="Server" SkinId="TeliaRadgrid" Skin="Custom" EnableEmbeddedSkins="False" ...................

[Dimo]

Robert,

Please read my previous post again carefully and let me know if there is anything unclear.

The skin name of the pager combobox always matches the skin name of the RadGrid control. So if you are using a custom skin for RadGrid, you should use one for the RadComboBox as well.

The only exception is when the custom skin name matches one of the embedded skin names. In this case you can set EnableEmbeddedSkins="true" for the pager combobox in RadGrid.ItemCreated and the control will use its embedded skin.


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.

[Ashwin]

Hi,

I have created a custom skin for SharePoint 2010 Visual Webpart that was created using RadGrid control. The look and feel of the contol is as expected when viewed on IE 8, Firefox, Chrome and Safari. But when viewed on IE 7 , the border does not display for the cell if that specific cell does not contain data. I had tried to include CSS hacks (! and *+html) but it did not work. I am enclosing a screen shot for better understanding of the issue. Kindly provide steps to fix this issue.

on the RadGrid RadGrid_CustomSkin CSS file, I am specifying the border color as follows:

.RadGrid_MyCustomSkin .rgRow,
.RadGrid_MyCustomSkin .rgAltRow,
.RadGrid_MyCustomSkin .rgRow .rgSorted,
.RadGrid_MyCustomSkin .rgAltRow .rgSorted,
{
border-color:#000;
}

Thanks

[Tsvetoslav]

Hello Ashwin,

http://www.telerik.com/community/forums/aspnet-ajax/grid/radgrid-item-missing-border-when-null.aspx#1196020

http://www.telerik.com/community/forums/aspnet-ajax/grid/border-not-displayed-if-cell-is-empty-in-internet-explorer.aspx

Hope it helps.


Best wishes,
Tsvetoslav
the Telerik team

[Casey]

Hello,

I realize that this is an old thread, and that maybe what I am experiencing is now intentional, but I find Dimo's statement (pasted below) to be incorrect in my scenario.

"The skin name of the pager combobox always matches the skin name of the RadGrid control. So if you are using a custom skin for RadGrid, you should use one for the RadComboBox as well. "

I am using a custom skin for my RadGrid, created via the Telerik Visual Style Builder (which is very nice!), and the RadComboBox in the GridPagerItem is not using the same skin name. My custom skin name is RadGrid_RedSkin; however, when I inspect the RadComboBox in the pager using IE9 developer tools, my RadComboBox is using RadComboBox_Default as the skin. Is this an intentional change in one of the versions between Dimo's statement, and my current control version, 2011.3.1115?

After seeing this thread, I tried creating a RadComboBox_RedSkin skin, which I referenced in the head tags of my page, but that did not resolve my issue (since the class being used was RadComboBox_Default). I was able to fix my issue by setting EnableEmbeddedSkins = true in the ItemCreated event of my RadGrid, 

Thanks!
Casey

[Tsvetoslav]

Hi Casey,

Any nested control within RadGrid inheirts its skin - that goes for the pager combo as well. So, this issue is not expected. Please, open up a formal support ticket and send your implementation so that we can inspect what exactly went wrong with it.

Thanks for that.


Greetings, Tsvetoslav
the Telerik team

[Casey]

Hello Tsvetoslav!

Support ticket submitted. I look forward to hearing from Telerik to see if I'm doing something wrong, or if there is a bug.

Thanks!
Casey

[Casey]

It turns out that I was setting the CssClass property to my custom skin name instead of the Skin property of the RadGrid. By setting the Skin property, the RadComboBox's skin correctly uses the skin name assigned to the RadGrid. 

I figured it was just me :)