Preview Row

• Feb 02, 2023
• 2 minutes to read

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.

Example

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.

C#

@Html.DevExpress().GridView(settings => {
    settings.Name = "GridView";
    settings.CallbackRouteValues = new { Controller = "Home", Action = "GridViewPartial" };
    settings.SettingsPager.PageSize = 3;
    // Enable preview rows
    settings.Settings.ShowPreview = true;
    // Define the data model field that contains values displayed within preview rows.
    settings.PreviewFieldName = "Notes";

    settings.KeyFieldName = "EmployeeID";
    settings.Columns.Add("LastName");
    settings.Columns.Add("FirstName");
    settings.Columns.Add("City");
    settings.Columns.Add("Country");
}).Bind(Model).GetHtml()

Preview Row Customization

Styles

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

Templates

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

Example

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.

C#

@Html.DevExpress().GridView(settings => {
    settings.Name = "GridView";
    settings.CallbackRouteValues = new { Controller = "Home", Action = "GridViewPartial" };
    settings.SettingsPager.PageSize = 3;
    // Enable preview rows.
    settings.Settings.ShowPreview = true;
    settings.KeyFieldName = "EmployeeID";
    settings.Columns.Add("LastName");
    settings.Columns.Add("FirstName");
    settings.Columns.Add("City");
    settings.Columns.Add("Country");
    //Define the template content for the preview rows.
    settings.SetPreviewRowTemplateContent(content => {
        // Place BinaryImage in the <div> with the specified style settings.
        ViewContext.Writer.Write("<div style=\"float:left; padding:5px\">");
            // Bind BinaryImage to the "Photo" field.
            Html.DevExpress().BinaryImage(s => {
                s.Name = "bin" + DataBinder.Eval(content.DataItem, "EmployeeID").ToString();
                s.Width = 80;
            }).Bind((byte[])DataBinder.Eval(content.DataItem, "Photo")).Render();
        ViewContext.Writer.Write("</div>"); // <div ...>

        // Place Label in the <div> with the specified style settings.
        ViewContext.Writer.Write("<div style=\"padding:5px\">");
            // Bind Label to the "Notes" field.
            Html.DevExpress().Label(s => {
                s.Name = "label" + DataBinder.Eval(content.DataItem, "EmployeeID").ToString();
                s.Width = 500;
            }).Bind(DataBinder.Eval(content.DataItem, "Notes").ToString()).Render();
        ViewContext.Writer.Write("</div>"); // <div ...>
    });
    // Define the style for the preview rows.
    settings.Styles.PreviewRow.BackColor = System.Drawing.Color.FromArgb(247, 247, 247);    
}).Bind(Model).GetHtml()

The image below illustrates the result.