All About the Telerik WPF DataGrid

Today, we are going to discuss how to load your Telerik GridView with different flavors of data in an MVVM-friendly way. Why? Because MVVM allows us to separate the code that prepares the data for display and is responsible for handling user input from the code that manages the view. Also, MVVM is purposely built for WPF.

If you are new to MVVM or need a refresher, take a moment to read an introduction to the MVVM pattern. In this post, I will assume you have a basic understanding of how MVVM works. If you don't need MVVM and just want to visualize your data in a code-behind, don’t worry—you will still find some nuggets of wisdom here. 

Basic Data Binding

Let's start with the basics. Data grids display data in rows and columns and in order to display your data, you need a collection of objects. For each item in your collection, a new row is added to the grid. The columns are constructed from the public properties of your objects. You can either use automatic column mapping or take manual control and define the columns yourself. In either case, there is no good or bad way, but an automatic and a manual one.

On many occasions people consider using a grid when in fact they need a pivot. If your data is more like measures and dimensions with multiple layers of nesting, rows and column totals like in the image above, then take a look at the RadPivot. It is a purpose-built component for displaying data in a pivot that enables users to add or remove measures and dimensions on the fly.

Let's see how we can databind our grid. (Check out the official documentation here.)
We start by defining a model—I’ll use a simple Employee model. Next, we need a view model with a public property that will expose our collection of employees. Let's first start with simple in-memory data.

public class MainViewModel : ViewModelBase
{
    private ObservableCollection<Employee> _data;
 
    public ObservableCollection<Employee> Data
    {
        get => _data;
        set
        {
            if (_data == value)
                return;
 
            _data = value;
            this.RaisePropertyChanged();
        }
    }
}

Let’s use this model and bind the ItemsSource property of the RadGridView. It is of type IEnumerable, as you would expect, and indeed it can accept any enumerable. This behavior is very similar to what we have in the standard WPF toolbox. However, the grid checks the inbound collection and there are some special types that influence the grid behavior. This is where the Telerik DataGrid has some hidden treasures.

One special collection is the ObservableCollection, which implements the INotifyCollectionChange. Like other WPF components, changing the contents of that collection in your view model will inform the DataGrid of the change and it will update accordingly. New rows will be added or old ones removed—nice!

Grouping, Sorting, Filtering

There is another special collection that ships the Telerik assemblies and this is the QueryableCollectionView or QCV. It ends in view because it intends to serve as a facade over your collection. It allows you to manipulate your data from your ViewModel trough the QCV API. In order to use it, you wrap your data inside of it and pass it to the GridView. For example, if you want to filter the data, you can do it in the following way:

public MainViewModel()
{
    _data = new ObservableCollection<Employee>(SampleData.Employees);
    _dataView = new QueryableCollectionView(_data); // Wrap data in a collection view
}
 
public QueryableCollectionView Data => _dataView;
 
private void OnFilterData(object obj)
{
    var descriptor = new FilterDescriptor(nameof(Employee.LastName), FilterOperator.StartsWith, "P");
    _dataView.FilterDescriptors.Add(descriptor);
}

Sorting is similar, just tap the SortDescriptors property. You can group in a similar way—adding GroupDescriptors will group your grid. The DataGrid understands the QCV and will update its UI to indicate the data manipulation. Notice the plural in the descriptors property. You can add multiple descriptors to do multiple groups, sorts and filters. One more thing—if you have multiple data operations on the QCV, then you can defer its refresh to speed it up like this:

private void OnSortData(object obj)
{
    var descriptor = new SortDescriptor() { Member = nameof(Employee.LastName), SortDirection = ListSortDirection.Descending };
    _dataView.SortDescriptors.Add(descriptor);
}

As a testimonial to the DataGrid understanding of the QueryableCollectionView, when the user applies grouping in the UI, the collection of group descriptors gets updated. You can observe the changes to this collection and perform some logic when the user groups the grid. This can be tremendously useful on many occasions when you need to be informed about a user performing an action on the data. You can obviously subscribe to the events of the GridView, but this is not very convenient for MVVM. That's the exact reason why Microsoft has created a number of special interfaces like the ICollectionView, which we saw today in the form of QueryableCollectionView.

Dynamic Data

In most cases, you already know the schema of the data prior to the application launch. But sometimes this information is obtained only after the app starts. An example I can give you straight away is CSV file visualization. The schema of the CSV file can change from file to file and it is known after the user selects the file. In cases like that, the plain old System.Data.DataTable and DataView can be your friend. Just create a DataTable, populate it with the rows and columns of the CSV file and data bind to the grid view. The Telerik DataGrid understands this classical type and will display its structure as you expect.

private void RefreshData(object obj)
{
    this.Data = this.GenerateRandomData();
}
 
static DataView GetSampleView()
{
    DataTable table = new DataTable();
    table.Columns.Add("Weight", typeof(int));
    table.Columns.Add("Name", typeof(string));
    table.Rows.Add(57, "Koko", "Shar Pei", DateTime.Now);
    table.Rows.Add(130, "Fido", "Bullmastiff", DateTime.Now);
     
    return table.DefaultView;
}

A word of warning here. As cool as the DataTable API is, you should restrain yourself from using it except for cases of dynamic data as described above or when you are migrating an existing code base to WPF. Querying databases and displaying their data can be done using other, more modern techniques. There are number of good reasons for this.

Getting Data from a Database

Long gone are the days that you have to write your SQL statements in code with string concatenation and commands. ADO.NET is still here with us and there may be some situations in which you can rely on old faithful, but ORM frameworks like EntityFramework have rescued us from writing boring boilerplate code. Using an ORM framework has many advantages, including:

• Saving a lot of time
• Minimizing boilerplate code
• Executing data operations on the server blazingly fast using IQueryable
• The ability to replace one database server with another with minimal effort
• Database versioning and automatic migrations
• Automatically creating database from your models

4. DataGrid Performance Tips and Tricks

Good performance is vital for a good application user experience, which makes it a key priority for all applications. As you know, users hate slow and laggy applications and that's why performance is one of the highest concerns for developers and managers alike.

The Telerik WPF DataGrid is optimized for dealing with huge datasets, however, there are some things that should be kept in mind when dealing with large data sets. Fortunately, there are lots of tweaks that you can apply to the WPF DataGrid in order to get top performance, which traditionally fall into one of two categories: reducing the UI complexity or reducing the amount of data being processed.

Reducing UI Complexity

Application performance begins to slow down when there is too much going on in the UI thread. In WPF applications one of the reasons could be the complexity and size of the visual tree. Simply put, when there are lots of visual objects that need to be measured, arranged and painted, the time needed for those operations can increase beyond what is considered reasonable.

The DataGrid is a complex control with lots of features and because of that, the number of UI elements created on the screen is huge. That's a common problem among many WPF components, as the more complex the UI component, the more UI elements get created. If we examine the visual tree created for a simple GridView with 10 rows and 5 columns, you will find that it has spawned 1,339 visual elements (using the Windows 8 theme). It must be noted here that the Telerik DataGrid utilizes advanced techniques like UI element virtualization, so it only creates as many visual elements as can be displayed on your screen. But still, the complexity of these elements is the problem.

The creators of the Telerik WPF DataGrid have recognized this problem and have provided an intuitive solution: light templates that significantly reduce the number of UI components created. In order to use them, you have to use no-XAML binaries and you also have to opt-in.

<ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
       <ResourceDictionary Source="/Telerik.Windows.Themes.Windows8;component/Themes/System.Windows.xaml"/>
       <ResourceDictionary Source="/Telerik.Windows.Themes.Windows8;component/Themes/Telerik.Windows.Controls.xaml"/>
       <ResourceDictionary Source="/Telerik.Windows.Themes.Windows8;component/Themes/Telerik.Windows.Controls.Input.xaml"/>
       <ResourceDictionary Source="/Telerik.Windows.Themes.Windows8;component/Themes/Telerik.Windows.Controls.GridView.xaml"/>
    </ResourceDictionary.MergedDictionaries>
   
    <Style TargetType="telerik:GridViewRow" BasedOn="{StaticResource GridViewRowCoreValidationStyle}"/>
    <Style TargetType="telerik:GridViewCell" BasedOn="{StaticResource GridViewCellCoreValidationStyle}"/>
</ResourceDictionary>

The code snippet above is everything needed to opt-in for the lightweight templates, but for it to work, you must use the no-XAML binaries and implicit themes, as already mentioned.

You may ask “why did I have to opt-in for something that improves performance? Why isn’t it enabled out of the box?” Well, here's the gist - these templates disable some of the DataGrid features like row details and hierarchical grid. Basic effects like hover and selection as well as grouping are still enabled, so make sure you check your grid before enabling those light templates.

So far, we haven't talked numbers, so let's do that. Let’s enable the light templates in our simple 10-by-5 grid and check the number of visual elements spawned. Now the number is 919, a 31% reduction. That means faster loading, scrolling and performance overall. There is a good in-depth analysis in this blog post dedicated to light templates with more numbers and statistics. Be sure to check it out.

Another neat trick to reduce UI complexity is to use fixed width for your columns. Configuring all of your columns to use a specific size will help your GridView in measuring and arranging your columns, which in turn will increase both horizontal and vertical scrolling performance.

Reducing the Amount of Data

DataGrids are components that are data-centric. Because of their nature, they are usually filled with a lot of data. It is not uncommon to see a grid with tens of thousands of rows because grids are so easy to read and understand.

But loading a collection with millions of objects requires a lot of memory. Data operations on those objects can also be slow if not done properly. You can, of course, implement some partial loading as well as fast sorting and filtering that operate on huge datasets, but there is an easier way. There are some techniques you can utilize to reduce the number of objects loaded in memory at once and utilize the underlying database or remote service more efficiently.

Enter IQueryable. IQueryable, compared to IEnumerable (which is the contract used by most ItemsControls in WPF), allows some data-savvy components to not only get the items needed for display, but also create queries that can potentially be executed on a remote computer. Take, for example, sorting. If you have a million rows of data and you want to sort them, this can be time consuming if not done properly. However, a database can sort a dataset much faster if an index exists on the subject column.

Paging or filtering are other data manipulations that can see a huge boost if executed on the server. Not only that, but when you want to filter, sort and then read the data only a few records at a time, then the task at hand becomes very difficult if you don't use IQueryable. When using IQueryable, you can request only a single page from your data source at a time—and I am not talking about paging an in-memory data using some UI, but actually loading only a bunch of objects into memory from the underlying datasource. This can be much more efficient in terms of memory and transport.

Imagine loading 1 million rows from a remote service, then parsing them from JSON to POCO, only to display 20 objects. That's hugely inefficient. IQueryable allows you to request only the objects that you need from the comfort of dotNet. What the Telerik WPF grid offers is a special descendant of QueryableCollectionView that utilizes the power of IQueryable on your behalf—meet the VirtualQueryableCollectionView. If you want to obtain the items from your database 20 rows at a time, you can expose your data as IQueryable and wrap it in a VirtualQueryableCollectionView with LoadSize set to 20. Then, just pass this virtual collection to the Data Grid and voila—the GridView will now create queries for obtaining the data.

public class MainViewModel : ViewModelBase
{
    public MainViewModel(IEmployeeService employeeService)
    {
        IQueryable query = _employeeService.GetEmployees();
        this.Employees = new Telerik.Windows.Data.VirtualQueryableCollectionView(query) { LoadSize = 20 };
    }
 
    public Telerik.Windows.Data.VirtualQueryableCollectionView Employees { get; }
}

Just this simple code change is all that is required to start using the power of IQueryable in your code. You will immediately notice the faster loading of your grid. Sorting and filtering will also be done using queries, written for you by the DataGrid engine, and will execute much faster. Not only that, distinct column values, used by the filtering window, will be acquired faster. This means that the window itself will display faster. So, all in all, the DataGrid will display faster and be more responsive.

The Mighty VirtualGrid

Sometimes all you need is to display your data in just rows and columns and you don't need the advanced features of the DataGrid. Telerik engineers have created a component from the ground up for speed and performance and it is called the Virtual Grid (a.k.a. RadVirtualGrid). In the gif below, you can see an example of scrolling through more than a trillion cells (yes, that's a trillion!)

It lacks some of the more advanced features that DataGrid has like hierarchical grids, but it makes up for those missing features with speed. If you are serious about performance and responsiveness, and you want to display thousands and millions of rows of data, then you should definitely consider using this component. We talked about UI complexity and I have shown you some numbers for the DataGrid using light and regular templates. Well, the number of UI elements spawned to display the Virtual Grid is... 55. That's right, 55!

Knowing when to use Virtual Grid or regular DataGrid is the name of the game. From my experience, the Virtual Grid is more than enough feature-wise so you can usually swap your DataGrid with Virtual Grids safely. 

If some of the missing features are a must, you can combine the two components together. You can display the entire dataset using virtual grids and when the user wants to view a particular portion of the data in more detail, you can display this data in a DataGrid. Utilizing the QueryableCollectionView we talked about above is very neat in scenarios like this, because it gets populated with the proper FilterDescriptors whenever your users apply filters to your virtual grid. You can use this as an opportunity to populate your DataGrids and perhaps some graphs to create a dashboard. Users love that.

5. How to Style and Customize Your WPF DataGrid

The Telerik WPF DataGrid is highly customizable component. Long gone are the days when the theme we got from the distributor was set in stone and couldn't be modified. With the power and flexibility of WPF, you can customize every part of the Telerik DataGrid—and any component for that matter.

One of the coolest WPF features is the styling and template mechanism. Styles allow you to set the properties of a component in a tidy way and create a configuration that can be shared among many instances. Templates allow you to take control over the appearance of a component using ControlTemplate or the appearance of data using DataTemplate. What the creators of the DataGrid have done is take advantage of this mechanism and allowed you, the developer, to modify the appearance of the GridView (and any component for that matter) very granularly. 

All Telerik components have their styling and appearance declared as implicit styles and bundled together as themes. Out of the box, the Telerik DataGrid comes with a bunch of themes defined in separate assemblies. There are dark and light themes, a Material and touch-friendly theme. There are themes influenced by Microsoft Office. The list gets updated constantly with new releases.

The good thing about this vast array of themes is that you can find at least one that suits your needs. And even better, updating the appearance can be done in several ways as I am going to show you today. So, if you want to change the background of a row, you have several approaches that you can follow. The Telerik team has identified the most common styling needs and handled them gracefully so that you don't need to re-template anything unless you really need to.

DataGrid exposes a number of properties that can be used to easily customize it without the need to modify its template. You can show or hide specific DataGrid components, like the group panel that sits at the top, the column headers and footers, the row indicator and many more. Being WPF, you can either set these properties directly on the DataGrid as in this code snippet:

<telerik:RadGridView ShowGroupPanel="False" GridLinesVisibility="Vertical"
                     ShowColumnHeaders="False" ColumnBackground="Bisque"
                     RowIndicatorVisibility="Collapsed"/>

Alternatively, you can also define them in a style. Your style can either be implicit as in this code snippet or be a regular style with a key. Just remember to inherit from the theme style. Why is that? Well, remember that the Telerik team has defined everything style-related in the theme assemblies. Every component has two sets of styles for it: a named style, named like: <componenet_name> Style. So, in our code snippet we need to inherit from RadGridViewStyle. That gives us the control template and all other settings. Now you can use your style anywhere in our app. Easy, right?

<Grid>
    <Grid.Resources>
        <Style TargetType="{x:Type telerik:RadGridView}" BasedOn="{StaticResource RadGridViewStyle}">
            <Setter Property="ShowGroupPanel" Value="False" />
            <Setter Property="GridLinesVisibility" Value="Vertical" />
            <Setter Property="ShowColumnHeaders" Value="False" />
            <Setter Property="ColumnBackground" Value="Bisque" />
            <Setter Property="RowIndicatorVisibility" Value="Collapsed" />
        </Style>
    </Grid.Resources>
    <telerik:RadGridView />
</Grid>

And here is how that will affect the grid styling:

There are a bunch of properties for you to tweak, which fall into several categories. First, you have properties that show or hide grid components:

• ShowColumnFooters
• ShowColumnHeaders
• ShowColumnSortIndexes
• ShowGroupFooters
• ShowGroupPanel
• ShowScrollPositionIndicator
• ShowSearchPanel
• GridLinesVisibility
• RowIndicatorVisibility
• RowDetailsVisibilityMode

You can use those to remove a grid component that you don't need like we have done in the code snippet above. Then you have a group of properties that can control the size of the rows and columns: 

• ColumnWidth
• MaxColumnWidth
• MinColumnWidth
• RowHeight
• VisibleRowsHeight

In the last group are properties, which define styles, style selectors and templates for various grid components:

• RowStyle & RowStyleSelector
• AlternateRowStyle & AlternateRowStyleSelector
• GroupFooterRowStyle & GroupFooterRowStyleSelector
• GroupHeaderTemplate
• GroupPanelItemStyle & GroupPanelStyle
• GroupRowStyle & GroupRowStyleSelector
• HeaderRowStyle
• NewRowStyle
• RowDetailsStyle & RowDetailsStyleSelector
• RowDetailsTemplate & RowDetailsTemplateSelector
• MergedCellsStyle & MergedCellsStyleSelector
• HierarchyChildTemplate & HierarchyChildTemplateSelector

Some of these properties have corresponding components that can be styled using implicit style. Take, for example, a row. You can style all rows using a single style, either set to the RowStyle property or an implicit style that targets GridViewRow. Both of those approaches will work and can be shared among all your data grid instances, so choose the one that suits you. You can also use style selectors to apply some custom logic depending on your concrete objects and choose a specific style for specific rows.

<Grid>
    <Grid.Resources>
        <Style x:Key="MyGridRowStyle" TargetType="{x:Type telerik:GridViewRow}" BasedOn="{StaticResource GridViewRowStyle}">
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Foreground" Value="Red" />
                </Trigger>
            </Style.Triggers>
        </Style>
        <Style TargetType="{x:Type telerik:GridViewRow}" BasedOn="{StaticResource MyGridRowStyle}">
            <Setter Property="Background" Value="SeaGreen"/>
        </Style>
        <Style TargetType="{x:Type telerik:GridViewHeaderRow}" BasedOn="{StaticResource GridViewHeaderRowStyle}">
            <Setter Property="Background" Value="MidnightBlue"/>
        </Style>
    </Grid.Resources>
    <telerik:RadGridView ItemsSource="{x:Static local:SampleData.Employees}" AlternationCount="2">
        <telerik:RadGridView.AlternateRowStyle>
            <Style TargetType="{x:Type telerik:GridViewRow}" BasedOn="{StaticResource MyGridRowStyle}">
                <Setter Property="Background" Value="LightGoldenrodYellow" />
            </Style>
        </telerik:RadGridView.AlternateRowStyle>
    </telerik:RadGridView>
</Grid>

Resulting in the following: 

But wait a minute! Where are the style properties for cells? You have two options: Either style all cells in your grid at once using an implicit style that targets GridViewCell or style columns individually. To do that, you need to define your columns manually and then you have access to the properties that control the cell appearance. The GridView data column have properties for:

<Grid>

    <Grid.Resources>

        <Style TargetType="{x:Type telerik:GridViewCell}" BasedOn="{StaticResource GridViewCellStyle}">

            <Setter Property="Background" Value="#ffcc00"/>

        </Style>

        <Style TargetType="{x:Type telerik:GridViewHeaderCell}" BasedOn="{StaticResource GridViewHeaderCellStyle}">

            <Setter Property="Background" Value="LimeGreen"/>

            <Setter Property="Foreground" Value="Cyan"/>

        </Style>

    </Grid.Resources>

    <telerik:RadGridView ItemsSource="{x:Static local:SampleData.Employees}" AutoGenerateColumns="False">

        <telerik:RadGridView.Columns>

            <telerik:GridViewDataColumn Header="Name" DataMemberBinding="{Binding FullName}" />

            <telerik:GridViewDataColumn Header="Department" DataMemberBinding="{Binding Department}" />

            <telerik:GridViewDataColumn Header="Salary" DataMemberBinding="{Binding Salary}" DataFormatString="{}{0:C0}">

                <telerik:GridViewDataColumn.CellStyle>

                    <Style TargetType="{x:Type telerik:GridViewCell}" BasedOn="{StaticResource GridViewCellStyle}">

                        <Setter Property="Background" Value="Green"/>

                        <Style.Triggers>

                            <Trigger Property="IsSelected" Value="True">

                                <Setter Property="Background" Value="Red"/>

                            </Trigger>

                        </Style.Triggers>

                    </Style>

                </telerik:GridViewDataColumn.CellStyle>

            </telerik:GridViewDataColumn>

        </telerik:RadGridView.Columns>

    </telerik:RadGridView>

</Grid>

Download Telerik UI for WPF Free Trial

In case you are still up for some additional reading, here are two extra blogs on the WPF DataGrid:

• Breaking Down WPF Grid View vs. Virtual Grid
• How To Boost RadGridView Performance for WPF Using Lightweight templates