Log In
[Expand]Welcome to DevExpress .NET Documentation
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Expand]Controls and Libraries
 [Collapse]Scaffolding Wizard
   Getting Started
  [Expand]Data Access Layer
   UI Generation
   [Collapse]Building Outlook-Inspired and Hybrid UI Applications
     Lesson 1 - Automatically Generate Outlook-Inspired and Hybrid User Interfaces From Entity Framework
     Lesson 2 - Show Splash Screen on the Start of the Application
     Lesson 3 - Customize Layout of the Collection Views
     Lesson 4 - Show Sparkline Charts in Grid Cells
     Lesson 5 - Use Cards Layout in Collection Views
     Lesson 6 - Use Master-detail Data Representation in Collection Views
     Lesson 7 - Using Conditional Formatting in Grid
     Lesson 8 - Add Advanced End-user Filtering Functionality to Applications
     Lesson 9 - Show Windows 8-style Toast Notifications
     Lesson 10 - Add Windows 7-style Jump List to the Application
     Lesson 11 - Add Custom Actions to Application's Taskbar Thumbnail
   [Expand]Building Office-Inspired Applications
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Report Server
[Expand]eXpressApp Framework
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Lesson 4 - Show Sparkline Charts in Grid Cells

In this lesson, you will learn how to create a custom data query for collection views, how to use this query to show sparklines in the main grid and how to show detail collections for the selected item outside the grid.

Expanded Step 1 - Customize the GridControl

Change the grid column layout for CustomerCollectionView in the DevExpress.HybridApp project, as described in the previous lesson.

Expanded Step 2 - Create custom data query

In addition to properties that are present in the Customer object, let's add two unbound properties:

  • TotalSales representing overall sales for a customer;
  • MonthlySales which is a collection of values representing monthly sales.

There are many ways to achieve this. For example, we can use the GridControl.CustomUnboundColumnData event to load the necessary data dynamically. This approach, however, has at least two serious drawbacks:

  • a lot of queries to the database will be performed, which may affect performance;
  • this does not comply with the MVVM paradigm, since we move a lot of logic to the view and make it control-dependent.

Let's perform this task on the view model level using the projections mechanism. This will allow us to utilize any visual control to represent data and use unit-tests during development.

Create a class with existing Customer's properties that should be shown in the grid and two additional unbound properties.

Note that this class contains the Id property that is not presented in the UI and which is necessary for the CollectionViewModel class to work with the CustomerInfo class as a projection type.

Create a helper method that creates the IQueryable<CustomerInfo> projection based on IQueryable<Customer>:

To make CustomerCollectionViewModel work with CustomerInfo as a projection type, specify it as an additional generic parameter in the base class and use the GetCustomerInfo helper method to pass a projection parameter:

Since the CustomerInfo property names match the corresponding properties in the Customer class, you do not need to change column field names.

Expanded Step 3 - Customizing summaries

Enable a total summary for the TotalSales property. In the designer view, select the grid, invoke the TotalSummary editor from Property Grid window, add a new GridSummary item and customize it as shown below:

Run the application.

Expanded Step 4- Adding Sparkline Column to the Grid

Select a grid, open its smart tag and click the Add Empty Column option.

Select the added column, open its smart tag, set the ColumnBase.FieldName property to MonthlySales, change the ColumnBase.EditSettings type to SparklineEditSettings, and set its BaseEdit.StyleSettings to BarSparklineStyleSettings.

Run the application.

Expanded Step 5- Adding Lazy Detail Collection to the Projection Type

Let's display customer stores for the selected customer under the grid. If you use the original Customer object in the CustomerCollectionViewModel, the solution is straightforward: just bind to the Customer.CustomerStores navigation collection. This is a lazy property, so stores for the customer are loaded only when the customer is selected in the grid and the CustomerStores property for this customer is accessed.

However, you are using the CustomerInfo projection type, so you need to add and assign this property manually:

This works, but all detail collections of customers stores are now loaded at once when querying to the IQueryable<CustomerInfo>. This causes performance issues because a lot of unnecessary data is loaded.

To avoid this behavior and load customer stores only for records that are selected by the customer, do the following.

Make the CustomerInfo.CustomerStores property lazy.

Provide a method that assigns a function to be used for obtaining customer stores to the collection of the CustomerInfo object:

The CollectionViewModel class provides a special virtual method that is called when one or many entities have been loaded from the database:

Now, you can use the CustomerInfo.CustomerStores collection in the UI and it will be loaded on demand.

Expanded Step 6 - Using SlideView Control to Display Detail Collections

Place the SlideView control from the property grid under the GridControl. Assign the following ItemTemplate and ItemContainerStyle to it:

Select the SildeView and open its smart tag. Set the SlideView.ShowBackButton property to false and bind the ItemsSource property to SelectedItem.CustomerStores using Binding Editor.

Run the application.

Expanded Result

Show Me

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=T196735.

Expanded See Also

Is this topic helpful?​​​​​​​