DxGrid.DataColumnCellDisplayTemplate Property

Specifies a common template used to display all data column cells in the Grid.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll

Declaration

[Parameter]
public RenderFragment<GridDataColumnCellDisplayTemplateContext> DataColumnCellDisplayTemplate { get; set; }

Property Value

Type Description
RenderFragment<GridDataColumnCellDisplayTemplateContext>

The template for all data column cells.

Remarks

The DataColumnCellDisplayTemplate allows you to specify custom content and change the appearance of cells in all Grid data columns. To define a template for individual Grid data columns, use the DxGridDataColumn.CellDisplayTemplate.

The DataColumnCellDisplayTemplate accepts a GridDataColumnCellDisplayTemplateContext object as the context parameter. You can use the parameter’s members to get information about a column cell (DataColumn, Value, DisplayText, VisibleIndex). You can also access the Grid object and use its members to obtain additional information about the Grid.

The following example customizes appearance of column cells to distinguish between odd and even rows:

@using Grid.Northwind
@inject NorthwindContext Northwind

<style>
    .my-style {
        color: blue;
        font-weight: bold;
    }
    .my-date-style {
        color: mediumblue;
        font-weight: bold;
    }
</style>

<DxGrid Data="@Data">
    <Columns>
        <DxGridDataColumn FieldName="FirstName" />
        <DxGridDataColumn FieldName="LastName" />
        <DxGridDataColumn FieldName="Title" />
        <DxGridDataColumn FieldName="BirthDate" />
        <DxGridDataColumn FieldName="HireDate" />
    </Columns>
    <DataColumnCellDisplayTemplate>
        @{
            if (context.VisibleIndex % 2 == 1) {
                if (context.DataColumn.FieldName.Contains("Date")) {
                    <span class="my-date-style">@context.DisplayText</span>
                } else {
                    <span class="my-style">@context.DisplayText</span>
                }
            } else {
                <span>@context.DisplayText</span>
            }
        }
    </DataColumnCellDisplayTemplate>
</DxGrid>

@code {
    IEnumerable<Employee> Data { get; set; }
    Employee CurrentEmployee { get; set; }

    protected override void OnInitialized() {
        Data = Northwind.Employees
            .ToList();
    }
}

Blazor Grid Column Cell Display Template

See Also