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

    Specifies text displayed in the pop-up edit form’s header.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    [DefaultValue(null)]
    [Parameter]
    public string PopupEditFormHeaderText { get; set; }

    Property Value

    Type Default Description
    String null

    Text displayed in the pop-up edit form’s header.

    Remarks

    Set the EditMode property to PopupEditForm to display the edit form in a pop-up window. Specify the PopupEditFormCssClass property to apply a CSS class to the pop-up edit form. The PopupEditFormHeaderText property allows you to change text in the edit form header.

    Read Tutorial: Edit Forms

    The following code snippet changes the pop-up edit form’s size and header text:

    @inject EmployeeTaskService EmployeeTaskService
    
    <style>
        .my-style {
            min-width: 800px;
        }
    </style>
    
    <DxTreeList Data="TreeListData"
                KeyFieldName="Id"
                ParentKeyFieldName="ParentId" 
                EditMode="TreeListEditMode.PopupEditForm"
                PopupEditFormHeaderText="Edit Task"
                PopupEditFormCssClass="my-style"
                CustomizeEditModel="TreeList_CustomizeEditModel"
                EditModelSaving="TreeList_EditModelSaving"
                DataItemDeleting="TreeList_DataItemDeleting">
        <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>
            </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);
        }
    }
    

    Blazor Grid Popup Edit Form

    See Also