DxGridDataColumn.CellDisplayTemplate Property

Specifies a template used to display the column’s cells.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll

Declaration

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

Property Value

Type Description
RenderFragment<GridDataColumnCellDisplayTemplateContext>

The template for the column’s cells.

Remarks

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

The CellDisplayTemplate 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 displays the More Info… links in cells of a column bound to the EmployeeId field. Users can click these links to view details about data rows in a pop-up window.

@using Grid.Northwind
@inject NorthwindContext Northwind

<DxGrid Data="@Data">
    <Columns>
        <DxGridDataColumn FieldName="FirstName" />
        <DxGridDataColumn FieldName="LastName" />
        <DxGridDataColumn FieldName="Title" />
        <DxGridDataColumn FieldName="BirthDate" />
        <DxGridDataColumn FieldName="HireDate" />
        <DxGridDataColumn FieldName="EmployeeId" Caption="Details" AllowSort="false">
            <CellDisplayTemplate>
                <a class="d-block text-left" href="javascript:;" @onclick="() => ShowDetails(context)">More Info...</a>
            </CellDisplayTemplate>
        </DxGridDataColumn>
    </Columns>
</DxGrid>
<DxPopup @bind-Visible="@PopupVisible"
         HeaderText="@PopupHeaderText"
         HorizontalAlignment="HorizontalAlignment.Center"
         VerticalAlignment="VerticalAlignment.Center">
    @PopupContent
</DxPopup>

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

    protected override void OnInitialized() {
        Data = Northwind.Employees
            .ToList();
    }
    bool PopupVisible {
        get { return CurrentEmployee != null; }
        set { if(!value) CurrentEmployee = null; }
    }
    string PopupHeaderText {
        get { return CurrentEmployee != null ? CurrentEmployee.FirstName + " " + CurrentEmployee.LastName : ""; }
    }
    string PopupContent {
        get { return CurrentEmployee != null ? CurrentEmployee.Notes : ""; }
    }
    public void ShowDetails(GridDataColumnCellDisplayTemplateContext context) {
        CurrentEmployee = Data.Where(e => e.EmployeeId == (int)context.Value).FirstOrDefault();
    }
}

Blazor Grid Cell Display Template

Run Demo: Grid - Column Templates

Implements

See Also