blazor-devexpress-dot-blazor-dot-dxtreelist-47856630.md
Specifies the position of UI elements used to create new root nodes.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
[DefaultValue(TreeListEditNewRootRowPosition.Top)]
[Parameter]
public TreeListEditNewRootRowPosition EditNewRootRowPosition { get; set; }
| Type | Default | Description |
|---|---|---|
| TreeListEditNewRootRowPosition | Top |
An enumeration value.
|
Available values:
| 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.
|
Based on the EditMode, the TreeList component invokes a pop-up edit form or displays an inline edit form, edit row, or cell editors once a user starts editing a row. The EditNewRootRowPosition property specifies the position of these UI elements displayed for new root nodes.
The EditNewRootRowPosition property also specifies visibility and location of the new item row. Like the New button in the command column header, this row starts new root node editing. Once clicked, an edit form, row, or cell editors appear within the new item row.
The new item row is hidden. The TreeList starts editing a new root node once a user clicks the New button in the command column header or you call the StartEditNewRowAsync method. An inline edit form, edit row, or cell editors appear at the top of the page.
The new item row is hidden. The TreeList starts editing a new root node once a user clicks the New button in the command column header or you call the StartEditNewRowAsync method. An inline edit form, edit row, or cell editors appear at the bottom of the page.
The new item row is pinned to the top of the current page. The row remains visible even when users scroll vertically or navigate pages.
Users can click the new item row or focus it and press Enter to start editing a new root node. The TreeList also focuses and activates the new item row after users click the New button in the command column header or you call the StartEditNewRowAsync method.
Users can press Tab or Shift + Tab keys to navigate between the new item row’s data cells. If input focus goes beyond last/first data cell in EditCell mode, the TreeList focuses the cell on the opposite end and validates user input. Depending on validation results, the following variants are possible:
The TreeList displays the new item row after the last data row on the last page.
Users can click the new item row or focus it and press Enter to start editing a new root node. The TreeList also focuses and activates the new item row after users click the New button in the command column header or you call the StartEditNewRowAsync method.
Users can press Tab or Shift + Tab keys to navigate between the new item row’s data cells. If input focus goes beyond the last/first data cell in EditCell mode, the TreeList focuses the cell on the opposite end and validates user input. Depending on validation results, the following variants are possible:
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.
@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();
}
}
public class EmployeeTask {
public int Id { get; set; }
public int ParentId { get; set; }
public string Name { get; set; }
public string EmployeeName { get; set; }
public DateTime StartDate { get; set; }
public DateTime DueDate { get; set; }
public int Progress { get; set; }
public EmployeeTask() { }
public EmployeeTask(
int id,
int parentId,
string name,
string employeeName,
DateTime startDate,
DateTime dueDate,
int progress
)
{
Id = id;
ParentId = parentId;
Name = name;
EmployeeName = employeeName;
StartDate = startDate;
DueDate = dueDate;
Progress = progress;
}
}
public class EmployeeTaskService {
public List<EmployeeTask> GenerateData() {
return new List<EmployeeTask>() {
new EmployeeTask(1, 0, "Simplify & Clarify Product Messaging", "John Heart", new DateTime(2018, 4, 3), new DateTime(2018, 4, 14), 14),
new EmployeeTask(2, 1, "Prepare Financial Reports", "Samantha Bright", new DateTime(2018, 4, 3), new DateTime(2018, 4, 7), 17),
new EmployeeTask(3, 1, "Prepare Marketing Plan", "Arthur Miller", new DateTime(2018, 4, 7), new DateTime(2018, 4, 14), 11),
new EmployeeTask(4, 0, "Create Action Plan to Improve Customer Engagement", "Robert Reagan", new DateTime(2017, 8, 8), new DateTime(2018, 4, 8), 23),
new EmployeeTask(5, 4, "Update Personnel Files", "Greta Sims", new DateTime(2017, 8, 8), new DateTime(2017, 10, 18), 100),
new EmployeeTask(6, 4, "Review Health Insurance Options", "Brett Wade", new DateTime(2017, 9, 27), new DateTime(2017, 11, 10), 37),
new EmployeeTask(7, 4, "Choose Between PPO and HMO Health Plan", "Sandra Johnson", new DateTime(2017, 12, 13), new DateTime(2018, 3, 23), 17),
new EmployeeTask(8, 4, "Update Google Adwords Strategy", "Ed Holmes", new DateTime(2017, 8, 23), new DateTime(2017, 12, 23), 45),
new EmployeeTask(9, 4, "Create New Brochure Design", "Barb Banks", new DateTime(2018, 1, 3), new DateTime(2018, 3, 14), 17),
new EmployeeTask(10, 4, "Obtain Price Quote for New Brochure", "Kevin Carter", new DateTime(2018, 2, 1), new DateTime(2018, 3, 15), 18),
new EmployeeTask(11, 4, "Brochure Design Review", "Cindy Stanwick", new DateTime(2017, 8, 22), new DateTime(2017, 10, 28), 4),
new EmployeeTask(12, 4, "Review Website Redesign Strategy", "Sammy Hill", new DateTime(2017, 9, 16), new DateTime(2018, 3, 6), 73),
new EmployeeTask(13, 4, "Roll Out New Website", "Davey Jones", new DateTime(2017, 11, 7), new DateTime(2018, 2, 6), 9),
new EmployeeTask(14, 4, "Update Sales/Marketing Strategy", "Victor Norris", new DateTime(2017, 12, 13), new DateTime(2018, 4, 2), 5),
new EmployeeTask(15, 4, "Update Sales/Revenue Report", "Mary Stern", new DateTime(2017, 12, 25), new DateTime(2018, 4, 2), 4),
new EmployeeTask(16, 4, "Direct vs Online Sales Comparison Report", "Robin Cosworth", new DateTime(2018, 1, 2), new DateTime(2018, 3, 20), 14),
new EmployeeTask(17, 4, "Review Sales Report and Approve Modifications", "Kelly Rodriguez", new DateTime(2017, 9, 4), new DateTime(2017, 10, 30), 8),
new EmployeeTask(18, 4, "Update R&D Strategy", "James Anderson", new DateTime(2017, 11, 13), new DateTime(2017, 12, 4), 12),
new EmployeeTask(19, 4, "Discuss Updated R&D Strategy", "Antony Remmen", new DateTime(2017, 10, 29), new DateTime(2017, 12, 31), 14),
new EmployeeTask(20, 4, "Update QA Strategy", "Olivia Peyton", new DateTime(2017, 10, 31), new DateTime(2017, 11, 2), 18),
new EmployeeTask(21, 4, "Schedule Training Events", "Taylor Riley", new DateTime(2017, 11, 19), new DateTime(2018, 4, 7), 21),
new EmployeeTask(22, 4, "Approve Hiring of John Jeffers", "Amelia Harper", new DateTime(2018, 1, 7), new DateTime(2018, 4, 8), 10),
new EmployeeTask(23, 0, "Increase Average Subscription Price", "Wally Hobbs", new DateTime(2017, 8, 9), new DateTime(2017, 9, 13), 96),
new EmployeeTask(24, 23, "Update Non-Compete Agreements", "Brad Jameson", new DateTime(2017, 8, 9), new DateTime(2017, 9, 3), 96),
new EmployeeTask(25, 23, "Update Employee Records with New NDA", "Karen Goodson", new DateTime(2017, 8, 23), new DateTime(2018, 9, 10), 100)
};
}
}
// ...
builder.Services.AddSingleton<EmployeeTaskService>();
See Also