How to Load Blazor Treeview Nodes On Demand

[Syncfusion Support]

Answer:

We can achieve this using LoadOnDemand property is set to true (Lazy load). It reduces the bandwidth size when consuming huge data. TreeView loads first-level nodes initially, and when the parent node is expanded, loads the child nodes based on the ParentID/Child member. Here is the code snippet for your reference,

<SfTreeView @ref="tree" TValue="Employee">

<TreeViewFieldsSettings TValue="Employee" Id="Id" Text="Name" ParentID="ParentId" HasChildren="HasTeam" Expanded="IsExpanded">

<SfDataManager Url="api/Default" Adaptor="Adaptors.WebApiAdaptor" CrossDomain="true">SfDataManager>

TreeViewFieldsSettings>

<TreeViewEvents TValue="Employee" NodeClicked="nodeClicked">TreeViewEvents>

<SfContextMenu @ref="menu" Target="#treeview" Items="@MenuItems">

<ContextMenuEvents TValue="MenuItem" ItemSelected="MenuSelect">ContextMenuEvents>

SfContextMenu>

SfTreeView>

public object Get()

{

// Get the DataSource from Database

var data = db.GetAllEmployees().ToList();

var count = data.Count();

var queryString = Request.Query;

if (queryString.Keys.Contains("$filter"))

{

StringValues Skip;

StringValues Take;

int skip = (queryString.TryGetValue("$skip", out Skip)) ? Convert.ToInt32(Skip[0]) : 0;

int top = (queryString.TryGetValue("$top", out Take)) ? Convert.ToInt32(Take[0]) : data.Count();

string filter = string.Join("", queryString["$filter"].ToString().Split(' ').Skip(2)); // get filter from querystring

// Filter the data based on the parent Id.

data = data.Where(d => d.ParentId.ToString() == filter).ToList();

return data.Skip(skip).Take(top);

}

else

{

// Fetch the root level data on initial loading.

data = data.Where(d => d.ParentId == null).ToList();

return data;

}

}

Find the sample for Load Treeview Nodes On Demand from here.