RadGrid for ASP.NET AJAX
Contents
RadControls for ASP.NET AJAX

A skin is a set of images and a CSS file used by Telerik RadGrid for setting its appearance. Review this section from the documentation to understand how to apply non-embedded/custom skins for the control.

The Photoshop PSD files used for each of the embedded grid skins are available at this location on telerik.com

CSS Classes Description

Each CSS class should have a suffix with the name of the skin, e.g. "_Vista" before the Q1 2009 release of the product. The table below shows the classes used by the embedded Telerik RadGrid Default skin (the non-embedded skins css classes signature conforms to the same concepts):

Prior to the Q1 2009 release of RadGrid for ASP.NET AJAX

 
CSS ClassDescription
div.RadGrid_Default The default Telerik RadGrid wrapper <div>. All Telerik RadGrid elements are placed inside it. Rendering Telerik RadGrid in one tag helps further integrations with other controls (Telerik RadAjax and ASP.NET AJAX for example).
.RadGrid_Default,.RadGrid_Default aA reference to any table cell (<td>) and link (<a>) inside the main class. Using these two classes you can skin the grid cells and links in Telerik RadGrid cells.
.MasterTable_DefaultA class for customizing the master table view
.MasterTable_Default td,.MasterTable_Default thReferences to any table <td> and table header <th> belonging to that master table
.GridDataDiv_DefaultFor skinning the grid in scrolling mode.
th.GridHeader_Default,th.ResizeHeader_DefaultHeader class <th> for customizing the Telerik RadGrid header.
.GridHeaderOver_Default.GridHeader_Default a.GridHeaderDiv_DefaultFor skinning the hovered header item.<a> element belonging to the header classFor skinning the header row when scrolling the grid.

.GridRow_Default,.GridRow_Default td

.GridRowOver_Default

For skinning the normal grid row.

For skinning the hovered grid row.

.GridAltRow_Default,.GridAltRow_Default tdFor skinning the alternate grid row (zebra style tables).
.SelectedRow_Default,.SelectedRow_DefaulttdSkinning the currently selected row.
.ActiveRow_Default,.ActiveRow_Default tdActive row class - the focused row skinning
.GridEditRow_Default,.GridEditRow_Default tdFor skinning the row that is currently in edit mode.
.GridEditForm_DefaultFor skinning the edit form of the row that is currently in edit mode.
.GridCommandRow_DefaultFor skinning the CommandItem.
.GridGroupFooter_Default,.GridGroupFooter_Default td For skinning the group footers (meaning with grouping feature enabled).Defaults to the GroupFooter_[Skin]/GroupFooter_[Skin] td classes.
.GridFilterRow_DefaultFor skinning the FilteringItem.
.GridPager_Default,.GridPager_DefaulttdSkinning the grid pager
.GridFooter_Default,.GridFooter_Default td.GridFooterDiv_DefaultA reference to the grid footer.For skinning the grid footer when scrolling the grid.
.GridFooter_Default aReference to any link <a> belonging to the footer.
.GridPager_Default aReference to any link <a> belonging to the pager.
.GridPager_Default a:hover,.GridFooter_Default a:hoverReference to any hovered link <a> in the pager or footer.
tr.GroupHeader_Default tdFor skinning the group panel row (grouping must be enabled).
.GroupPanel_DefaultFor skinning the group panel (grouping must be enabled).
.GroupPanelItems_DefaultReference to items belonging to the group panel (grouping must be enabled).
td.GridHeader_Default inputReference to the <input> element belonging to the grid header (grouping must be enabled)
.GridCaption_DefaultReference to the table caption in each level of the grid hierarchy
.GridToolTip_Default

For customizing the scroller when the virtual scrolling feature is enabled (<Scrolling AllowScroll="True" EnableVirtualScrollPaging="True" UseStaticHeaders="True" />). Applicable for the column resizer tooltip as well

.GridRowSelector_Default

For styling the colored rectangle when selecting multiple rows by dragging.

.GridItemDropIndicator_Default

Defines the drop indicator appearance when utilizing drag and drop of grid records.

After the Q1 2009 release of RadGrid for ASP.NET AJAX(note that the [SkinName] part is missing from the css classes names except for external grid elements)

 
CSS ClassDescription
div.RadGrid_[SkinName] The default Telerik RadGrid wrapper <div>. All Telerik RadGrid elements are placed inside it. Rendering Telerik RadGrid in one tag helps further integrations with other controls (Telerik RadAjax and ASP.NET AJAX for example).

.RadGrid_[SkinName],.RadGridRTL_[SkinName],.RadGrid_[SkinName] a

A reference to any table cell (<td>) and link (<a>) inside the main class. Using these two classes you can skin the grid cells and links in Telerik RadGrid cells.
.rgMasterTableA class for customizing the master table view
.rgClipCellsAn additional class applied to the master table view when its table layout is fixed.
.rgMasterTable td,.rgMasterTable thReferences to any table <td> and table header <th> belonging to that master table
.rgDataDivFor skinning the grid in scrolling mode.
th.rgHeader,th.rgResizeColHeader class <th> for customizing the Telerik RadGrid header.
.rgHeaderOver.rgHeaderDiv a.rgHeaderDivFor skinning the hovered header item.<a> element belonging to the header classFor skinning the header row when scrolling the grid.

.rgRow,.rgRow td

.rgHoveredRow

For skinning the normal grid row.

For skinning the hovered grid row.

.rgAltRow,.rgAltRow tdFor skinning the alternate grid row (zebra style tables).
.rgSelectedRow,.rgSelectedRowtdSkinning the currently selected row.
.rgActiveRow,.rgActiveRow tdActive row class - the focused row skinning
.rgEditRow,.rgEditRow tdFor skinning the row that is currently in edit mode.
.rgEditFormFor skinning the edit form of the row that is currently in edit mode.
.rgCommandRowFor skinning the CommandItem.
.rgFooter,.rgFooter td For skinning the group footers (meaning with grouping feature enabled).Defaults to the GroupFooter_[Skin]/GroupFooter_[Skin] td classes.
.rgFilterRowFor skinning the FilteringItem.
.rgPager,.rgPagertdSkinning the grid pager
.rgFooter,.rgFooter td.rgFooterDivA reference to the grid footer.For skinning the grid footer when scrolling the grid.
.rgFooter aReference to any link <a> belonging to the footer.
.rgPager aReference to any link <a> belonging to the pager.
.rgPager a:hover,.rgFooter a:hoverReference to any hovered link <a> in the pager or footer.
tr.rgGroupHeader tdFor skinning the group panel row (grouping must be enabled).
.rgGroupPanelFor skinning the group panel (grouping must be enabled).
.rgGroupItemReference to items belonging to the group panel (grouping must be enabled).
td.rgHeader inputReference to the <input> element belonging to the grid header (grouping must be enabled)
.rgCaptionReference to the table caption in each level of the grid hierarchy
.GridToolTip_[SkinName]

For customizing the scroller when the virtual scrolling feature is enabled (<Scrolling AllowScroll="True" EnableVirtualScrollPaging="True" UseStaticHeaders="True" />). Applicable for the column resizer tooltip as well

.GridRowSelector_[SkinName]

For styling the colored rectangle when selecting multiple rows by dragging.

.GridItemDropIndicator_[SkinName]

Defines the drop indicator appearance when utilizing drag and drop of grid records.

.rgDetailTableA class for customizing the detail tables in hierarchical grid
.GridReorderTop_[SkinName]A class to customize the embedded top image indicator when reordering grid columns
.GridReorderBottom_[SkinName]A class to customize the embedded bottom image indicator when reordering grid columns
.GridReorderTopImage_[SkinName]A class to customize the top image indicator when reordering grid columns and the embedded skins are disabled for the grid
.GridReorderBottomImage_[SkinName]A class to customize the bottom image indicator when reordering grid columns and the embedded skins are disabled for the grid
.rgVScrollA class to customize the appearance of the RadGrid virtual scroll
.rgNoRecordsA class to customize the visual appearance of the NoRecords template/text
.GridDraggedRows_[SkinName]A class applied to the <div> element, which wraps the dragged rows. The same <div> element also has the "RadGrid" and "RadGrid_SkiName" classes.
Note

To apply the old embedded skins of RadGrid for ASP.NET AJAX as external with versions of the grid after Q1 2009 (2009.1.311), download them from this location and follow the steps concerning how to register an external skin from this and this topic.

Since RadGrid for ASP.NET AJAX uses internally RadContextMenu as a filtering menu, the styling of the filtering menu can be attained by accessing the RadContextMenu instance and utilizing its appearance mechanism.

To summarize, in order to modify an existing RadGrid skin, either take advantage of the css selectors "weight" as depicted in the following blog post or:

1. Set the Skin property of the RadGrid to an existing skin name

2. Set the RadGrid property EnableEmbeddedSkins="False"

3. Manually create a link to the CSS on the page (or MasterPage) for both the RadGrid and RadMenu, for example:

CopyASPX
<link href="~/Skins/Telerik/Grid.Telerik.css" rel="stylesheet" type="text/css" runat="server" />
<link href="~/Skins/Telerik/Menu.Telerik.css" rel="stylesheet" type="text/css" runat="server" />

Additionally, for skins which have different styling for normal/alternating rows, you can disable the zebra effect by setting the ClientSettings -> EnableAlternatingItems property of the grid to false.

Telerik RadGrid HTML Structure

The following table shows how the grid generates its HTML structure:

 
CopyXML
  <pre xmlns="http://ddue.schemas.microsoft.com/authoring/2003/5">
<div class="RadGrid_WebBlue">
    <div>
      < input type="hidden" />
    </div>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <span id="RadGrid1StyleSheetHolder"></span>
    <script type="text/javascript">
      // generated script block goes here
    </script>
    <table class="rgMasterTable">
      <colgroup>
        <col />
        <col />
        <col />
        <col />
        <col />
      </colgroup>
</pre>
Telerik RadGrid and MasterTableView definition.

CopyXML
  <pre xmlns="http://ddue.schemas.microsoft.com/authoring/2003/5">
<thead>
    <tr>
      <th class="rgResizeCol">
      </th>
      <th class="rgHeader">
        <a href="">Table Header 1</a>
      </th>
      <th class="rgHeader">
        <a href="">Table Header 2</a>
      </th>
      <th class="rgHeader">
        <a href="">Table Header 3</a>
      </th>
      <th class="rgHeader">
        <a href="">Table Header 4</a>
      </th>
      <th class="rgHeader">
        <a href="">Table Header 5</a>
      </th>
      <th class="rgHeader">
        <a href="">Table Header 6</a>
      </th>
    </tr>
  </thead>
</pre>

CopyXML
  <pre xmlns="http://ddue.schemas.microsoft.com/authoring/2003/5">       
<tfoot>
    <tr class="rgPager">
      <td colspan="7">
        <span></span><a href=""></a>
      </td>
    </tr>
  </tfoot>
</pre>
Pager
CopyXML
  <pre xmlns="http://ddue.schemas.microsoft.com/authoring/2003/5">
<tbody>
    <tr class="rgRow">
      <td>
        Item
      </td>
      <td>
        Item
      </td>
      <td>
        Item
      </td>
    </tr>
    <tr class="rgAltRow">
      <td>
        Item
      </td>
      <td>
        Item
      </td>
      <td>
        Item
      </td>
    </tr>
    <tr class="rgHoveredRow">
      <td>
        Item
      </td>
      <td>
        Item
      </td>
      <td>
        Item
      </td>
    </tr>
  </tbody>
    </table>
    <script type="text/javascript">
      // generated script block goes here
    </script>
</div>
</pre>

Creating a custom skin (basic steps)

The easiest way to create your own skin for RadGrid (as discussed previously in this article) is to copy one of our existing skins and modify its existing CSS settings.You can do this in five steps:

  • Copy one of our existing skins (CSS and images). For example the Vista skin.
  • Modify the corresponding css classes definitions in the CSS file.
  • Change the urls for the images referenced in the CSS file.
  • Register your CSS file in the HEAD section of your page.
  • Set Skin="<MyCustomSkinName>" and EnableEmbeddedSkins="false" for RadGrid.
    Note

    Important: RadGrid may create other RadControls as part of its elements (slider pager, filtering menu, date pickers in GridDateTimeColumns, etc.) and you will need to perform the same steps for these controls as well!

Review the following online demo of the product (the ASPX and CSS definitions mainly) for more details on the aforementioned approach to create a custom skin for RadGrid. You may also consider utilizing the Visual Style Builder for ASP.NET tool to modify existing skins/create new custom skins.