Skip to main content
All docs
V25.1
  • DxTreeListCommandColumn.CancelButtonVisible Property

    Specifies whether the command column displays the Cancel button in EditRow or EditCell edit mode.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    [DefaultValue(true)]
    [Parameter]
    public bool CancelButtonVisible { get; set; }

    Property Value

    Type Default Description
    Boolean true

    true to display the Cancel button; otherwise, false.

    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.

    Blazor TreeList Command Column

    Edit, Cancel, and Save buttons are redundant in EditCell mode. The following code snippet hides these buttons:

    @inject EmployeeTaskService EmployeeTaskService
    
    <DxTreeList Data="TreeListData"
                KeyFieldName="Id"
                ParentKeyFieldName="ParentId"
                EditMode="TreeListEditMode.EditCell"
                EditModelSaving="TreeList_EditModelSaving"
                DataItemDeleting="TreeList_DataItemDeleting"
                CustomizeEditModel="TreeList_CustomizeEditModel">
        <Columns>
            <DxTreeListCommandColumn EditButtonVisible="false"
                                     CancelButtonVisible="false"
                                     SaveButtonVisible="false" />
            <DxTreeListDataColumn FieldName="Name" Caption="Task" />
            <DxTreeListDataColumn FieldName="EmployeeName" />
            <DxTreeListDataColumn FieldName="StartDate" />
            <DxTreeListDataColumn FieldName="DueDate" />
        </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);
        }
    }
    

    For information on how to enable data editing, refer to the following topic: Editing and Validation in Blazor TreeList.

    See Also