As a strong believer in sprites, I was inspired from a question that came up in a forum thread earlier this week, namely: how to use sprites in a RadTreeView? Well, I think it's rather limiting to write only about the RadTreeView, so this post discusses the technique for all of the navigational RadControls.

screenshot

You can download the sample page and give it at try. Most of the code is quite straightforward - simply setting the CssClass property and a few layout adjustments. Please note, however, that this CSS is tightly bound to the skin that is currently used, so changing skins might not work (to be more specific, it won't work for skins that set background images to the text nodes).

Why go through all the pain? Well, great performance boost for every instance of RadControls that uses it - by both minimizing the HTTP request count and optimizing the HTML output of the control.

Oh, and... I would like to give some credit to Mark James, who created the wonderful Silk icon set that was spritified. Slickedy-slick!

 [UPDATE] Here is an updated sample page for the 2010.Q1 release.


About the Author

Iana Tsolova

is Product Manager at Telerik’s DevTools division. She joined the company back in the beginning of 2008 as a Support Officer and has since occupied various positions at Telerik, including Senior Support Officer, Team Lead at one of the ASP.NET AJAX teams and Technical Support Director. Iana’s main interests are web development, reading articles related to geography, wild nature and latest renewable energy technologies.

Related Posts

Comments

Comments are disabled in preview mode.