This help article discusses using skins in RadGrid. You can see examples of the built-in skins, you can learn how to create custom skins, plus you'll see major properties you'll use to customize skins as well as a list of required names for skin images you must use for custom skins.
By default, all controls in the Telerik UI for ASP.NET suite have a polished look and feel, which is consistent across the whole product line.
All resources (scripts, skins, etc.) are implemented as Embedded WebResources in ASP.NET 3.5-4.8 for a very easy and convenient deployment. The only thing you need to do is drag RadGrid from your toolbox onto your web page (no external files will be required) and RadGrid will use its default skin.
Generally, you can change the existing grid skins by setting the Skin property to the name of the skin. See the sections below for more info.
The image below shows a thumbnail view of the embedded skins provided by Telerik. They are embedded in the Telerik.Web.UI.dll assembly as web resources.To use a built-in skin, the user only needs to set the Skin property of the control. Built-in skins are also provided in "C:\Program Files\Progress\UI for ASP.NET AJAX RX YYYY\Skins".
The Material skin is available for the Lightweight RenderMode only. If you experience visual issues with it, make sure your controls are not using the default Classic mode.
Except setting the Skin property to one of the built-in skins you can use it in the following ways:
If a skin is not explicitly defined, the Default skin from the embedded web resources will be used.
You can use a predefined skin or your own skin. When following the second approach you need to set EnableEmbeddedSkins=false and define Skin property value (see the next paragraph for more details).
A developer can create custom skins to use in RadGrid. They are not embedded so the control cannot register them automatically. If you use a custom skin you need to set the Skin property, and the EnableEmbeddedSkins property of the control to false. If you do not do so, the following exception will be thrown saying that there is no embedded skin matching the Skin property:
Telerik.Web.UI.RadGrid with ID='RadGrid1' was unable to find embedded skin with name 'MySkin'. Please, make sure that you spelled the skin name correctly, or if you want to use a custom skin, set EnableEmbeddedSkins=false.
You can learn how to apply the new custom skin at Skin Registration.
For more information please check the Custom Skin demo.
The skins created in the Telerik Theme Builder can be imported via its interface and modified as many times as you wish - see Importing a Theme. You can see how to modify an existing skin at Modifying Built-in Skins.
You can customize the appearance of the RadGrid control by setting the style properties for the different parts of the control. Table 1 lists the different style properties.
|AlternatingItemStyle||Specifies the style for alternating items in the RadGrid control.|
|EditItemStyle||Specifies the style for the item being edited in the RadGrid control.|
|FooterStyle||Specifies the style for the footer section in the RadGrid control.|
|HeaderStyle||Specifies the style for the header section in the RadGrid control.|
|ItemStyle||Specifies the style for the items in the RadGrid control.|
|PagerStyle||Specifies the style for the page selection section of the RadGrid control.|
|SelectedItemStyle||Specifies the style for the selected item in the RadGrid control.|
|GroupHeaderItemStyle||Specifies the style for the group header in the RadGrid control.|