Skip to main content

DxDataGridColumn.EditTemplate Property

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

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.1.dll

Declaration

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

Property Value

Type Description
RenderFragment<Object>

The template content.

Remarks

Important

The Data Grid was moved to maintenance support mode. No new features/capabilities will be added to this component. We recommend that you migrate to the Grid component.

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).

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

The code below demonstrates how to use these properties for the Details column. The display template shows the More Info… links. Users can click these links to view details about data rows in a pop-up window. The edit template embeds the Memo component into the edit form.

<DxDataGrid Data="@DataSource"
            RowRemovingAsync="@OnRowRemovingAsync"
            RowUpdatingAsync="@OnRowUpdatingAsync"
            RowInsertingAsync="@OnRowInsertingAsync"
            RowEditStart="@(dataItem => OnRowEditStarting(dataItem))"
            RowInsertStart="@(() => OnRowEditStarting(null))">
    <Columns>
        <DxDataGridCommandColumn Width="120px" />
        <DxDataGridColumn Field="FirstName" />
        <DxDataGridColumn Field="LastName" />
        <DxDataGridColumn Field="Title" />
        <DxDataGridColumn Field="@nameof(Employee.TitleOfCourtesy)" Width="150px" />
        <DxDataGridDateEditColumn Field="BirthDate" Width="150px" />
        <DxDataGridDateEditColumn Field="HireDate" Width="150px" />
        <DxDataGridColumn Field="Details" AllowSort="false" Width="90px">
            <DisplayTemplate><a class="d-block text-left" href="javascript:;" @onclick="() => ShowDetails(context as Employee)">More Info...</a></DisplayTemplate>
            <EditTemplate>
                <DxMemo @bind-Text="@EditEmployeeNotes" Rows="5" />
                <div class="text-muted pt-1" style="font-size:0.8em">Details should be 4 to 256 characters</div>
            </EditTemplate>
        </DxDataGridColumn>
    </Columns>
</DxDataGrid>
<DxPopup @bind-Visible="@PopupVisible"
         HeaderText="@PopupHeaderText"
         HorizontalAlignment="HorizontalAlignment.Center"
         VerticalAlignment="VerticalAlignment.Center">
    @PopupContent
</DxPopup>

@code {
    IEnumerable<Employee> DataSource { get; set; }
    string EditEmployeeNotes { get; set; }
    Employee CurrentEmployee { get; set; }
    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 : ""; }
    }
    protected override async Task OnInitializedAsync() {
        DataSource = await NwindDataService.GetEmployeesEditableAsync();
    }
    public void ShowDetails(Employee context) {
        CurrentEmployee = context;
    }
    void OnRowEditStarting(Employee employee) {
        EditEmployeeNotes = employee?.Notes;
    }
    async Task OnRowRemovingAsync(Employee dataItem) {
        await NwindDataService.RemoveEmployeeAsync(dataItem);
        DataSource = await NwindDataService.GetEmployeesEditableAsync();
        StateHasChanged();
    }
    async Task OnRowUpdatingAsync(Employee dataItem, IDictionary<string, object> newValues) {
        newValues.Add(nameof(Employee.Notes), EditEmployeeNotes);
        await NwindDataService.UpdateEmployeeAsync(dataItem, newValues);
        DataSource = await NwindDataService.GetEmployeesEditableAsync();
        StateHasChanged();
    }
    async Task OnRowInsertingAsync(IDictionary<string, object> newValues) {
        newValues.Add(nameof(Employee.Notes), EditEmployeeNotes);
        await NwindDataService.InsertEmployeeAsync(newValues);
        DataSource = await NwindDataService.GetEmployeesEditableAsync();
        StateHasChanged();
    }
}

DataGrid Display And Edit Templates

In the example above, the Data Grid re-binds the source collection each time a user adds, edits, or removes data rows.

If you have complex dependencies between editors in the edit form, call the OnChanged method to inform editors about changes in each other and save new cell values to the EditedValues collection. The grid passes this collection to the RowUpdating and RowInserting events where you should save the changes in the data source.

Run Demo: Data Grid - Templates

See Also