RadGrid for ASP.NET

By default all controls in Telerik RadControls for ASP.NET suite take a new polished look and feel which is consistent across the whole product line. Five other new common skins (Outlook, Mac, Inox, Telerik and WebBlue) have been added to all Telerik RadControls for ASP.NET for a richer set of interface designs to choose from.

All resources (scripts, the default skin, etc) are implemented as Embedded WebResources in ASP.NET 2.0 for a very easy and convenient deployment. The only thing you now need to do is drag Telerik RadGrid from your toolbox onto your web page (no external files will be required) and Telerik RadGrid will use its default skin.

Take into account that the images for the Default skin will be referenced through the embedded web resources by default unless you specify the value for the Skin property of the grid explicitly. Therefore, when the default skin is used without specifying explicitly Skin="Default", its images will be fetched from the WebResource.axd instead of RadControls/Grid/Skins/Default.

Please, note that if you want to use the old skins of any product you can still find them in RadControls/Grid/Skins. You will only need to copy the corresponding folder to your application's RadControls/Grid/Skins folder. A preview of all the provided skins is available in our Live Examples.

You can change the existing grid skins by setting the Skin property to the name of the skin. The name of the skin is the name of the sub-folder in RadControls/Grid/Skins where the images and CSS file are located ("Grey" for example).

The possible values for the Skin property are described below:

• If you don't set the Skin property, the Default skin (RadControls/Grid/Skins/Default) will be used.
• If you have a grid that is already customized and you want to keep all your settings, you should set Skin property to "None" (Skin="None").
  In case you haven't defined any appearance options (styles), you will have a bare (not skinned) grid. Note, however, that in this case you will still have the default grid images (shown below).
• You can use one of the predefined or your own skin. In this case you need to set the skin name.
  

Below is a set of some of the Telerik RadGrid skins:

Customizing and creating new skins

The fastest way to get started with your own custom skin is by modifying an existing skin. From http://www.telerik.com/skins, you can download all resources necessary to deploy or modify selected skins for the Telerik components. Each skin archive contains the images, CSS, and ASPX declaration needed to apply a skin in your project, as well as the original Adobe Photoshop PSD source file you will need to modify the design. For more instructions, please refer to the Readme file in the skin archive.

Once you have built the Telerik RadGrid you need to set its appearance. If you don't do this, the default look & feel will be used.

The look-and-feel of the component can be defined using a combination of styles.css file and a set images. The images and the CSS file are located in individual sub-folders of the folder:

"~/RadControls/Grid/Skins"

Instead of setting properties for each GridTableView, you can use RadGrid global properties for: PageSize, AllowSorting, AllowPaging, AllowCustomPaging, ShowFooter, ShowHeader, BackColor, BorderColor, PagerStyle. Thus they will be set for each table in the hierarchy, unless specified otherwise.

Properties (applicable when not using predefined skin)

The appearance of the Telerik RadGrid control may be customized by setting the style properties for the different parts of the control. The following table lists the different style properties.  

Images

The skin's images have to be named as follows:

© 2002-2008 Telerik. All Rights Reserved.