DxGrid.DataColumnCellEditTemplate Property
Specifies a common template used to display all edit row cells in the Grid data columns.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v22.1.dll
NuGet Package: DevExpress.Blazor
Declaration
[Parameter]
public RenderFragment<GridDataColumnCellEditTemplateContext> DataColumnCellEditTemplate { get; set; }
Property Value
Type | Description |
---|---|
RenderFragment<GridDataColumnCellEditTemplateContext> | The common template for data column edit cells. |
Remarks
Users can employ an inline edit row or invoke a standard or pop-up edit form to edit data in the Grid. The EditMode property specifies the current edit mode.
In EditRow
mode, specify the DataColumnCellEditTemplate
to define the common template for Grid edit row cells. To define a cell edit template for an individual data column, use the column’s CellEditTemplate property.
Use the template’s context parameter to access the DataColumn and DataItem objects. You can also obtain the Grid object and call the edit-related methods (for example, SaveChangesAsync() or CancelEditAsync()).
The code below activates EditRow mode and defines a common DataColumnCellEditTemplate
for Grid edit row cells. Within the template, the ValidationMessage
custom component is used to display row editors and their validation errors. To select an individual editor for each column, the switch
statement is used.
@inject NwindDataService NwindDataService
<DxGrid @ref="Grid"
Data="DataSource"
PageSize="12"
KeyFieldName="EmployeeId"
EditModelSaving="Grid_EditModelSaving"
DataItemDeleting="Grid_DataItemDeleting"
PopupEditFormCssClass="pw-800"
EditMode="GridEditMode.EditRow">
<Columns>
<DxGridCommandColumn Width="140px" />
<DxGridDataColumn FieldName="FirstName" MinWidth="80" />
<DxGridDataColumn FieldName="LastName" MinWidth="80" />
<DxGridDataColumn FieldName="Title" MinWidth="100" />
<DxGridDataColumn FieldName="TitleOfCourtesy" MinWidth="120" />
<DxGridDataColumn FieldName="BirthDate" Width="10%" MinWidth="80" />
<DxGridDataColumn FieldName="HireDate" Width="10%" MinWidth="80" />
</Columns>
<DataColumnCellEditTemplate>
@{
var employee = (EditableEmployee)context.EditModel;
}
<Grid_Editing_EditRowValidation_ValidationMessage EditTemplateContext="context">
@switch(context.DataColumn.FieldName) {
case "FirstName":
<DxTextBox @bind-Text="@employee.FirstName" CssClass="w-100" />
break;
case "LastName":
<DxTextBox @bind-Text="@employee.LastName" CssClass="w-100" />
break;
case "Title":
<DxTextBox @bind-Text="@employee.Title" CssClass="w-100" />
break;
case "TitleOfCourtesy":
<DxTextBox @bind-Text="@employee.TitleOfCourtesy" CssClass="w-100" />
break;
case "BirthDate":
<DxDateEdit @bind-Date="@employee.BirthDate" CssClass="w-100" />
break;
case "HireDate":
<DxDateEdit @bind-Date="@employee.HireDate" CssClass="w-100" />
break;
default:
throw new NotImplementedException();
}
</Grid_Editing_EditRowValidation_ValidationMessage>
</DataColumnCellEditTemplate>
</DxGrid>
@code {
IEnumerable<EditableEmployee> DataSource { get; set; }
IGrid Grid { get; set; }
protected override async Task OnInitializedAsync() {
DataSource = await NwindDataService.GetEmployeesEditableAsync();
}
protected override async Task OnAfterRenderAsync(bool firstRender) {
if(firstRender)
await Grid.StartEditNewRowAsync();
}
async Task Grid_EditModelSaving(GridEditModelSavingEventArgs e) {
var editableEmployee = (EditableEmployee)e.EditModel;
if(e.IsNew)
await NwindDataService.InsertEmployeeAsync(editableEmployee);
else
await NwindDataService.UpdateEmployeeAsync((EditableEmployee)e.DataItem, editableEmployee);
await UpdateDataAsync();
}
async Task Grid_DataItemDeleting(GridDataItemDeletingEventArgs e) {
await NwindDataService.RemoveEmployeeAsync((EditableEmployee)e.DataItem);
await UpdateDataAsync();
}
async Task UpdateDataAsync() {
DataSource = await NwindDataService.GetEmployeesEditableAsync();
}
}