Tree View for Blazor - How to load child nodes on demand (lazy loading)

This example binds our DevExpress Blazor TreeView to a data source and uses the DxTreeViewDataMapping component to load child nodes on demand.

Implementation Steps

1. Install the Microsoft.EntityFrameworkCore.Proxies NuGet package and call the UseLazyLoadingProxies method to enable lazy load functionality.

   builder.Services.AddDbContextFactory<NorthwindContext>((sp, options) => {
       var env = sp.GetRequiredService<IWebHostEnvironment>();
       var dbPath = Path.Combine(env.ContentRootPath, "Northwind.db");
       options
           .UseLazyLoadingProxies()
           .UseSqlite("Data Source=" + dbPath);
   });

2. Set the DxTreeview.LoadChildNodesOnDemand property to true to activate lazy data loading in DxTreeView.

3. Add a DxTreeViewDataMapping component and use its HasChildren property to indicate whether a node has child nodes. If true, the node displays an expand glyph even if its children are not yet loaded from the data source.

   <DxTreeView Data="@Data" LoadChildNodesOnDemand="true">
       <DataMappings>
           <DxTreeViewDataMapping Text="@(nameof(Category.CategoryName))"
                                  Children="@(nameof(Category.Products))"
                                  HasChildren="@(nameof(Category.HasProducts))" >
           </DxTreeViewDataMapping>
           <DxTreeViewDataMapping Level="1" Text="ProductName"/>
       </DataMappings>
   </DxTreeView>

Files to Review

• Index.razor
• Program.cs
• Category.cs

Documentation

• DxTreeview - Load Child Nodes on Demand
• Lazy Data Loading

More Examples

• Grid for Blazor - How to bind the component to data with Entity Framework Core