Performance Tip: Use Web Service Load On Demand with RadTreeView

Posted by: the telerik blogs, on 06 Aug 2008 | View original | Bookmarked: 0 time(s)

A common scenario for a treeview control is to populate it with lots of nodes. Adding a few thousand nodes initially is not a good idea though. Think of all the rendered HTML. Even rendering a few thousand strings (without any extra markup) will result in a few megabytes of HTML. That's where load on demand comes into play. RadTreeView supports three different types of load on demand: web service, server side callback and server side postback. From those the server-side postback mode is least efficient in terms of performance because it postbacks and updates the whole page. Here is how the output looks like (total size 28775 bytes):

image

As you can see the complete page is rendered and loaded again.

Server-side callback relies on the ASP.NET 2.0 built-in callbacks. It is significantly faster than the server-side postback mode because it renders only the nodes loaded on demand as well as some event validation data. Here is a typical output rendered by a server-side callback (total size is 1631 bytes):

image

Still the server-side callback mode is not the fastest load on demand mode supported by RadTreeView. Any callback request submits the page ViewState back to the server and causes the page lifecycle to execute. Indeed the lifecycle is not full but still it consumes some server time and the developer should avoid to perform any other tasks apart from populating the treeview. The IsCallback property comes in handy in such cases and helps the developer avoid hitting the database for no reason during load on demand requests.

When you want to squeeze the last bit of performance from RadTreeView you should opt for web-service load on demand. Here is how a typical web service load on demand request looks like (total size is 1745 bytes):

image

As you can see only JSON is transmitted in this case - no HTML or ViewState. On top of it the page lifecycle is not executed at all. Now the best part - I will tell you how to decrease that output even more!

By default the web service method returns objects of type RadTreeNodeData which contain the most commonly used properties of a RadTreeNode object. However you may not need all of them. So why transmit empty values in the JSON output? The solution is simple - create a custom class containing only the properties you need to use - e.g. Text, Value and ExpandMode:

    public class NodeData

    {

        public string Value { get; set; }

        public string Text { get; set; }

        public TreeNodeExpandMode ExpandMode { get; set; }

    }

Now use that class in your web service method instead of RadTreeNodeData. Here is how the output looks like now (total size is 500 bytes):
image 

As you can see only the relevant properties are transmitted back from the server. However there is still one thing bothering me - that "__type":"ProductCategories+NodeData" string does not seem to be relevant in this scenario. Fortunately the fix is quite simple - change the return type of the WebService method from RadTreeNodeData[] to IEnumerable. Here is the output after this change (total size is 310 bytes)image Not bad! If you don't plan to use server-side postback events (such as NodeDrop and NodeClick) you can improve the total performance even more by setting the PersistLoadOnDemandNodes property to false. By default this property is set to true which means that RadTreeView logs (in JSON format) all nodes created on demand so they are later available after postback (required for server-side events). However this operation may become time consuming in case there are lots of load on demand nodes. If you don't need postback events just set that property to false to enable logging and persistence. Even if you need postback events you can "fake" them using RadAjaxManager. You can check the attached example for a sample implementation.

You may wonder why on earth our web-service example is so inefficient. The answer is easy - for simplicity. The RadTreeNodeData class is provided so the user can instantly start development. Optimizing the performance can be done at a later stage. Nevertheless a new example will be added in our online examples utilizing all of the aforementioned optimizations.

Live Demo | Download

Category: Performance | Other Posts: View all posts by this blogger | Report as irrelevant | View bloggers stats | Views: 2586 | Hits: 13

Similar Posts

  • Silverlight Live Streaming service update more
  • Announcing Microsoft Ajax Library (Preview 6) and the Microsoft Ajax Minifier more
  • Exporting SWF & FLV format reports in SSRS 2005 and 2008 more
  • Take Two: A jQuery WCF/ASMX ServiceProxy Client more
  • Announcing the Microsoft AJAX CDN more
  • Unit Testing - Do Repeat Yourself more
  • Querying a Multi-Tenant Data Architecture more
  • Intersoft Solutions Announces WebUI Studio 2009 Service Pack 1 more
  • Part 3: Accessing Security and Authentication in Silverlight using .NET RIA Services. more
  • Free Open Source .NET Mobile API From Mobile Experts - 51degrees.mobi more

News Categories

.NET | Agile | Ajax | Architecture | ASP.NET | BizTalk | C# | Certification | Data | DataGrid | DataSet | Debugger | DotNetNuke | Events | GridView | IIS | Indigo | JavaScript | Mobile | Mono | Patterns and Practices | Performance | Podcast | Refactor | Regex | Security | Sharepoint | Silverlight | Smart Client Applications | Software | SQL | VB.NET | Visual Studio | W3 | WCF | WinFx | WPF | WSE | XAML | XLinq | XML | XSD