DxTreeListDataColumn.CellEditTemplate Property
Allows you to replace an automatically generated editor with custom content in the column’s edit cell.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v24.2.dll
NuGet Package: DevExpress.Blazor
Declaration
[Parameter]
public RenderFragment<TreeListDataColumnCellEditTemplateContext> CellEditTemplate { get; set; }Property Value
| Type | Description |
|---|---|
| RenderFragment<TreeListDataColumnCellEditTemplateContext> | The template for the data column’s edit cell. |
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 the column’s EditSettings property to customize the default column editor or replace it with another editor.
The column’s CellEditTemplate allows you to display custom content in the data column’s 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.
The following code snippet displays a date editor with custom command buttons in an edit cell:
@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="DueDate">
<CellEditTemplate>
@{
var task = (EmployeeTask)context.EditModel;
}
<DxDateEdit @bind-Date="@task.DueDate">
<Buttons>
<DxEditorButton IconCssClass="editor-icon editor-icon-chevron-left-small"
Tooltip="Previous date"
Position="@EditorButtonPosition.Left"
Click="@(_ => task.DueDate = task.DueDate.AddDays(-1))" />
<DxEditorButton IconCssClass="editor-icon editor-icon-chevron-right-small"
Tooltip="Next date"
Position="@EditorButtonPosition.Right"
Click="@(_ => task.DueDate = task.DueDate.AddDays(1))" />
</Buttons>
</DxDateEdit>
</CellEditTemplate>
</DxTreeListDataColumn>
</Columns>
</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);
}
}
Refer to the following topic for more information: Templates in Blazor TreeList.