Formatting of Page Size part of the Grid

[Joe]

Hey guys,

Please help me with formatting of the page size part of the grid! I'm using a custom skin, but the page size doesn't even show properly as you can see on the images and even pop up grid with number does not look good at all... Cheers!!

/*Telerik RadGrid Default Skin*/

/*global*/

.RadGrid_GridBannered
{
    background-position: #fff;
    border: 1px solid #828282;
    background: #ffffff;
    color: #000000;
}

.RadGrid_GridBannered,
.RadGrid_GridBannered .rgMasterTable,
.RadGrid_GridBannered .rgDetailTable,
.RadGrid_GridBannered .rgGroupPanel table,
.RadGrid_GridBannered .rgCommandRow table,
.RadGrid_GridBannered .rgEditForm table,
.RadGrid_GridBannered .rgPager table,
.GridToolTip_GridBannered
{
    font:12px/16px arial,sans-serif;
}

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

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

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

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

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

.RadGrid_GridBannered .rgAdd,
.RadGrid_GridBannered .rgRefresh,
.RadGrid_GridBannered .rgEdit,
.RadGrid_GridBannered .rgDel,
.RadGrid_GridBannered .rgFilter,
.RadGrid_GridBannered .rgPagePrev,
.RadGrid_GridBannered .rgPageNext,
.RadGrid_GridBannered .rgPageFirst,
.RadGrid_GridBannered .rgPageLast,
.RadGrid_GridBannered .rgExpand,
.RadGrid_GridBannered .rgCollapse,
.RadGrid_GridBannered .rgSortAsc,
.RadGrid_GridBannered .rgSortDesc,
.RadGrid_GridBannered .rgUpdate,
.RadGrid_GridBannered .rgCancel,
.RadGrid_GridBannered .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_GridBannered .rgGroupItem input,
.RadGrid_GridBannered .rgCommandRow img,
.RadGrid_GridBannered .rgHeader input,
.RadGrid_GridBannered .rgFilterRow img,
.RadGrid_GridBannered .rgFilterRow input,
.RadGrid_GridBannered .rgPager img
{
    vertical-align:middle;
}

/*header*/

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

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

.RadGrid_GridBannered .rgHeader,
.RadGrid_GridBannered th.rgResizeCol
{
    border:0;
    border:1px solid #d12421;
    padding-top:5px;
    padding-bottom:4px;
    /*background:#ffffff 0 -2300px repeat-x url('Grid/sprite.gif');*/
    background:#EDB512;
    color:#d12421;
    text-align:left;
    font-weight:bold;
}

.RadGrid_GridBannered th.rgSorted
{
    background-color:#ffffff;
    background-position:0 -2600px;
}

.RadGrid_GridBannered .rgHeader, .RadGrid_GridBannered .rgHeader a
{
    color: #d12421;
    text-decoration: none;
}

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

/*rows*/

div.RadGrid_GridBannered .rgRow td,
div.RadGrid_GridBannered .rgAltRow td,
div.RadGrid_GridBannered .rgEditRow td,
div.RadGrid_GridBannered .rgFooter td
{
    border:0;
    /*border-top:1px solid;
    border-bottom:1px solid;*/
    padding-top:4px;
    padding-bottom:3px;
}

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

.RadGrid_GridBannered .rgAltRow
{
    background:#fff;
}

.RadGrid_GridBannered .rgAltRow td
{

}

.RadGrid_GridBannered .rgRow .rgSorted
{

}

.RadGrid_GridBannered .rgAltRow .rgSorted
{

}

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

.RadGrid_GridBannered .rgRow a,
.RadGrid_GridBannered .rgAltRow a,
.RadGrid_GridBannered .rgEditRow a,
.RadGrid_GridBannered .rgFooter a,
.RadGrid_GridBannered .rgEditForm a
{
    color:#000;
}

.RadGrid_GridBannered .rgSelectedRow
{
    background-color:#EDB512;
    font-weight: bold;
    color:#d12421;
}
*+html .RadGrid_GridBannered .rgSelectedRow .rgSorted{background-color:#EDB512}
* html .RadGrid_GridBannered .rgSelectedRow .rgSorted{background-color:#EDB512}

.RadGrid_GridBannered .rgSelectedRow a
{
    color:#d12421;
}

.RadGrid_GridBannered .rgActiveRow,
.RadGrid_GridBannered .rgHoveredRow
{
    /*background:#ffffff 0 -2900px repeat-x url('Grid/sprite.gif');*/
    background-color:#EDB512;
    font-weight: bold;
    color:#d12421;
}
*+html .RadGrid_GridBannered .rgActiveRow .rgSorted,
*+html .RadGrid_GridBannered .rgHoveredRow .rgSorted{background-color:#EDB512}
* html .RadGrid_GridBannered .rgActiveRow .rgSorted,
* html .RadGrid_GridBannered .rgHoveredRow .rgSorted{background-color:#EDB512}

.RadGrid_GridBannered .rgEditRow
{
    background-color:#EDB512;
    /*background:#fff 0 -4900px repeat-x url('Grid/sprite.gif');*/
}

.RadGrid_GridBannered .rgActiveRow td,
.RadGrid_GridBannered .rgActiveRow td.rgSorted,
.RadGrid_GridBannered .rgHoveredRow td,
.RadGrid_GridBannered .rgHoveredRow td.rgSorted
{

}

.RadGrid_GridBannered .rgSelectedRow td,
.RadGrid_GridBannered .rgSelectedRow td.rgSorted
{

}

/*footer*/

.RadGrid_GridBannered .rgFooterDiv,
.RadGrid_GridBannered .rgFooter
{
    background:#ffffff;
}

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

/*status*/

.RadGrid_GridBannered .rgPager .rgStatus
{
    width:35px;
    border:1px solid;
    border-color:#828282 #c9c9c9 #eee #c9c9c9;
    border-left:0;
    padding:3px 0 2px;
}

.RadGrid_GridBannered .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_GridBannered .rgPager
{
    background:#eee;
}

.RadGrid_GridBannered .rgPager td
{
    padding:0;
}

.RadGrid_GridBannered .rgPager .rgPagerCell
{
    border:1px solid;
    border-color:#828282 #eee #eee;
    border-right:0;
    padding:5px 0 4px;
}

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

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

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

.RadGrid_GridBannered .rgInfoPart
{
    float:rightright;
    color:#8a8a8a;
}

.RadGrid_GridBannered .rgInfoPart strong
{
    font-weight:normal;
    color:#4c4e54;
}

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

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

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

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

.RadGrid_GridBannered .rgPagerButton
{
    height:22px;
    border:1px solid;
    border-color:#d0d0d0 #aeaeae #8b8b8b;
    margin:0 14px 0 0;
    padding:0 4px 2px;
    background:#e8e8e8 repeat-x 0 -1550px url('Grid/sprite.gif');
    color:#000;
    font:12px/12px "segoe ui",arial,sans-serif;
    vertical-align:middle;
    cursor:pointer;
}

.RadGrid_GridBannered .rgNumPart
{
    padding:0;
}

.RadGrid_GridBannered .NumericPages .rgNumPart
{
    padding:0 10px;
}

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

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

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

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

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

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

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

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

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

.RadGrid_GridBannered .rgPagerLabel,
.RadGrid_GridBannered .rgPager .RadComboBox,
.RadGrid_GridBannered .rgPager .RadInput_GridBannered
{
    margin:0 4px 0 0;
    vertical-align:middle;
}

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

.RadGrid_GridBannered .rgPagerTextBox
{
    text-align:center;
}

/*sorting, reordering*/

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

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

.GridReorderTop_GridBannered,
.GridReorderBottom_GridBannered
{
    width:9px !important;
    height:9px !important;
    margin-left:-5px;
}

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

/*filtering*/

.RadGrid_GridBannered .rgFilterRow
{
    background:#ffffff;
}

.RadGrid_GridBannered .rgFilterRow td
{
    border-bottom:1px solid #828282;
    padding-top:4px;
    padding-bottom:7px;
}

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

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

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

.RadGrid_GridBannered .rgFilterBox
{
    border:1px solid;
    border-color:#8e8e8e #c9c9c9 #c9c9c9 #8e8e8e;
    padding:2px 1px 3px;
    font:12px arial,sans-serif;
    color:#333;
    vertical-align:middle;
}

/*grouping*/

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

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

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

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

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

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

.RadGrid_GridBannered .rgGroupItem
{
    border:1px solid;
    border-color:#c4c4c4 #c4c4c4 #9e9e9e;
    padding:0 2px 1px 3px;
    background-color:#ffffff;
    line-height:20px;
    font-weight:normal;
    vertical-align:middle;
}

.RadGrid_GridBannered .rgMasterTable td.rgGroupCol,
.RadGrid_GridBannered .rgMasterTable td.rgExpandCol
{

}

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

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

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

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

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

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

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

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

/*editing*/

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

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

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

/*hierarchy*/

.RadGrid_GridBannered .rgDetailTable
{
    border:1px solid #828282;
    border-right:0;
}

/*command row*/

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

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

.RadGrid_GridBannered tfoot .rgCommandCell
{
    border-top:1px solid;
    border-bottom:0;
}

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

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

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

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

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

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

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

/*multirow select*/

.GridRowSelector_GridBannered
{
    background:#4c4e54;
}

/*row drag n drop*/

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

/*tooltip*/

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

/*rtl*/

.RadGridRTL_GridBannered .rgHeader,
.RadGridRTL_GridBannered .rgResizeCol
{
    text-align:rightright;
}

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

.RadGridRTL_GridBannered .rgWrap
{
    float:rightright;
}

.RadGridRTL_GridBannered .rgInfoPart
{
    float:left;
}

.RadGridRTL_GridBannered .rgNumPart
{
    width:220px;
}

.RadGridRTL_GridBannered .rgNumPart a
{
    float:rightright;
}

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

[Dimo]

Hello Joe,

The PageSize dropdown is a RadComboBox. Please create and register a custom GridBannered skin for it as well.

Greetings,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Joe]

Hi Dimo,

I've done that and the skin is working for a combo box control but not for the one inside the grid!
Here's what I'm doing, please tell me where I've gone wrong:

    Protected Sub grdSearch_ItemDataBound(ByVal sender As Object, ByVal e As GridItemEventArgs)
        If TypeOf e.Item Is GridPagerItem Then
            Dim PageSizeCombo As RadComboBox = DirectCast(e.Item.FindControl("PageSizeComboBox"), RadComboBox)

            PageSizeCombo.EnableEmbeddedSkins = False
            PageSizeCombo.Skin = "Bannered"

            PageSizeCombo.Items.Clear()
            PageSizeCombo.Items.Add(New RadComboBoxItem("10"))
            PageSizeCombo.FindItemByText("10").Attributes.Add("ownerTableViewId", grdSearch.MasterTableView.ClientID)
            PageSizeCombo.Items.Add(New RadComboBoxItem("50"))
            PageSizeCombo.FindItemByText("50").Attributes.Add("ownerTableViewId", grdSearch.MasterTableView.ClientID)
            PageSizeCombo.Items.Add(New RadComboBoxItem("100"))
            PageSizeCombo.FindItemByText("100").Attributes.Add("ownerTableViewId", grdSearch.MasterTableView.ClientID)
            PageSizeCombo.Items.Add(New RadComboBoxItem("500"))
            PageSizeCombo.FindItemByText("500").Attributes.Add("ownerTableViewId", grdSearch.MasterTableView.ClientID)
            PageSizeCombo.Items.Add(New RadComboBoxItem("1000"))
            PageSizeCombo.FindItemByText("1000").Attributes.Add("ownerTableViewId", grdSearch.MasterTableView.ClientID)
            PageSizeCombo.FindItemByText(e.Item.OwnerTableView.PageSize.ToString()).Selected = True

        End If
    End Sub

[Dimo]

Hi Joe,

The RadComboBox skin name must match the RadGrid skin name - GridBannered.

All the best,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.