Skip to main content
All docs
V25.1
  • TreeListEditNewRootRowPosition Enum

    Lists values that specify the position of TreeList UI elements used to create new root nodes.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    public enum TreeListEditNewRootRowPosition

    Members

    Name Description
    Top

    The new item row is hidden. Once a user starts editing a new root node, the TreeList displays an edit form, edit row, or cell editors at the top of the current page.

    Bottom

    The new item row is hidden. Once a user starts editing a new root node, the TreeList displays an edit form, edit row, or cell editors at the bottom of the current page.

    FixedOnTop

    The TreeList displays the new item row pinned to the top of the current page.

    LastRow

    The TreeList displays the new item row after the last data row on the last page.

    Related API Members

    The following properties accept/return TreeListEditNewRootRowPosition values:

    Remarks

    The following example displays the new item row fixed to the top of the current TreeList page. Users can drag a newly created root node to change its position in the node hierarchy.

    New Item Row in Blazor TreeList

    @using System.Collections.ObjectModel
    @inject EmployeeTaskService EmployeeTaskService
    
    <DxTreeList Data="TreeListData"
                KeyFieldName="Id"
                ParentKeyFieldName="ParentId"
                AllowDragRows="true"
                ItemsDropped="TreeList_ItemsDropped"
                EditMode="TreeListEditMode.EditCell"
                EditModelSaving="TreeList_EditModelSaving"
                CustomizeEditModel="TreeList_CustomizeEditModel"
                EditNewRootRowPosition="TreeListEditNewRootRowPosition.FixedOnTop">
        <Columns>
            <DxTreeListDataColumn FieldName="Name" Caption="Task" />
            <DxTreeListDataColumn FieldName="EmployeeName" />
            <DxTreeListDataColumn FieldName="StartDate" />
            <DxTreeListDataColumn FieldName="DueDate" />
        </Columns>
    </DxTreeList>
    
    @code {
        ObservableCollection<EmployeeTask> TreeListData { get; set; }
    
        protected override void OnInitialized() {
            TreeListData = new ObservableCollection<EmployeeTask>(EmployeeTaskService.GenerateData());
        }
        void TreeList_ItemsDropped(TreeListItemsDroppedEventArgs evt) {
            if (evt.TargetItem == null)
                return;
            var droppedTask = (EmployeeTask)evt.DroppedItems[0];
            TreeListData.Remove(droppedTask);
            var targetTask = (EmployeeTask)evt.TargetItem;
            droppedTask.ParentId = evt.DropPosition == TreeListItemDropPosition.Inside
                ? targetTask.Id
                : targetTask.ParentId;
            var index = TreeListData.IndexOf(targetTask) + (evt.DropPosition == TreeListItemDropPosition.After ? 1 : 0);
            TreeListData.Insert(index, droppedTask);
        }
        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();
        }
    }
    

    Refer to the EditNewRootRowPosition property description for more information.

    See Also