If you applied some of the predefined skins for the control (for example the Default skin),
you can easily model the look and feel for the grid's header/footer/pager items through the
th.GridHeader_[SkinName], GridFooter_[SkinsName] and
GridPager_[SkinName]
classes (residing in the
RadControls/Grid/Skins/[SkinsName]/Styles.css file).
Below we present their structure for the Default grid skin:
th.GridHeader_Default,
th.ResizeHeader_Default
{
font: bold 10px Verdana, Arial, Sans-serif;
background: white url('Img/GridHeaderBg.gif') repeat-x bottom;
border-top: solid 1px #e5e5e5;
border-bottom: solid 1px #bbb;
padding-left: 6px; /*more than items to compensate for item borders!*/
height: 22px;
/*add more definitions if needed*/
}
.GridPager_Default td
{
background: white;
border: solid 1px white;
border-top: 1px solid #c7c7c7;
height: 21px;
color: #999;
padding-left: 4px;
/*add more definitions if needed*/
}
.GridFooter_Default td
{
background: #fbfbfb;
border: solid 1px #fbfbfb;
border-top: 1px solid #e8e6e6;
height: 21px;
color: #666;
padding-left: 4px;
/*add more definitions if needed*/
}
Additional details about how to modify the existing grid skins you can find in this article
from the product online documentation:
Modify existing skins
Moreover, the appearance of the Header, Footer and Pager in Telerik RadGrid can be
fully customized using the respective properties of the component -
HeaderStyle,
FooterStyle and
PagerStyle (when no skin is applied).
In the paragraph below you will find a code snippets fetched from the ASPX of the page
and the Styles.css file (placed in the
NET2\Grid\Examples\Styles\HeaderFooterPagerStyles subfolder of the grid installation
folder:
<PagerStyle
CssClass="RadGridPager" Mode="NumericPages"></PagerStyle>
<HeaderStyle
CssClass="RadGridHeader"></HeaderStyle>
<FooterStyle
CssClass="FooterStyle"></FooterStyle>
Styles.css
.RadGridHeader
{
height: 59px;
padding: 0px;
color: #819598;
font-weight: bold;
font-size: 16px;
padding-left: 4px;
}
.RadGridHeader A, .RadGridHeader SPAN
{
padding-top: 14px;
display: block;
text-decoration: none;
font-weight: bold;
}
.RadGridHeader A:hover
{
text-decoration: underline;
}
.FooterStyle
{
height: 6px;
line-height: 4px;
font-size: 0px;
}
.FooterStyle TD
{
border-left: 7px solid #d2b6c1;
border-right: 7px solid #d2b6c1;
}
.RadGridPager
{
background-image: url(img/footer.gif);
background-repeat: repeat-x;
height: 51px;
padding-left: 11px;
background-color: white;
vertical-align: bottom;
color: #b79ea9;
font-weight: bold;
}
.RadGridPager A
{
color: #b79ea9;
}