[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
  Prerequisites
 [Expand]What's Installed
 [Expand].NET Core 3 Support
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Expand]Controls and Libraries
 [Collapse]Scaffolding Wizard
   Getting Started
  [Expand]Overview
  [Expand]Data Access Layer
   UI Generation
  [Expand]Examples
  [Collapse]Tutorials
   [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
 [Expand]Localization
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Lesson 3 - Customize Layout of the Collection Views

In this lesson, you will learn how to customize the GridControl layout in collection views. The steps below describe how to customize the OrderCollectionView from the DevExpress.OutlookInspiredApp project. Other collection views can be customized in a similar manner.

Expanded Step 1 - Remove Unnecessary Columns

Open the Views/Order/OrderCollectionView.xaml file and run the designer. The GridControl definition contains columns generated by Scaffolding Wizards. The columns are bound to all properties that are available in the corresponding data type.

Let's remove the following columns to simplify the view: PONumber, Employee, SaleAmount, ShippingAmount, ShipDate and OrderTerms. To do this, select a column to remove (the column header is highlighted) and press the Delete key, or right-click a column and select the corresponding context menu item as shown below.

Expanded Step 2 - Remove the Horizontal Scroll Bar

Even though the number of columns has decreased, you can improve the column layout further. The GridControl supports the TableView.AutoWidth option. If this option is enabled, column widths are automatically calculated to fill the available space within GridControl. Open the GridControl smart tag and set the TableView.AutoWidth property to true in the View category.

Expanded Step 3 - Change Column Header Captions

To change a column header caption, select a column and use the Header property editor in the smart tag.

Do it for all columns to achieve the following layout.

Expanded Step 4 - Sorting Records

Records in the GridControl should be ordered by the InvoceNumber column. The simplest way to do this is to enable sorting for the corresponding grid column. Click the “INVOICE #” column once or twice to sort by the column in ascending or descending mode respectively. To disable sorting, press and hold the Ctrl key and click the column.

This is the fastest, but a grid-level approach to sorting records. In this tutorial, you will learn how to sort records at the data query level in view models. This is a universal method that will work with any control.

To achieve this, let's use the projections mechanism. Change the base constructor invocation in the OrderCollectionViewModel as follows:

The last projection parameter transforms the LINQ query used by the view model to obtain records so that records are ordered by the InvoceNumber property.

Expanded Step 5 - Optimizing the Data Query

If you scroll the GridControl through the records, you may notice some sluggishness in the UI. To diagnose this, let's review what queries to the database are performed by the OrderCollectionView module. To do this, open the DevAVDb.cs file. This file contains the DevAVDb class that is a DbContext class descendant describing the database context. Modify its constructor to log query operations.

Run the application, clear the Visual Studio Output window, and switch to the Sales tab. You will notice that along with the main query that fetches all records ordered by the InvoiceNumber...

... there are a lot of queries like the one below.

Scrolling the grid causes more queries to be called. Let's take a look at the following grid columns within the OrderCollectionView:

They refer to the Order.Customer and Order.Store navigation properties:

By default, navigation properties in Entity Framework are lazy, i.e., they are loaded on demand. It means that two separate queries to the database will be performed for each row displayed in the GridControl until all Customer and CustomerStore records are fetched. This may not cause significant performance problems when developing and debugging the application with a local database server. However in the real environment, when the ping time to a server is noticeable, this may cause serious performance drawbacks. To fix this, include navigation properties into the projection query.

Now, only one query is performed when switching to the Sales module.

The performance issue has been fixed. However, there is still room for improvement: a lot of unnecessary fields are fetched from the database. In the real environment, as the amount of orders grows, performance may once again degrade. This can be handled by using a separate projection type that includes only necessary properties. This approach will be described in the next lesson.

Expanded Step 6 - Customizing Other Collection View Modules

Follow the previously described steps to improve the ProductCollectionView module in the DevExpress.OutlookInspiredApp project.

The result should look like the following.

Do the same for the OrderCollectionView module in the DevExpress.HybridApp project.

Applications that contain the result of this lesson are available here: DevExpress.OutlookInspiredApp and DevExpress.HybridApp.

Expanded See Also

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