This is a migrated thread and some comments may be shown as answers.

grid Skin Header Problems.....

1 Answer 81 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Mohammed Alhanooti asked on 08 Apr 2010, 07:23 AM

gridheader.jpg

i have a problem with the child grid header it is not taking the master grid header Css
this is the custom Css that i am using.

/*global*/

.RadGrid_BsSkin
{
    border:1px;
    background:#dfe7ea;
    color:#333;
}
/*
.RadGridRTL_BsSkin .rgHeader:first-child
{
   background-image:url(Grid/blue_right.jpg);
   background-repeat:no-repeat;
   background-color:transparent;
   float:right;
   height:16px;
   border:0;
   margin:0;
   padding:0;
}
*/
/*here is the left corner class */
.RadGrid_BsSkin .rgHeader:first-child
{
   background-image:url(Grid/blue_left.jpg);
   background-repeat:no-repeat;
   background-color:transparent;
   padding:1px;
   height:44px;
   width:32px;
   border:0;
   margin:0;

}
.RadGrid_BsSkin .rgHeader:last-child
{
   background-image:url(Grid/blue_right.jpg);
   background-repeat:no-repeat;
   background-color:transparent;
   float:right;
   padding:1px;
   height:44px;
   width:30px;
   border:0;
   margin:0;

}

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

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

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

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

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

.RadGrid_BsSkin .rgClipCells .rgHeader,
.RadGrid_BsSkin .rgClipCells .rgFilterRow>td,
.RadGrid_BsSkin .rgClipCells .rgRow>td,
.RadGrid_BsSkin .rgClipCells .rgAltRow>td,
.RadGrid_BsSkin .rgClipCells .rgEditRow>td,
.RadGrid_BsSkin .rgClipCells .rgFooter>td
{
   overflow:hidden;
}

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

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

/*header*/

.RadGrid_BsSkin .rgHeaderDiv
{
   background-image:url(Grid/header_bg.jpg);
   background-repeat:repeat-x;
   height:44px;
}
.rgTwoLines .rgHeaderDiv
{
   background-position:0 -7250px;
}

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

.RadGrid_BsSkin .rgHeader,
.RadGrid_BsSkin th.rgResizeCol
{


   text-align:left;
   font-weight:normal;
}

.RadGrid_BsSkin th.rgSorted
{
   border-bottom-color:#79b3d8;
   background-color:#d9ecf6;
   background-position:0 -2600px;
}

.RadGrid_BsSkin .rgHeader,
.RadGrid_BsSkin .rgHeader a
{
    color:#333;
    text-decoration:none;
}

.RadGrid_BsSkin .rgCheck
{
   height:15px;
   margin-top:0;
   margin-bottom:0;
   padding:0;
   cursor:default;
}

/*rows*/

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

.RadGrid_BsSkin .rgRow td
{
   border-color:#dfe7ea #dfe7ea #dfe7ea #dfe7ea;
}
.RadGrid_BsSkin .rgAltRow td
{
   border-color:#D8E3E7 #D8E3E7 #D8E3E7 #D8E3E7;
   background-color:#D8E3E7;
}

.RadGrid_BsSkin .rgRow .rgSorted,
.RadGrid_BsSkin .rgAltRow .rgSorted
{
   background-color:#f2f3f5;
}

.RadGrid_BsSkin .rgSelectedRow .rgSorted,
.RadGrid_BsSkin .rgActiveRow .rgSorted,
.RadGrid_BsSkin .rgHoveredRow .rgSorted,
.RadGrid_BsSkin .rgEditRow .rgSorted
{
   background-color:#C9DEEC;
}

.RadGrid_BsSkin .rgRow a,
.RadGrid_BsSkin .rgAltRow a,
.RadGrid_BsSkin .rgEditRow a,
.RadGrid_BsSkin .rgFooter a,
.RadGrid_BsSkin .rgEditForm a
{
   color:#06c;
}

.RadGrid_BsSkin .rgSelectedRow
{
    background:#C9DEEC;
}
*+html .RadGrid_BsSkin .rgSelectedRow .rgSorted{background-color:#abdbf5}
* html .RadGrid_BsSkin .rgSelectedRow .rgSorted{background-color:#abdbf5}

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

.RadGrid_BsSkin .rgEditRow
{
   background:#C9DEEC 0 -4900px repeat-x url('Grid/sprite.gif');
}
*+html .RadGrid_BsSkin .rgEditRow .rgSorted{background-color:#96cfee}
* html .RadGrid_BsSkin .rgEditRow .rgSorted{background-color:#96cfee}

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

.RadGrid_BsSkin .rgSelectedRow td
{
   border-bottom-color:#C9DEEC;
}

.RadGrid_BsSkin .rgActiveRow td,

.RadGrid_BsSkin .rgHoveredRow td
{
background-color:#C9DEEC;
}

.RadGrid_BsSkin .rgEditRow td
{
   border-bottom-color:#96cfee;
}

/*footer*/

.RadGrid_BsSkin .rgFooterDiv,
.RadGrid_BsSkin .rgFooter
{
   background:#e0e5f5;
}

.RadGrid_BsSkin .rgFooter td
{
   border-top-width:1px;
   border-color:#aec5d1 #e0e5f5 #fff #e0e5f5;
}

/*status*/

.RadGrid_BsSkin .rgPager .rgStatus
{
   width:35px;
   border:1px solid;
   border-color:#aec5d1 #9cb6c5 #fff #9cb6c5;
   border-left:0;
   padding:3px 0 2px;
}

.RadGrid_BsSkin .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_BsSkin .rgPager
{
   background:#eff7fc;
}

.RadGrid_BsSkin .rgPager td
{
   padding:0;
}

.RadGrid_BsSkin .rgPager .rgPagerCell
{
   border:1px solid;
   border-color:#aec5d1 #fff #fff;
   border-right:0;
   padding:5px 0 4px;
}

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

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

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

.RadGrid_BsSkin .rgInfoPart
{
   float:right;
   color:#8a8a8a;
}

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

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

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

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

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

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

.RadGrid_BsSkin .rgNumPart
{
   padding:0;
}

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

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

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

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

.RadGrid_BsSkin .rgNumPart a:hover
{
   background-position:100% -1250px;
   color:#06c;
}

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

.RadGrid_BsSkin .rgNumPart a.rgCurrentPage,
.RadGrid_BsSkin .rgNumPart a.rgCurrentPage:hover
{
   background-position:100% -1450px;
   color:#000;
   cursor:default;
}

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

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

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

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

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

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

/*sorting, reordering*/

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

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

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

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

/*filtering*/

.RadGrid_BsSkin .rgFilterRow
{
   background:#ebeef6;
}

.RadGrid_BsSkin .rgFilterRow td
{
    padding-top:5px;
    padding-bottom:6px;
    border-left:1px solid #ededed;
    border-right:1px solid #fff;
}

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

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

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

.RadGrid_BsSkin .rgFilterBox
{
   border:1px solid;
   border-color:#abadb3 #dbdfe6 #e3e9ef #e2e3ea;
   padding:2px 1px 3px;
   font:12px "segoe ui",arial,sans-serif;
   color:#333;
   vertical-align:middle;
}

/*grouping*/

.RadGrid_BsSkin .rgGroupPanel
{
   border:1px solid;
   border-color:#eaedf6 #f2f5fa #9cb6c5;
   background:#e6ebf5 0 -1900px repeat-x url('Grid/sprite.gif');
}

.RadGrid_BsSkin .rgGroupPanel td
{
   border:0;
   border-bottom:1px solid #f2f5fa;
   padding:0;
}

.RadGrid_BsSkin .rgGroupPanel td td
{
   border:0;
   padding:2px 3px 1px;
}

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

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

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

.RadGrid_BsSkin .rgUngroup
{
   background-position:0 -7200px;
}

.RadGrid_BsSkin .rgGroupItem
{
   border:1px solid;
   border-color:#8a929e #9298a1 #9298a1;
   padding:0 2px 1px 3px;
   background:#e6ebf5 0 -7000px repeat-x url('Grid/sprite.gif');
   line-height:20px;
   font-weight:normal;
   vertical-align:middle;
}

.RadGrid_BsSkin .rgGroupHeader
{
    background:0 -6489px repeat-x url('Grid/sprite.gif');
    font-size:1.1em;
    line-height:21px;
   color:#039;
}

.RadGrid_BsSkin .rgGroupHeader td
{
    padding:0 8px;
}

.RadGrid_BsSkin .rgGroupHeader .rgGroupCol
{
   background:#fff none;
}

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

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

.RadGrid_BsSkin .rgGroupHeader .rgExpand,
.RadGrid_BsSkin .rgGroupHeader .rgCollapse
{
   background-color:#fff;
}

.RadGrid_BsSkin .rgGroupHeader td p
{
    display:inline;
    margin:0;
    padding:0 10px;
    background:#fff;
}

.RadGrid_BsSkin .rgGroupHeader td div div
{
   top:-0.8em;
   padding:0 10px;
   background:#fff;
}

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

/*editing*/

.RadGrid_BsSkin .rgEditForm
{
   border-bottom:1px solid #ededed;
}

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

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

/*hierarchy*/

.RadGrid_BsSkin .rgDetailTable
{
   border:1px solid #ededed;
   border-right-width:0;
}

/*command row*/

.RadGrid_BsSkin .rgCommandRow
{
   background:#4e96aa 0 -2099px repeat-x url('Grid/sprite.gif');
   color:#fff;
}

.RadGrid_BsSkin .rgCommandCell
{
   border:1px solid;
   border-color:#000 #75a4b7 #000;
   padding:0;
}

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

.RadGrid_BsSkin .rgCommandTable
{
   border:0;
   border-top:1px solid #b2ccd8;
   border-bottom:1px solid #95c3ce;
}

.RadGrid_BsSkin .rgCommandRow a
{
   color:#fff;
   text-decoration:none;
}

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

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

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

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

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

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

/*multirow select*/

.GridRowSelector_BsSkin
{
   background:#039;
}

/*row drag n drop*/

.GridItemDropIndicator_BsSkin
{
    border-top:1px dashed #039;
}

/*tooltip*/

.GridToolTip_BsSkin
{
   border:1px solid #767676;
   padding:3px;
   background:#e4e5f0;
   color:#000;
}

/*rtl*/

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

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

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

.RadGridRTL_BsSkin .rgWrap
{
   float:right;
}

.RadGridRTL_BsSkin .rgInfoPart
{
   float:left;
}

.RadGridRTL_BsSkin .rgNumPart
{
   width:220px;
}

.RadGridRTL_BsSkin .rgNumPart a
{
   float:right;
}

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

.RadGridRTL_BsSkin .rgDetailTable
{
   border-right-width:1px;
   border-left-width:0;
}
just can you help me fix the problem i have attached an image that shows the problem

1 Answer, 1 is accepted

answered on 08 Apr 2010, 09:42 AM

Hello Mohammed,

I see two problems in your custom skin:

1. floating of table cells - this causes unexpected results and I don't recommend doing it.

.RadGrid_BsSkin .rgHeader:last-child
{
    background-image:url(Grid/blue_right.jpg);
    background-repeat:no-repeat;
    background-color:transparent;
    float:right;
    padding:1px;
    height:44px;
    width:30px;
    border:0;
    margin:0;
}

2. HeaderDiv background and height

I am not sure about this, because I don't have your images, but it seems to me that you are using the HeaderDiv element to set the background, which is seen between the first header cell and the last header cell. This is not good, because the HeaderDiv does not exist for detail tables. You should set the background to the header cells - the rgHeader CSS class.

In addition, the header div does not need height. In general, we do not recommend setting cell widths and heights in the skin.

.RadGrid_BsSkin .rgHeaderDiv
{
    background-image:url(Grid/header_bg.jpg);
    background-repeat:repeat-x;
    height:44px;
}

Kind regards,
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.