Post
Ask Question

Create a Tree View in Blazor with SyncFusion component

Introduction

 
SyncFusion provides custom components for Blazor. Currently, they have 60+ custom component collections.
 

Create Blazor Server project using Visual Studio 2019

 
Create a new project using Blazor Server template in Visual Studio 2019.
 
 
 
 
Install “Syncfusion.EJ2.Blazor” library using NuGet package manager.
 
 
You can create a 30 days trial account in SyncFusion and get a license key from their website. We will use this key later in our application to avoid a warning message.
 
We can add a new component “TreeView” to the “Pages” folder.
 
TreeView.razor
  1. @page "/TreeView"  
  2. @using Syncfusion.EJ2.Blazor.Navigations  
  3. <div class="control-section">  
  4.     <div class="control_wrapper">  
  5.         <EjsTreeView TValue="TreeItem">  
  6.             <TreeViewFieldsSettings DataSource="@TreeDataSource" Id="NodeId" Text="NodeText" Expanded="Expanded" Child="@("Child")"></TreeViewFieldsSettings>  
  7.         </EjsTreeView>  
  8.     </div>  
  9. </div>  
  10. @code{  
  11.     List<TreeItem> TreeDataSource = new List<TreeItem>();  
  12.     protected override void OnInitialized()  
  13.     {  
  14.         base.OnInitialized();  
  15.         TreeDataSource.Add(new TreeItem  
  16.         {  
  17.             NodeId = "01",  
  18.             NodeText = "Chakkalayil House",  
  19.             Expanded = true,  
  20.             Child = new List<TreeItem>()  
  21. {  
  22.                 new TreeItem { NodeId = "01-01", NodeText = "Anil Soman", Expanded =true,  
  23.                     Child = new List<TreeItem>()  
  24.     {  
  25.                         new TreeItem { NodeId = "01-01-01", NodeText = "Adobe Illustrator" },  
  26.                         new TreeItem { NodeId = "01-01-02", NodeText = "Adobe Photoshop" },  
  27.                         new TreeItem { NodeId = "01-01-03", NodeText = "InVision" }  
  28.                     },  
  29.                 },  
  30.                 new TreeItem { NodeId = "01-02", NodeText = "Sarathlal Saseendran", Expanded = true,  
  31.                     Child = new List<TreeItem>()  
  32.     {  
  33.                         new TreeItem { NodeId = "01-02-01", NodeText = "Blazor" },  
  34.                         new TreeItem { NodeId = "01-02-02", NodeText = "ASP.NET Core" },  
  35.                         new TreeItem { NodeId = "01-02-03", NodeText = "Cosmos DB" },  
  36.                     },  
  37.                 },  
  38.             },  
  39.         });  
  40.     }  
  41.     class TreeItem  
  42.     {  
  43.         public string NodeId { get; set; }  
  44.         public string NodeText { get; set; }  
  45.         public string Icon { get; set; }  
  46.         public bool Expanded { get; set; }  
  47.         public bool Selected { get; set; }  
  48.         public List<TreeItem> Child { get; set; }  
  49.     }  
  50. }  
  51. <style>  
  52.     .control_wrapper {  
  53.         max-width: 500px;  
  54.         margin: auto;  
  55.         border: 1px solid #dddddd;  
  56.         border-radius: 3px;  
  57.     }  
  58. </style>  
We have added a TreeItem class and using this class, we have filled the tree view data in the component.
 
We can modify the shared component NavMenu by adding the route for TreeView.
 
NavMenu.razor
  1. <div class="top-row pl-4 navbar navbar-dark">  
  2.     <a class="navbar-brand" href="">BlazorTreeView</a>  
  3.     <button class="navbar-toggler" @onclick="ToggleNavMenu">  
  4.         <span class="navbar-toggler-icon"></span>  
  5.     </button>  
  6. </div>  
  7.   
  8. <div class="@NavMenuCssClass" @onclick="ToggleNavMenu">  
  9.     <ul class="nav flex-column">  
  10.         <li class="nav-item px-3">  
  11.             <NavLink class="nav-link" href="" Match="NavLinkMatch.All">  
  12.                 <span class="oi oi-home" aria-hidden="true"></span> Home  
  13.             </NavLink>  
  14.         </li>  
  15.         <li class="nav-item px-3">  
  16.             <NavLink class="nav-link" href="counter">  
  17.                 <span class="oi oi-plus" aria-hidden="true"></span> Counter  
  18.             </NavLink>  
  19.         </li>  
  20.         <li class="nav-item px-3">  
  21.             <NavLink class="nav-link" href="fetchdata">  
  22.                 <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data  
  23.             </NavLink>  
  24.         </li>  
  25.         <li class="nav-item px-3">  
  26.             <NavLink class="nav-link" href="treeview">  
  27.                 <span class="oi oi-list-rich" aria-hidden="true"></span> Tree View  
  28.             </NavLink>  
  29.         </li>  
  30.     </ul>  
  31. </div>  
  32.   
  33. @code {  
  34.     private bool collapseNavMenu = true;  
  35.   
  36.     private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;  
  37.   
  38.     private void ToggleNavMenu()  
  39.     {  
  40.         collapseNavMenu = !collapseNavMenu;  
  41.     }  
  42. }  
We can register the SyncFusion in Startup class.
 
 
We can add below three CDN links to _host.cshtml file inside the Pages folder.
 
 
 
We can run the application.
 
 
 
Our application works successfully, but we get a warning message on top of tree view. We can avoid this message by getting the license key. SyncFusion is providing a 30 days free license for validation purpose.
 
 
 
 
We can apply this license in the Configure method of startup class.
 
 
 
We can run the application again.
 
 
 
Application is running without any warning message.
 

Conclusion

 
In this post, we have created a Blazor Server application and added SyncFusion library using NuGet package manager. After that, we have created a new component and added TreeView component from SyncFusion. We have added some data to the tree view component and added three CDN links inside the _host.cshtml file. We have got the trial license from SyncFusion website and added to Startup class and avoided the warning message.


Similar Articles