Log In
[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
    Overview - GridView
    Main Features - GridView
    [Expand]Binding to Data
    [Collapse]Data Representation Basics
       Traversing Rows
       Preview Row
      Customization Window
    [Expand]Focus and Navigation
    [Expand]Data Editing and Validation
    [Expand]Export Overview
   [Expand]Visual Elements
  [Expand]Card View
  [Expand]Vertical Grid
  [Expand]Rich Text Editor
  [Expand]HTML Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Expand]Navigation and Layout Extensions
  [Expand]File Management
  [Expand]Multi-Use Site Extensions
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Data Editor Extensions
  [Expand]Report Extensions
 [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]Document Server
[Expand]Report Server
[Expand]eXpressApp Framework
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

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

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