Click here to Skip to main content
15,867,330 members
Articles / Programming Languages / C#
Article

Achieve Unbeatable Performance with RadControls for Silverlight! Working with 50 million cells has never been faster

16 Mar 2010CPOL6 min read 20.5K   1  
This whitepaper explains how through smart use of UI and Data virtualization, content recycling, XAML optimizations and more, RadControls for Silverlight deliver first-class performance.

This article is in the Product Showcase section for our sponsors at CodeProject. These articles are intended to provide you with information on products and services that we consider useful and of value to developers.

Image 1

(Working with 50 million cells has never been faster)

Telerik Silverlight Controls Performance

At Telerik, we know that UI controls’ performance is crucial for your line-of-business (LOB) applications and making sure that RadControls for Silverlight help you achieve unmatched performance has been our number one priority.

Performance is probably in the top-3-favorite-word list of marketers, and often its exact meaning is not very clear. This paper, however, treats the concept of performance with facts and examples. It explains the techniques we’ve used when crafting RadControls for Silverlight.

UI and Data Virtualization

In order to keep performance optimal in our controls, Telerik has incorporated the concepts of UI and Data Virtualization into the more data-centric controls in our suite. In the easiest scenario, utilizing this virtualization involves putting elements into a VirtualizingStackPanel, thus gaining the advantage of only having the UI Elements which are visible on screen generated and taking up memory. This would mean that, for example, if you had a combo box which contained 10,000 items, only the 15 or so which are visible in the dropdown will be created, the others existing in the dataset but not requiring visual elements. With this core concept in mind, our development team has started to incorporate Virtualization techniques into the following controls:

RadGridView

Utilizing a combination of UI Virtualization and container recycling, Telerik Silverlight Grid has been optimized to work with the largest and smallest of datasets with ease. Even with virtualization happening, there is still a problem to be considered- each time a cell moves into view, a new element is being created for it, causing a lot of traffic going back and forth to garbage collection, which means memory is being taken and released as you perform operations and even just scroll through the grid. Container recycling is our answer to that, in which containers for data items are created once and then re-used as you scroll, group, and sort through data. Instead of the constant back and forth with garbage collection and new elements being created, RadGrid simply re-uses the elements it has already created, aiding in lightning fast scrolling and data operations on the client-side.

See Telerik Silverlight Grid working with 50 million cells here

RadTreeView

In many cases a hierarchical dataset will not be only ten to fifteen items, but rather span hundreds or even thousands of nodes. There are several options that you have when using a tree view, since the hierarchical data structure offers some unique challenges as far as leveraging performance and providing the functionality required in a high-performance tree view.

One option which you can utilize is the load-on-demand feature, which enables you to load and create data only when needed, easing the initial loading of the control. In a typical scenario this means you start with a handful of elements created and end up with a few hundred being managed in memory and utilizing resources. When an item is selected, the sub-items are loaded and created- until then, you only have to worry about as many visuals as are initially loaded in the root.

Moving beyond this, we have incorporated UI Virtualization and item caching into RadTreeView which enables for better loading and accessing of data. With this combination, the root level items are virtualized (allowing for peak performance with large lists), with child nodes being cached for a period of time. Utilizing these techniques allows for RadTreeView to provide seamless performance with large and small datasets, all the while not utilizing any more memory than necessary to get the rich functionality which is included in RadTreeView.

image001.jpg

RadChart

The Data virtualization approach leads to significant performance gains in Telerik Silverlight Chart as well, even when working with a million records. The trick is that not all the data is actually shown on the screen – it is summarized. RadChart achieves this using a technique called Sampling. The control splits the data into groups and aggregates each group using one of the many provided sampling functions (you can even write your own). The end result is a graph that summarizes the real data close enough while performing infinitely faster.

image002.gif

To make it easier to drill-down inside and navigate the entire data source we have also provided zooming and scrolling functionality and a modified RadSlider to make it even more convenient to browse.

image003.gif

Data Binding

Our development team has gone to great lengths to ensure that you have a variety of options as far as how you access and consume data using RadControls for Silverlight. Taking advantage of the rich databinding engine provided in the Silverlight framework, you have a number of options as far as how you populate the controls.

  • WCF Services – Using a WCF service gives you control over sending data back and forth to the client through operations which you define. Easily tie the .ItemsSource of a RadControl to the resulting data set from an operation or use it in complex operations before handling it in your application.
  • ADO.Net Data Services – Useful when working with the Entity Framework, ADO.Net Data Services helps utilize http requests to send and receive data between the client and server.
  • WCF RIA Services – Telerik has been keeping up with the latest versions of WCF RIA Services and is working to support both seamlessly with our Silverlight 3 official release and our Silverlight 4 CTP release. Utilizing WCF RIA Services, you can quickly and easily design a data layer, complete with metadata and validation, that maintains the object model between the server and client and allows for easy data manipulation.

XAML Optimization

One of the main things that people come across when first stepping into Silverlight is how many lines of XAML code it takes in order to create a template for a control, not to mention all the code on the backend that really makes the control work. There are many considerations to take into account with a control like RadGridView, which has different visual states for hierarchy, adding new rows, and row selection, just to name a few. With this in mind, our team has embarked on an effort to reduce the visual elements in all of our templates with a few goals in mind.

First, reducing the number of visuals it takes to reach the data item for any display, be it in a Grid, Chart, or Scheduler, means less memory is being used as less objects have to be created. For a simple control like a button this might not be a concern, but when you consider how many grid cells need to be displayed at once in even the simplest scenario (even in a virtualized grid), the numbers can get pretty astounding. Using RadGridView as an example, we’ve recently made a reduction in the number of visual elements it takes to display a grid, so in an application that displays a 10x10 grid, you instantly have 100 less visual elements being created per element removed. Scale this to larger grids with high volumes of data and you can see how this would be beneficial.

Another way to increase performance is by finding better ways to achieve the same results. Over the last two release quarters, the RadGridView team has managed to reduce the overall XAML needed for the RadGridView template by over 30%, all the while adding functionality. This not only leads to better performance but also make it easier for developers and designers who are working on any customization of the control to understand the control template and all the different elements involved. Making the XAML much more readable may not mean much to your end user, but you will definitely notice our teams attention to detail and the ease at which you can work with our controls.

Read more and see examples here

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
-- There are no messages in this forum --