Using ASP.NET Themes for setting RadControls properties

HOW-TO

Use ASP.NET Themes for setting Telerik UI for ASP.NET AJAX controls properties

SOLUTION

The attached demo here shows how you can set different controls' properties using the ASP.NET Themes mechanism. This approach is useful in scenarios where you want to show RadControls using Ajax request but you find that your page updates very slowly due to complicated layout. There is a property called EnableAjaxSkinRendering (set to true by default) that handles such scenarios automatically, however if you want to this manually, here is how to do this:

As you can see in the Default.aspx file, we have a basic web form with three controls (initially hidden). The controls become visible after an AJAX request. Note that EnableAjaxSkinRendering is not used on the page. The only thing you should note on the page is its theme Theme="NoAjaxSkin".

The App_Themes folder should be placed in the root of your web application. Inside it are all the themes for the application. In this demo we have a single theme called NoAjaxSkin. Inside the theme folder there is a special file called RadControls.skin. The *.skin files in a theme folder are automatically parsed by ASP.NET. Inside this file we can add properties to the different controls. We are doing just that - adding an EnableAjaxSkinRendering property for the grid, menu, and tree controls. The property will be applied on all such controls on pages that use the  NoAjaxSkin theme.

The final thing you need to do is load the actual CSS files for the controls, since they are not going to be output (EnableAjaxSkinRendering="false"). ASP.NET will automatically load all CSS files that are inside a theme folder. We are taking advantage of this feature and have placed the needed CSS files (from the Skins folder of the RadControls for ASP.NET AJAX distribution) in the NoAjaxSkin theme. Of course, you can load the CSS files manually in the page as well and leave only the RadControls.skin folder in the theme.

One final thing that must be noted is that if you want to apply a particular theme on all the pages in your application, you do not need to modify each .aspx file and add a Theme="..." to the page directive. You can do this in the Web.config file:

<configuration> 
    <system.web> 
        <pages theme="NoAjaxSkin" /> 
    </system.web> 
</configuration> 

The above will enable the NoAjaxSkin theme for all pages in the web application.