How to load 1M+ records in Telerik’s ASP.NET Grid without Compromising Performance

The latest release of Telerik’s ASP.NET AJAX controls (Q3 2013) shipped the so famous virtualization feature in our almighty ASP.NET DataGrid allowing you to load hundreds of thousands of records without compromising performance. Another goal for this functionality was to replace the previous Virtual Scrolling and Paging features which were a great example but did not deliver the full user experience that a virtualization mechanism could deliver.

The need for performance

Speed, application responsiveness and performance are never enough, right? That’s why here at Telerik we say – “Deliver more than expected” and we do so. I am sure data virtualization as a concept needs no introduction. However, let me say a few words about it.

Virtualization as a term in computer programming means creating a virtual version of something, often used in describing virtual machines. Here we are not talking about virtual machines but rather about virtual rows(records) in RadGrid. From a user standpoint the table containing the rows is full with a million records but actually they are virtual and only a couple of <tr> elements are created and the data in them is constantly changing when scrolling.

Benefits

Let’s go through the many benefits that the virtualization feature presents:

• Less ViewState – creating fewer rows means less ViewState, faster roundtrips to the server and fewer controls to create and manage on the server.
• Smaller amount of rendered HTML – the main reason for the better client-side performance and improved user experience is the smaller amount of rendered HTML. In that case the browser has a lot less work to do.
• Data is transferred using callbacks – another great implementation idea is transfer of data using callbacks. Instead of performing an AJAX request and causing full page render, the Virtualization will make a simple callback to the server returning the new data in a JSON format and then using client-side binding to bind the grid data.
• HUGE difference in client-side performance – client-side performance will stay the same when using RadGrid Virtualization. However, when disabled the RadGrid speed will decrease with each additional item(row) for the current page.

How to get most of RadGrid Virtualization

I love this part. Really. Increasing your performance has never been easier – just set the RadGrid.ClientSettings.Virtualization.EnableVirtualization to true as shown below. And YES – that is all. But don’t get disappointed there is something for everyone. Under RadGrid.ClientSettings.Virtualization there are a couple of properties you can play with so you could unleash the full power of the GridView for ASP.NET Virtualization feature. Let’s go through them:

• LoadingPanelID – set the id of a RadAjaxLoadingPanel you want to show while waiting for the data to be returned from the request
• RetrievedItemsPerRequest – that’s the number of items that will be retrieved when making a request. Retrieving more items means waiting more time for a request, but doing it less often and vice-versa.
• InitiallyCachedItemsCount – this will take effect when using any kind of server-side binding and will pass initial items count
• MaxCacheSize – if you want to keep your users from using too much memory you could limit the number of records that could be cached in memory. The Virtualization will automatically free the most distant records from the cache
• ItemsPerView – the property determines how many rows will be created from the server. Note that bigger values could make scrolling sluggish. The 100 default value is tested to provide great overall performance and could be changed only in custom scenarios.
• EnableCurrentPageScrollOnly – default value is false. Let’s answer the question why you would want to set the property value to true. Imagine you have 1M+ records and you want to scroll to the 10234 record – guess what you will need to have the most precise hand and a little bit of luck to scroll exactly to that record. The solution is to set the value to true, set your PageSize to something like 10 000 and this will allow you to scroll only 10 000 records per page and change the pages from the pager.

What are you waiting for? Go out and check out the RadGrid Virtualization demo here. And don’t forget to post your feedback on our Feedback portal.