How to create dual TreeView from Blazor TreeView Component

The Blazor TreeView component does not have built-in support for dual TreeView and transferring items using buttons. However, a customized solution has been developed to meet this requirement.

The data manipulation logic in the button click method and the selected items management in the OnSelected method step by step.

Move All from First to Second:

• Copies all items from FirstListData to SecondListData.

... 
@code
{
    …
   public void MoveAllFromFirstToSecond()
    {
        FirstListData.ForEach(e => SecondListData.Add(e));
        FirstListData.Clear();
        FirstData.Clear();
       FirstData = new List<MailItem>(FirstListData);
        SecondData = new List<MailItem>(SecondListData);
    }   
    …
}

Move Selected from First to Second:

• Checks if FirstSelected is not null.
• If true, moves the selected item from FirstListData to SecondListData.
• If false, sets ParentId to null for each item in FirstSelected1 (a list of selected items) and moves them to SecondListData.

…            
@code
{
    …
   public void MoveSelectedFromFirstToSecond()
    {
        if (FirstSelected != null)
        {
            SecondListData.Add(FirstSelected);
            StateHasChanged();
            FirstListData.RemoveAt(FirstListData.FindIndex(e => e.Id == FirstSelected.Id));
            FirstSelected = null;
        }
        else
        {
            FirstSelected1[0].ParentId = null;
            foreach (var item in FirstSelected1)
            {
                SecondListData.Add(item);
                StateHasChanged();
                FirstListData.RemoveAt(FirstListData.FindIndex(e => e.Id == item.Id));
           }
            FirstSelected1 = null;
        }
 
        FirstData = new List<MailItem>(FirstListData);
        SecondData = new List<MailItem>(SecondListData);
        StateHasChanged();
    }
  …
}
 

Move Selected from Second to First:

• Similar to Case 2 but in the opposite direction. Checks and moves items from SecondSelected or SecondSelected1 to FirstListData.

 
…
 
@code
{
    …
   public void MoveSelectedFromSecondToFirst()
    {
        if (SecondSelected != null)
        {
            FirstListData.Add(SecondSelected);
            StateHasChanged();
            SecondListData.RemoveAt(SecondListData.FindIndex(e => e.Id == SecondSelected.Id));
            SecondSelected = null;
        }
        else
        {
            SecondSelected1[0].ParentId = null;
            foreach (var item in SecondSelected1)
            {
                FirstListData.Add(item);
                StateHasChanged();
                SecondListData.RemoveAt(SecondListData.FindIndex(e => e.Id == item.Id));
            }
            SecondSelected1 = null;
        }
        FirstData = new List<MailItem>(FirstListData);
        SecondData = new List<MailItem>(SecondListData);
        StateHasChanged();
    }
   …
}

Move All from Second to First:

• Copies all items from SecondListData to FirstListData.
• Clears SecondListData and updates local data lists.

 
…
 @code
{
    …
   public void MoveAllFromSecondToFirst()
    {
        SecondListData.ForEach(e => FirstListData.Add(e));
        SecondData.Clear();
        SecondListData.Clear();
        SecondData = new List<MailItem>(SecondListData);
        FirstData = new List<MailItem>(FirstListData);
    }  
   …
}

OnSelected Method:

1. Method Parameters:

• The OnSelected method is triggered when a tree node is clicked.
• It takes NodeClickEventArgs and TreeViewIndex as parameters.

2. Tree Selection Handling (Tree1 or Tree2):

• Checks if TreeViewIndex is 1 (Tree1) or 2 (Tree2).
• Handles the selection differently for each tree.

3. Selection for Tree1:

• If the selected node has no children, create a MailItem (FirstSelected) with information from the clicked node.
• If the selected node has children, find all items in FirstData with matching ParentId and include the selected node itself (FirstSelected1).

4. Selection for Tree2:

• Similar to Tree1 but sets the selected items in SecondSelected or SecondSelected1.

 
…
 
<div class="padding">
    <SfTreeView @ref="Tree1" TValue="MailItem">
        <TreeViewFieldsSettings TValue="MailItem" Id="Id" DataSource="@FirstListData" Text="FolderName" ParentID="ParentId" HasChildren="HasSubFolders" Expanded="Expanded"></TreeViewFieldsSettings>
        <TreeViewEvents TValue="MailItem" NodeClicked="@(e=> OnSelected(e, 1))"></TreeViewEvents>
    </SfTreeView>
</div>
…
<div class="padding">
    <SfTreeView @ref="Tree2" TValue="MailItem">
        <TreeViewFieldsSettings TValue="MailItem" Id="Id" DataSource="@SecondListData" Text="FolderName" ParentID="ParentId" HasChildren="HasSubFolders" Expanded="Expanded"></TreeViewFieldsSettings>
        <TreeViewEvents TValue="MailItem" NodeClicked="@(e=> OnSelected(e, 2))"></TreeViewEvents>
    </SfTreeView>
</div>
 
…
 
@code
{
    …
   void OnSelected(NodeClickEventArgs eventArgs, int TreeViewIndex)
    {
        if (TreeViewIndex == 1)
        {
            if (!eventArgs.NodeData.HasChildren)
            {
                FirstSelected = new MailItem
                    {
                        Id = eventArgs.NodeData.Id,
                        FolderName = eventArgs.NodeData.Text,
                        Expanded = eventArgs.NodeData.Expanded,
                        HasSubFolders = eventArgs.NodeData.HasChildren
                    };
           }
            else
            {
                FirstSelected1 = FirstData.FindAll(e => e.ParentId == eventArgs.NodeData.Id || e.Id == eventArgs.NodeData.Id);
            }
        }
        else
        {
            if (!eventArgs.NodeData.HasChildren)
            {
                SecondSelected = new MailItem
                    {
                        Id = eventArgs.NodeData.Id,
                        FolderName = eventArgs.NodeData.Text,
                        Expanded = eventArgs.NodeData.Expanded,
                        HasSubFolders = eventArgs.NodeData.HasChildren
                    };
            }
            else
            {
                SecondSelected1 = SecondData.FindAll(e => e.ParentId == eventArgs.NodeData.Id || e.Id == eventArgs.NodeData.Id);
            }
        }
    }
    …
}

Sample: https://blazorplayground.syncfusion.com/LZBztUiiJQbkVscv