DxTreeList.CancelEditAsync() Method
Cancels row editing and discards changes.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v24.2.dll
NuGet Package: DevExpress.Blazor
Declaration
public Task CancelEditAsync()Returns
| Type | Description |
|---|---|
| Task | The task that is completed when the edit operation is canceled. |
Remarks
This method allows you to implement your custom Cancel button inside or outside the TreeList. Handle a button’s click event and call the CancelEditAsync method to cancel row editing and discard changes. To create a custom response to the edit cancel action, handle the EditCanceling event.
Inline and pop-up edit forms display predefined Save and Cancel buttons. Disable the EditFormButtonsVisible property to hide these buttons. In EditRow and EditCell edit modes, the command column shows predefined Save and Cancel buttons for the edited row. Disable the column’s SaveButtonVisible and CancelButtonVisible properties to hide these buttons.
The following example displays custom Save and Cancel buttons in the edit form:
@inject EmployeeTaskService EmployeeTaskService
<DxTreeList @ref="MyTreeList"
Data="TreeListData"
KeyFieldName="Id"
ParentKeyFieldName="ParentId"
EditMode="TreeListEditMode.EditForm"
CustomizeEditModel="TreeList_CustomizeEditModel"
EditModelSaving="TreeList_EditModelSaving"
DataItemDeleting="TreeList_DataItemDeleting"
EditFormButtonsVisible="false">
<Columns>
<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>
<DxFormLayoutItem ColSpanMd="12">
<DxButton SubmitFormOnClick="true" Text="Save" />
<DxButton Click="@(() => MyTreeList.CancelEditAsync())" Text="Cancel" />
</DxFormLayoutItem>
</DxFormLayout>
</EditFormTemplate>
</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);
}
}