Telerik WPF DataGrid

This blog post will walk you through some of the most popular features of the Telerik WPF DataGrid and why it’s a great option to consider for your current or future projects.

DataGrids, Grids, GridViews. They can be found in just about every application that presents data. And for a good reason. Data displayed in a table with rows and columns is both easy to read and meaningful. People are so used to working with Excel-like spreadsheets that they expect to find the same functionalities in everything that resembles one, which holds true to most desktop applications and line-of-business ones in particular. Precisely, for that reason, presenting data in grids can be challenging for any application and the developer behind it.

Let’s examine one scenario. Let’s say you are building a desktop application for the finance or healthcare industry. You or your dev team has created the perfect architecture for your WPF app. You are using DI, MVVM, IoC. You get the data from a web service, from the cloud or from a database, local or remote and process it in a testable and maintainable way. That’s what your developers are good at and have done many times.

But here comes the hard part: presenting that data to the user in a meaningful way, while also providing a great UI and user experience. This can be challenging and even the best can struggle. In the end, the end users of your application, honestly, don’t care what architecture you have used as long as the app can get the job done - you just need to present the data in a clear, visual and easy to understand way. So, if you are in a situation where you want to display your data in a grid, read along - you’ve come to the right place. 

The DataGrid in Progress Telerik UI for WPF is a powerful and easy-to-use grid. We're going to cover a lot of ground in this post - feel free to read from the top or to skim to the feature that captures your interest.

Table of Contents

Creating Columns

For the basis of a WPF datagrid we need rows and columns. Rows are obvious - they represent the objects in your data source. Columns on the other hand represent the properties of those objects. Most datagrids support automatic column generation. This feature allows you to show your data with minimal to no configuration. It is great for simple scenarios, or for situations in which the shape of data that will be presented is determined at runtime. Controlling the generated columns can be done using either the familiar Display attribute or the RadGridView AutoGeneratingColumn event. The latter gives you complete control over the generated columns and the generation process itself.

If you need more control over what and how your columns get presented, you can define them manually. With the Telerik WPF DataGrid solution you have several different kinds of columns at your disposal: data, expression, checkbox, combobox, image, masked input, hyperlink. You can do quite a lot using those. And if you need something more, you can always define your own cell template. You have control over the column header and footer as well, so you can put things like images in the column header or add some text to the column footer. One feature that is very useful is column aggregates. With that feature you can add aggregate functions like min, max, sum, avg to the contents of your column and display the results in the column footer.

GridViewColumns

Grouping Your Data

Grouping your data is a very powerful and useful feature. Making it easy and user friendly is one of the key features of the Telerik WPF DataGrid. Your users can easily group the data by simply dragging the desired column to the group panel. Multiple grouping is supported as well.

GridViewGrouping

Remember column aggregates? Well, when the data gets grouped, the aggregate functions work as well, giving you aggregate information about each group. This is built-in behavior and all you need to do to enable it is add aggregate functions to your columns and group your data.

GridViewGroupingAggregates

One more thing. Because of the complexity, grouping a large data set on more than one level can lead to some performance issues. The Telerik DataGrid knows that and has a special kind of rendering for these kinds of situations. It is called flat group rendering mode and it is controlled by the GroupRenderMode property. It simply renders rows one below the other instead of nesting them on many levels.

Let’s Not Forget Sorting

This is pretty intuitive for any scenario. Customers are used to clicking on the column header and expect to find the familiar sort direction arrow, and they take it for granted that every datagrid should do it, whether for web, desktop or mobile. Of course, Telerik grids support column sorting and it works in the usual way. But there is more. When your data is grouped you can change the sort direction of each group individually, and in addition, you can sort the data in each group by another column. This is indicated by the arrows shown in the group buttons appearing in the group panel and in the column headers, as can be seen in the screenshots I have added above. Sorting by more than one column is supported as well, so you can get that much more insight into your data.

The All-Mighty Filtering

One of my favourite built-in features is the column filtering (even though, I must admit, I am a bit biased 😊). The user can filter the presented data by their own criteria and this is especially useful in large and complex data sets. By default, all data bound columns have filtering enabled on them. You can opt-out of this behaviour by disabling it if you feel that filtering on this column is not necessary. The filter window itself closely resembles what can be found in pretty much any spreadsheet processing tool.

GridViewFiltering

The filter for a given column picks up all the distinct values that are present in your data set for that particular column. The user can filter by simply selecting a specific value or values using the checkboxes. Advanced filter expressions are also supported. You can do filter expressions that check if the values in your columns start with a specific string value, or is greater, equal, lesser than or between given values. The possibilities are endless here and it is all done automatically for you and out of the box. The consumer of your data, when it is presented in a Telerik datagrid, has all the filtering power they need.

Paging for Larger Datasets

Sometimes you just have too much data for the user to grasp at once. One popular solution is to use paging. Telerik UI for WPF has you covered with a special component made specifically for this purpose - the RadDataPager. It works in close cooperation with the DataGrid and it is a breeze to setup and configure, as you can see in this code snippet.

GridViewPages

Controlling the appearance and paging options starts with the DisplayMode property. It is of type PagerDisplayModes flag enumeration, and its members control what is displayed by the pager. You can also control the size of the page, which is the number of items displayed at once on the screen.

One nice thing about separating the component that does the paging from the DataGrid is that you can use the data pager with other components, like ListView, ComboBox or even charts. This can be helpful when building a dashboard, for example.

Row Details

When you have a lot of information and you can’t display it all using just columns, then maybe you can show that information in a row detail. Each WPF datagrid row is capable of presenting additional information if the form of a row detail. The advantage of this approach is that it can be configured to be displayed only when the row gets selected. This can reduce the number of columns and give your data grid a neater and more compact layout, while still providing all the information the user needs. You can also show the row details at all times, regardless if the row is selected or not, if you prefer.

GridViewRowDetails

Configuring the row detail is done through the row details template. You have complete freedom with regard to what you put in there. You can display text, put in charts or even other datagrids. The possibilities are endless.

Exporting to Various Formats

One of the benefits of using the Telerik UI for WPF toolkit is that you are stepping on the shoulders of giants. There is already an excellent document processing library that has been developed for Telerik tools, and of course it is well integrated into the Telerik WPF DataGrid. The data that is presented by the grid can be exported to many different formats for different applications, including Microsoft Excel (both xlsx and xls format are supported), and exporting to PDF and HTML is also possible. It all comes straight out of the box. You can customize it too.

One other way of exporting data is using the clipboard. The RadGridView supports both copying and pasting data from and to the clipboard and is very flexible in doing so. You have the option to copy the cells with or without the headers, footers, empty rows and columns.

Hierarchical Grid

Sometimes your data can be hierarchical with a parent - child relationship. Extending our current sample data, we can display the employees our managers are managing. The RadGridView can display such data using a nested datagrid.

GridViewNested

Note that the nested grid is a full blown RadGridView. The hierarchical support for the DataGrid handles self-referencing data sets as well. So, if your data has a ParentID relationship for example, your data is good to go. If not all of your data is forming a hierarchy you can hide or show the row expander icons by binding it directly to your data.

This feature can be useful in situations in which your data is truly hierarchical in nature and drilling down makes sense. This can also reduce the cluttering and data overflow in large data sets. When combined with lazy loading it can lead to performance improvements as well, because you will be fetching only the data you are actually showing on the screen.

Managing Data

Displaying data is great, but the Telerik grid also allows you to modify the data it is presenting. You can do insert, update and delete with validation and everything. In order to enable it you need to flip a few switches and you are good to go. Make sure to be sure your collection is not read-only and that the type of objects in your data set have a public default constructor.

GridViewEditing

This feature can be useful in some scenarios when your data set is not too complex. Another use case can be when you want to allow the user to edit values of particular cells without the hustle of opening up other views and filling up lengthy forms.

Theming

Last but definitely not least, your data is just a bunch of numbers without a beautiful and modern looking UI. There are plenty of readily available themes you can apply to the RadGridView and any Telerik component for that matter. These are two of my favorite themes, the Material and Fluent themes. In the screenshots above you can see the Windows 8 theme, another great one.

GridViewTheme1

GridViewTheme2

Applying a theme is a breeze. Just reference the theme that you desire and merge its resources in your App.xaml file. Why the merge? Because Telerik NoXaml assemblies, which are the recommended ones, have no Xaml files inside of them. In order to give your WPF DataGrid appearance, you have to reference a theme and merge the resources in your application. This separation allows for the packing of theme dependent resources in different assemblies and reduces the overall size of dependencies and your application, because you are only referencing what you actually need.

Another benefit of the NoXaml assemblies is that you can customize the built-in themes very easily. You can change absolutely anything, starting from a color to completely retemplating the whole component. When you just need to give a specific component some style you will be pleased to know that there are many different APIs for doing that. There will be a dedicated blog post on styling and theming coming soon.

Summary

DataGrids are widely popular and are often part of a project's requirements. Should you face such a decision consider the DataGrid in Telerik UI for WPF, as I have personally tested it extensively and can assure you that it is a very powerful and versatile component for visualizing data in a table-like fashion. It is a great tool for displaying your data and making decisions based on your data. Above I have outlined some of the key features that customers love and seek when they work with DataGrids. I hope you find this useful and decide for yourself whether the Telerik DataGrid is suitable for your scenario.

This is the first blog post in our new series dedicated to the DataGrid in the Telerik WPF library. Next time I am going to show you how to load your grid with data, since grids are all about data. And of course, we are going to do that in MVVM way. So, stay tuned. Also, let me know in the comments what topic about grid view you want to see. Until next time, happy coding!


Yavor Ivanov
About the Author

Yavor Ivanov

Yavor is a senior software developer on the Telerik UI for Xamarin team. His 10+ years of XAML and WPF experience were gained in the Telerik UI for WPF and Silverlight suite as well as many LoB applications. His workday is a mixed bag of Xamarin, WPF and Angular development. Finding the right solution for the job is his main goal. You can find him on GitHub.

Related Posts

Comments

Comments are disabled in preview mode.