DxTreeListCommandColumn.CellDisplayTemplate Property
Specifies a template used to display command column cells in display mode.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v24.2.dll
NuGet Package: DevExpress.Blazor
#Declaration
[Parameter]
public RenderFragment<TreeListCommandColumnCellDisplayTemplateContext> CellDisplayTemplate { get; set; }
#Property Value
Type | Description |
---|---|
Render |
A template for command column cells in display mode. |
#Remarks
The command column displays predefined New, Edit, and Delete buttons for data rows in display mode. In EditRow
and EditCell
edit modes, this column displays Save and Cancel buttons for the edited row. In the filter row, the column displays the Clear button.
The CellDisplayTemplate
allows you to display custom command elements for cells in display mode. Use the template’s context
parameter to access CommandColumn and DataItem objects. The TreeList object allows you to access the TreeList component and call the following edit-related methods:
- StartEditNewRowAsync
- Starts editing a new root node.
- StartEditNewRowAsync
- Starts editing a new child node of the specified row.
- StartEditRowAsync
- Starts editing the specified row.
- ShowRowDeleteConfirmation
- Displays the delete confirmation dialog for the specified row.
Specify the CellEditTemplate to display custom command elements for cells in edit mode. To display custom content in the command column header and filter row, use HeaderTemplate and FilterRowCellTemplate.
Note
Add, Edit, and Delete operations can be temporarily unavailable if you bind the Tree
The following code snippet displays icons instead of default command buttons:
@inject EmployeeTaskService EmployeeTaskService
<DxTreeList @ref="MyTreeList"
Data="TreeListData"
KeyFieldName="Id"
ParentKeyFieldName="ParentId"
EditMode="TreeListEditMode.EditForm"
EditModelSaving="TreeList_EditModelSaving"
DataItemDeleting="TreeList_DataItemDeleting"
CustomizeEditModel="TreeList_CustomizeEditModel">
<Columns>
<DxTreeListCommandColumn Width="90px">
<HeaderTemplate>
<a class="oi oi-plus" @onclick="@(() => MyTreeList.StartEditNewRowAsync())" style="text-decoration: none;" href="javascript:void(0);"></a>
</HeaderTemplate>
<CellDisplayTemplate>
<a class="oi oi-pencil" @onclick="@(() => MyTreeList.StartEditRowAsync(context.VisibleIndex))" style="text-decoration: none;" href="javascript:void(0);"></a>
<a class="oi oi-plus" @onclick="@(() => MyTreeList.StartEditNewRowAsync(context.VisibleIndex))" style="text-decoration: none;" href="javascript:void(0);"></a>
<a class="oi oi-x" @onclick="@(() => MyTreeList.ShowRowDeleteConfirmation(context.VisibleIndex))" style="text-decoration: none;" href="javascript:void(0);"></a>
</CellDisplayTemplate>
</DxTreeListCommandColumn>
<DxTreeListDataColumn FieldName="Name" Caption="Task" />
<DxTreeListDataColumn FieldName="EmployeeName" />
<DxTreeListDataColumn FieldName="StartDate" />
<DxTreeListDataColumn FieldName="DueDate" />
</Columns>
<EditFormTemplate Context="EditFormContext">
<DxFormLayout CssClass="w-100">
<DxFormLayoutItem Caption="Task:" ColSpanMd="6">
@EditFormContext.GetEditor("Name")
</DxFormLayoutItem>
<DxFormLayoutItem Caption="Employee Name:" ColSpanMd="6">
@EditFormContext.GetEditor("EmployeeName")
</DxFormLayoutItem>
<DxFormLayoutItem Caption="Start Date:" ColSpanMd="6">
@EditFormContext.GetEditor("StartDate")
</DxFormLayoutItem>
<DxFormLayoutItem Caption="Due Date:" ColSpanMd="6">
@EditFormContext.GetEditor("DueDate")
</DxFormLayoutItem>
</DxFormLayout>
</EditFormTemplate>
</DxTreeList>
@code {
ITreeList MyTreeList { get; set; }
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);
}
}