Skip to main content
All docs
V25.1
  • DxTreeList.EditFormButtonsVisible Property

    Specifies whether the edit form contains predefined Save and Cancel buttons.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

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

    Property Value

    Type Default Description
    Boolean true

    true if the edit form contains Save and Cancel buttons; otherwise, false.

    Remarks

    The default edit form shows only predefined Save and Cancel buttons. Use the EditFormTemplate to define edit form content. To hide predefined buttons and create your own buttons, disable the EditFormButtonsVisible option. Note the following specifics:

    The following example displays custom Save and Cancel buttons in the edit form:

    Blazor TreeList Edit Form with Custom Buttons

    @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);
        }
    }
    

    Refer to the following topic for more information: Pop-Up and Inline Edit Forms in Blazor TreeList.

    See Also