DxDataGrid<T>.RowPreviewTemplate Property

Specifies a template used to display row preview sections.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll

Declaration

[Parameter]
public RenderFragment<DataRowInfo<T>> RowPreviewTemplate { get; set; }

Property Value

Type Description
RenderFragment<DataRowInfo<T>>

The template content for an object of the DataRowInfo<T> type that provides information about the row (index and the corresponding data item). T is the data item type.

Remarks

Use the RowPreviewTemplate property to show preview sections under each data row across all columns. These sections can display any content, such as tables, images, values from data source fields, custom text, etc.

The template’s Context parameter has the following properties:

  • RowIndex - Returns a zero-based row index.
  • DataItem - Returns a data item that corresponds to the row.

When you define the row preview template, use the Columns property to add Data Grid columns.

The following example demonstrates how to display preview sections with employee images and multi-line notes.

<DxDataGrid Data="@DataSource">
    <Columns>
        <DxDataGridColumn Field="@nameof(Employee.FirstName)" SortOrder="DataGridColumnSortOrder.Ascending"></DxDataGridColumn>
        <DxDataGridColumn Field="@nameof(Employee.LastName)"></DxDataGridColumn>
        <DxDataGridColumn Field="@nameof(Employee.Position)" Caption="Position" EditorVisible="true"></DxDataGridColumn>
        <DxDataGridDateEditColumn Field="@nameof(Employee.BirthDate)" DisplayFormat="D" EditorFormat="d" 
              Caption="Birth Date" EditorVisible="true"></DxDataGridDateEditColumn>
        <DxDataGridDateEditColumn Field="@nameof(Employee.HireDate)" DisplayFormat="D" EditorFormat="d" 
              Caption="Hire Date" EditorVisible="true"></DxDataGridDateEditColumn>
    </Columns>
    <RowPreviewTemplate Context="ItemInfo">
        @{
            Employee employee = ItemInfo.DataItem;
            <table cellpadding="5" cellspacing="0">
                <tbody>
                    <tr>
                        <td rowspan="4" style="border: 0px;">
                            <img src="images/Employees/@(employee.FileName).png" width="76" />
                        </td>
                        <td style="border: 0px; white-space: normal;">
                            @employee.Notes
                        </td>
                    </tr>
                </tbody>
            </table>
        }
    </RowPreviewTemplate>
</DxDataGrid>

Data Grid Row Preview Template

Online Demo

See Also