Cell Editors in Blazor TreeList
- 6 minutes to read
The TreeList component generates and configures cell editors for individual columns based on associated data types. The component displays these cell editors in the filter row and edit cells. You can display an automatically generated column editor in the edit or pop-up edit form.
This topic describes how to customize cell editors displayed during edit operations. For more information about filter row cell editors, refer to the following help topic: Filter Row Editor Settings.
Configure Cell Editors
You can declare an object that contains editor settings in the DxTreeListDataColumn.EditSettings property to customize the default editor or replace it with another editor. If the editor does not support the associated data type, the TreeList uses a read-only text box instead. The table below lists classes that define cell editor settings and the corresponding data types:
Editor Settings | Generated for Data Types | Supported Data Types |
|---|---|---|
All data types | ||
All data types | ||
Never generated | Numeric, String, TimeSpan, TimeOnly, | |
Never generated | ||
The following code snippet customizes settings of an automatically generated spin editor:
<DxTreeList Data="TreeListData" KeyFieldName="Id" ParentKeyFieldName="ParentId" ShowFilterRow="true">
<Columns>
<DxTreeListCommandColumn />
<DxTreeListDataColumn FieldName="Id">
<EditSettings>
<DxSpinEditSettings ShowSpinButtons="false" ReadOnly="true" NullText="Type the ID" />
</EditSettings>
</DxTreeListDataColumn>
<DxTreeListDataColumn FieldName="Name" Caption="Task" />
<DxTreeListDataColumn FieldName="EmployeeName" />
<DxTreeListDataColumn FieldName="StartDate" />
<DxTreeListDataColumn FieldName="DueDate" />
</Columns>
</DxTreeList>
At runtime, handle the CustomizeDataRowEditor event to customize a data row editor separately from the filter row editor. Call the GetColumnEditSettings method to access and customize editor settings.
Cell Edit Template
A 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 and DataItem objects. The context’s TreeList property allows you to access the TreeList and its extensive API.
Note
When you place a templated component in the edit cell template, a Razor error may occur. To prevent this error, specify the Context parameter explicitly either for the TreeList template or for the nested component.
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);
}
}