Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [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
   [Expand]Getting Started
   [Expand]Binding to Data
   [Collapse]Grid View
    [Expand]Columns and Card Fields
    [Expand]Rows and Cards
    [Expand]Row, Column and Cell Access API
    [Expand]Split Presentation
    [Expand]Cell Merging
    [Collapse]Row Preview Sections
      Preview Overview
      Tutorial: Customize Row Preview Sections
      Tutorial: Row Preview Sections
      Custom Preview Text
    [Expand]Scrolling
   [Expand]View Technology
   [Expand]Grouping
   [Expand]Sorting
   [Expand]Summaries
   [Expand]Data Editing
   [Expand]Filtering and Locating Rows
   [Expand]Focus and Selection Handling
   [Expand]Processing Rows
   [Expand]Formatting Cell Values
   [Expand]Master-Detail Relationships
   [Expand]Asynchronous Image Load
   [Expand]Export and Printing
   [Expand]Appearance and Conditional Formatting
   [Expand]Batch Modifications
   [Expand]Hit Information
   [Expand]Hints
   [Expand]Popup Menus
   [Expand]Saving and Restoring Layouts
   [Expand]Visual Elements
   [Expand]Design-Time Features
   [Expand]Examples
   [Expand]End-User Capabilities
    Included Components
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

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

How would you rate this topic?​​​​​​​