DxDataGridColumn.EditTemplate Property

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

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll

Declaration

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

Property Value

Type Description
RenderFragment<Object>

The template content.

Remarks

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

When you use an edit template, you should call the OnChanged method to inform the Data Grid about changes and save new cell values to the EditedValues collection. Then, pass this collection to the RowUpdating and RowInserting events.

Use the DisplayTemplate property to specify a template that visualizes column cell values.

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>

DataGrid Display And Edit Templates

Online Demo

See Also