XamGrid Performance Optimization Using Simplified Templates

The heart of the vast majority of Line of Business applications is the grid control. The XamGrid is a fully-featured, high-performance, highly-customizable grid control which is available as part of our NetAdvantage for Silverlight and NetAdvantage for WPF products. As the users spend a lot of their time examining lists of records, the perceived performance of an application is directly related to the performance of the grid. This blog post describes a simple method to give you a 30% performance improvement in XamGrid scrolling performance by using simpler templates. This blog post describes the approach and illustrates it with a sample project you can use to compare the scrolling performance of the XamGrid using the different setups.

In this blog post I will illustrate how to use simpler templates to replace DateColumn and DateTimeColumn cell templates in XamGrid, and demonstrate how this can significantly improve scrolling performance. Please download the sample project – it enables you to show/hide date columns in a XamGrid, and allows you to benchmark the time it takes to scroll through the dataset. Please remember to unblock the ZIP archive before extracting it. The project is built using Visual Studio 2010 and .NET Framework 4. It uses the latest available service release of the 12.1 WPF product, so you can build and run it without any additional downloads. Fully-functional free 30-day trial of the NetAdvantage for WPF product, which includes the XamGrid is available.

Please see below a screenshot of the XamGrid which uses DateTimeColumn columns to display date values, together with the time it takes for the grid to page through the entire dataset.

Date value presentation

The default column type for date-typed columns is the DateColumn. Recently, we’ve introduced the DateTimeColumn as a replacement for this default column for visualization of date values. These editors provide a powerful UI for editing the date value, both using a formatted editor in the cell, and also using a date picker which is popped up when the user clicks the arrow button. However, this advanced functionality comes at the price of additional UI elements. Here’s an image showing the element tree of a cell in the DateTimeColumn. You can see it uses a total of 27 elements to represent this value and give the user the ability to edit it easily. When you have multiple date columns visible at one time, and when you have a number of records visible, this increased number of elements starts to have an impact on scrolling performance. When you need to edit these values, this may be a price you may be willing to pay. However, when you don’t need to edit these values, the extra functionality provided by the additional UI elements isn’t used. Simplifying the cell template to only present the value can yield a noticeable improvement in scrolling performance.

Simplified Templates for Date value presentation

If we use a simple TextColumn to represent a Date value we don’t get the editing capabilities, but we cut down 27 UI elements the standard DateTimeColumn cell uses by 4 times to only 7 elements as shown in the element tree below:

Using the TextColumn instead of the DateTimeColumn enables us to significantly reduce the load on the CLR which needs to go through the measure and arrange passes for a significantly smaller number of UIElements. This results in better scrolling performance. How much better exactly?

Performance Benchmarking

The sample includes a grid containing columns of different types, which can be paged automatically, with the scrolling time displayed once scrolling has completed. The XamGrid has (among many more) 4 date-typed columns – the first one is shown using a TextColumn, the other four are shown using DateTimeColumn. The column chooser functionality is enabled, and you can hide a column by clicking the button on the right of its title in the column header cell (you can show a hidden column by clicking its name in the list that pops up when you click the region where the column was collapsed into). Adjust the sample to fit your requirements by setting the ColumnWidth, and RowHeight properties on the XamGrid. You can leave them as they are if you’d like to see the general effect on scrolling performance.

1. Click the Benchmark button to start the automatic paging to get a baseline performance level with 4 DateTimeColumns columns shown. You can repeat a few times to get a more accurate idea of the time it takes to page through.

2. Hide one or more of the DateTimeColumn columns (Date1, Date2, Date3, Date4)

3. Click the Benchmark button to start the automatic paging with the new column configuration. You can repeat a few times to get a more accurate idea of the time it takes to page through.

Results

5 date-typed columns are visible, 1 date value shown in a TextColumn, and 4 shown using DateTimeColumns. The scroll time averages at 5.6s.

4 date-typed columns are visible, 1 date value shown in a TextColumn, and 3 shown using DateTimeColumns. The scroll time averages at 3.9s.

3 date-typed columns are visible, 1 date value shown in a TextColumn, and 2 shown using DateTimeColumns. The scroll time averages at 2.9s.

2 date-typed columns are visible, 1 date value shown in a TextColumn, and 1 shown using DateTimeColumn. The scroll time averages at 1.8s.

1 date-typed columns are visible, 1 date value shown in a TextColumn, and none shown using DateTimeColumn. The scroll time averages at 1.1s.

You can easily see the dramatic effect on performance achieved by using a simple TextColumn for the visualization of date values instead of DateTimeColumn columns. This performance win is easily achievable when you don’t allow users to edit date values, because you don’t sacrifice any aspect of functionality by using a TextColumn instead of a DateTimeColumn. The fact that the date columns are hidden doesn’t mean we improved performance by showing less data – the grid has more than  40 columns, and it shows the same amount of data, since all columns have equal width. The values which are coming in from columns on the right now that we’ve hidden the DateTimeColumn columns are numbers and simple text, which are displayed using simple TextColumns, which only use 7 UIElements to present their values. This is why even though we’re showing the same amount of data, we’re able to improve scrolling performance by about 4 times, a multiple of the DateTimeColumn columns we’ve been able to replace by TextColumns in view (the fact that these previously hidden from view TextColumns show different data types doesn’t impact the results).

Summary

in this blog post, I presented a simple way to improve performance on your XamGrid by replacing DateColumn and DateTimeColumn with TextColumns. As demonstrated by the sample, this substantially cuts down the load on the CLR and results in greatly improved scrolling performance. In addition to the general approach, you can also use the sample project for its automatic paging logic, which will enable you to benchmark the effect of different settings/templates on performance. Using this approach in XamGrids displaying read-only date values, you can easily improve scrolling performance and thus increase user satisfaction.