DxTreeList.DataColumnCellEditTemplate Property
Allows you to replace automatically generated editors with custom content in all edit cells displayed for data columns.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v24.2.dll
NuGet Package: DevExpress.Blazor
#Declaration
[Parameter]
public RenderFragment<TreeListDataColumnCellEditTemplateContext> DataColumnCellEditTemplate { get; set; }
#Property Value
Type | Description |
---|---|
Render |
The common template for data column edit cells. |
#Remarks
In EditRow
and EditCell
edit modes, the TreeList displays automatically generated in-line editors in the edited row. Editor types depend on data types of the corresponding column fields. You can use a column’s EditSettings property to customize the default column editor or replace it with another editor.
A column’s CellEditTemplate allows you to display custom content in the column edit cell. To define a common cell edit template for all data columns, use the TreeList’s DataColumnCellEditTemplate
. Both templates include the context parameter that contains DataColumn, DataItem, and ParentDataItem objects. The context’s TreeList property allows you to access the TreeList and its extensive API.
Note
The TreeData
.
The following code snippet renders edit cell editors within the <div>
element when editor validation fails. Hover the mouse pointer over the element to display a tooltip with the corresponding validation message:
@inject EmployeeTaskService EmployeeTaskService
<DxTreeList Data="TreeListData"
KeyFieldName="Id"
ParentKeyFieldName="ParentId"
EditModelSaving="TreeList_EditModelSaving"
DataItemDeleting="TreeList_DataItemDeleting"
CustomizeEditModel="TreeList_CustomizeEditModel">
<Columns>
<DxTreeListCommandColumn />
<DxTreeListDataColumn FieldName="Name" Caption="Task" />
<DxTreeListDataColumn FieldName="EmployeeName" />
<DxTreeListDataColumn FieldName="StartDate" />
<DxTreeListDataColumn FieldName="DueDate" />
</Columns>
<DataColumnCellEditTemplate>
@{
var task = (EmployeeTask)context.EditModel;
}
<MyCustomValidationMessage EditTemplateContext="context">
@switch(context.DataColumn.FieldName) {
case "Name":
<DxTextBox @bind-Text="@task.Name" CssClass="w-100" ShowValidationIcon="false" />
break;
case "EmployeeName":
<DxTextBox @bind-Text="@task.EmployeeName" CssClass="w-100" ShowValidationIcon="false" />
break;
case "StartDate":
<DxDateEdit @bind-Date="@task.StartDate" CssClass="w-100" ShowValidationIcon="false" />
break;
case "DueDate":
<DxDateEdit @bind-Date="@task.DueDate" CssClass="w-100" ShowValidationIcon="false" />
break;
default:
throw new NotImplementedException();
}
</MyCustomValidationMessage>
</DataColumnCellEditTemplate>
</DxTreeList>
@code {
List<EmployeeTask> TreeListData { get; set; }
protected override void OnInitialized() {
TreeListData = EmployeeTaskService.GenerateData();
}
void TreeList_CustomizeEditModel(TreeListCustomizeEditModelEventArgs e) {
if (e.IsNew) {
var newTask = (EmployeeTask)e.EditModel;
newTask.Id = TreeListData.Max(x => x.Id) + 1;
if (e.ParentDataItem != null)
newTask.ParentId = ((EmployeeTask)e.ParentDataItem).Id;
}
}
async Task TreeList_EditModelSaving(TreeListEditModelSavingEventArgs e) {
if (e.IsNew)
TreeListData.Add((EmployeeTask)e.EditModel);
else
e.CopyChangesToDataItem();
}
async Task TreeList_DataItemDeleting(TreeListDataItemDeletingEventArgs e) {
TreeListData.Remove((EmployeeTask)e.DataItem);
}
}
For more information about templates in the TreeList component, refer to the following topic: Templates in Blazor TreeList.