Great usage of Themes with Telerik controls

Telerik controls allow us to focus on the core of our features and deliver them faster. However, Telerik controls' rendering was not easy for skinning and not very responsive. But Telerik has improved it lately using a new property called Render Mode. Setting this property allow us to get a different rendering for the controls, which is more light weight and responsive. For example, here you can see the rendering difference for Rad Calendar.

This is a really cool feature, but I wouldn't want to just go ahead and apply it, for two reasons. The first most obvious reason, is that it is a lot of work to go over all the controls. It ain't fun at all. The second reason is much more crucial. We have hundreds of happy customers who have their own skins which might break with the change in rendering.

Asp.Net Themes come to the rescue by offering a very simple solution to both these problems. We can set this property in the .skin file the following way:

<rad:RadCalendar SkinID="RadCalendar_SkinID" Skin="Default" runat="server" RenderMode="Auto" />

By doing so, we applied the new property for all Rad Calendar controls in our application, and we did it on the skin level, without affecting other skins. Once this property is set, the HTML rendering of this control is changed for this skin only, so CSS changes which might be required, can also be applied on this skin only.

We saw how the Render Mode property allows us to improve the rendered HTML, and using Themes allows us to do it easily and without breaking any working skin. We can now easily create much more responsive skins without worrying about backwards compatibility.