[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications, and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Collapse]Data Grid
   [Collapse]Get Started With Data Grid and Views
     [Expand]Appearance and Conditional Formatting
     [Expand]Data Editing
     [Expand]Hit Information
     [Expand]Data Binding and Working with Columns
     [Expand]Grid View - Columns, Rows and Cells
     [Expand]Banded Views
     [Expand]WinExplorer View
     [Expand]Tile View
     [Expand]Filter and Search
     [Expand]Split Presentation
     [Collapse]Row Preview Sections
       Tutorial: Customize Row Preview Sections
       Tutorial: Row Preview Sections
   [Expand]Data Binding
    Unbound Columns
   [Expand]Data Editing and Validation
   [Expand]Filter and Search
   [Expand]Focus and Selection Handling
    Format Cell Values
   [Expand]Master-Detail Relationships
   [Expand]Asynchronous Image Load
   [Expand]Export and Printing
   [Expand]Appearance and Conditional Formatting
    Split Presentation
    Row Preview Sections
   [Expand]Batch Modifications
    Hit Information
    Popup Menus
   [Expand]Save and Restore Layout
   [Expand]Visual Elements
   [Expand]Design-Time Features
   [Expand]End-User Capabilities
    Included Components
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gantt Control
  [Expand]Chart Control
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Sunburst Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Tutorial: Customize Row Preview Sections

This walkthrough is a transcript of the Customize Row Preview Sections video available on the DevExpress YouTube Channel.

In this tutorial, you will learn how to customize the content and size of row preview sections using Grid View events. First, you will customize the text to include values from multiple data fields. Then, you'll specify the preview section height for individual sections based on their content. Finally, you will use a CustomDraw event to add images to previews.

Expanded Starting Point

Start with a grid control that has row preview sections enabled where you show values from the Description field.

Expanded Displaying Values from Multiple Data Fields

First, you'll see how you can extend these preview sections with values from two more fields – MPG City and MPG Highway.

At design time, access the Grid View's settings and write a handler for the GridView.CalcPreviewText event. Declare a separate CalculateMyPreviewText method that obtains the data row using the CalcPreviewTextEventArgs.RowHandle parameter and then obtains values of three fields: MPG City, MPG Highway and Description. If the description is empty then the method simply returns an empty string. Otherwise, it returns a string that combines values from all three fields.

Call this method in the event handler to specify the CalcPreviewTextEventArgs.PreviewText parameter value and thus customize the text to be displayed.

When you run the application, you'll see that only the first string is displayed, since the grid will not calculate the preview height automatically for custom text.

Set the GridView.PreviewLineCount property to 5 to see that the Description field values are also displayed.

Expanded Specifying Height for Individual Preview Sections

All preview sections reserve space for 5 lines of text, even if it's not needed. Even if the preview text is empty, the empty space is still displayed.

To fix this, close the application and write a handler for the Grid View's GridView.MeasurePreviewHeight event. If the Description field value is an empty string, the code sets the height to 0. Otherwise, the height is set to the height of the image in that row using the yet undefined GetRowImage function.

Then, define this function so that it obtains the Bitmap from the Image field in the specified row.

Run the application. You'll see that all preview sections containing text display more than one row by default. Rows that have empty Description field values don't show previews.

Expanded Adding Images to Preview Sections

Now add images. Return to design time and handle the GridView.CustomDrawRowPreview event. The GetImage method that you used to calculate the preview height will obviously be useful here too. The obtained image is drawn using the CustomDrawEventArgs.Cache parameter.

Then, calculate the rectangle where the text will be painted. The left top corner is initialized, taking into account the image width and an additional 20 pixel offset. The rectangle's width is also adjusted to fit the image.

The next step is to obtain the text, which is done using the CalculateMyPreviewText method declared in the beginning of this tutorial and used in the GridView.CalcPreviewText event. Finally, specify the trimming style and draw the text. Set CustomDrawEventArgs.Handled to true to disable default painting.

Run the application to see the result. You can now hide the columns that display the same information as shown in row preview sections.

Expanded See Also

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