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.Grid.v26.1.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 customize cell editors using editor settings or a cell template. Choose between these options based your scenario:
| Task | Recommended Option |
|---|---|
| Display a standard cell editor[1] | Editor Settings |
| Customize standard editor appearance or behavior[1] | Editor Settings |
| Use any DevExpress or third-party component as a cell editor | Cell Edit Template |
| Implement advanced data binding | Cell Edit Template |
| Handle editor events | Cell Edit Template |
| Add custom buttons to an editor | Cell Edit Template |
| Focus an editor programmatically | Cell Edit Template |
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 additional information: Templates in Blazor TreeList.