Skip to main content

Tutorial: Row Preview Sections

  • 2 minutes to read

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.

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.

GridRowLayout_ColumnWithLengthyText

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.

GridRowLayout_ShowPreviewAndFieldName

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.

GridRowLayout_PreviewSections

Preview Section Indent

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

GridRowLayout_PreviewIndent

Preview Section Height

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

GridRowLayout_PreviewWith3Lines

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.

GridRowLayout_AutoCalcPreviewLineCount

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.

See Also