DxDataGridColumn.DisplayTemplate Property

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll

Declaration

[Parameter]
public RenderFragment<object> DisplayTemplate { get; set; }

Property Value

Type	Description
RenderFragment<Object>	The template content.

Remarks

The DisplayTemplate property allows you to specify custom content for column cells. Use the template’s context parameter to access a data object and its fields (for instance, you can get a data field value).

Use the EditTemplate property to define a template for a column editor. If you do not specify the edit template, the column uses a standard editor based on the column type.

The code below demonstrates how to use these properties for the Availability column:

• The display template uses checkboxes and colored text to visualize column values.
• The edit template embeds a ComboBox into the edit form and updates a bound field’s value.

<DxDataGrid Data="@DataSource">
    <DxDataGridColumn Field="@nameof(Product.Availability)" Caption="Availability">
        <DisplayTemplate>
            @{
                var id = Guid.NewGuid().ToString();
                var inStock = (context as Product).Availability;
                <input id="@id" type="checkbox" checked="@inStock" disabled readonly />
                if (inStock) {
                    <label class="form-check-label text-success" for="@id"><span>In stock</span></label>
                }
                else {
                    <label class="form-check-label text-danger" for="@id"><span>Sold out</span></label>
                }
            }
        </DisplayTemplate>
        <EditTemplate>
            <DxComboBox Data="@(new List<string>() { "In stock", "Sold out" })"
                        Value="@(((bool)((CellEditContext)context).CellValue) ? "In stock" : "Sold out" )"
                        ValueChanged="@((string newCellValue) => ((CellEditContext)context).OnChanged(newCellValue == "In stock"))">
            </DxComboBox>
        </EditTemplate>
    </DxDataGridColumn>
</DxDataGrid>

Online Demo

• Data Grid - Templates