[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: Row Preview Sections

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

This tutorial shows how to enable the row preview sections, which is a common feature in email clients, including Microsoft Outlook. You will learn how to manually change their height and text indents, and how to enable automatic height calculation so that the text is completely displayed without being truncated.

Expanded Starting Point

Start with an application that has a grid control displaying lengthy text data in one of its columns. As you can see, the values get truncated even though the cells are wide.

Expanded Enabling Preview Sections

One way to optimize the layout is to enable row preview sections. At design time, select the grid View, then expand GridView.OptionsView and enable the GridOptionsView.ShowPreview option. You will also need to set the GridView.PreviewFieldName property to the field containing lengthy text data.

When you run the application, you will see that there's now a row preview section under each row displaying the values from the Description field.

Expanded Preview Section Indent

Grid View properties allow you to customize the offset on the left using the GridView.PreviewIndent property.

Expanded Preview Section Height

The GridView.PreviewLineCount property allows you to display more than one line of text preview sections. Set it to 3.

You'll see that it's more than sufficient for certain rows but still not enough to fully display others. Even if the field value is empty for a certain row, the specified 3 lines of text will still be reserved.

To remove unnecessary empty lines and empty preview sections, go to View settings, expand GridView.OptionsView and enable the GridOptionsView.AutoCalcPreviewLineCount property. As you can see, the preview section still displays no more than 3 lines of text, but they are also automatically adjusted based on their value to eliminate white space.

If you set the GridView.PreviewLineCount property back to its default value of -1, you will cancel the 3 line limit and the preview section will be as high as required to fit the entire text.

You'll have memo fields displayed completely and more space in data rows for other columns.

Expanded See Also

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