[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]ASP.NET WebForms Controls
 [Collapse]ASP.NET MVC Extensions
  [Expand]Product Information
  [Expand]Getting Started
  [Expand]Common Concepts
  [Collapse]Grid View
    Main Features
    [Expand]Binding to Data
    [Collapse]Data Representation Basics
       Traversing Rows
       Preview Row
      Customization Window
    [Expand]Data Shaping and Manipulation
    [Expand]Focus and Navigation
    [Expand]Data Editing and Validation
   [Expand]Visual Elements
   [Expand]Member Tables
  [Expand]Tree List
  [Expand]Card View
  [Expand]Pivot Grid
   Rich Text Editor
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Expand]Vertical Grid
  [Expand]Data Editors
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Extensions
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[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)

Preview Row

ASP.NET MVC GridView provides a preview feature that allows each data row to display preview rows. Preview rows are non-editable rows that allow large memo fields or custom data to be displayed across all columns within the GridView extension.

GridView displays preview rows if the ASPxGridViewSettings.ShowPreview (via GridViewSettings.Settings.ShowPreview) option is set to true. By default, these rows are empty. To supply data for them, specify the GridViewSettings.PreviewFieldName property. This property specifies the name of the data model field whose values are displayed within preview rows.


The code sample below demonstrates how to enable the preview rows, as demonstrated in the image above. In this sample, the preview row displays values from the "Notes" field of a bound data model.

Expanded Preview Row Customization


The style settings used to paint preview rows can be accessed and customized using the GridViewStyles.PreviewRow (via GridViewSettings.Styles.PreviewRow) property.


To create a custom layout for preview rows, create a template and assign it to the GridViewSettings.SetPreviewRowTemplateContent property.


The code sample below demonstrates how to show custom data via the preview rows. In this example, the preview rows display photos and notes for each employee from the demo database.

The image below illustrates the result.

Expanded See Also

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