New to Telerik UI for Blazor? Download Free 30-day trial

TreeView - Lazy Loading

  • Lazy-loading.razor
  • CategoryService.cs
  • CategoryDto.cs
  • ProductService.cs
  • ProductDto.cs
Loading the demo source code...please wait.

Description

Telerik UI for Blazor TreeView displays data in a tree-like structure. It allows you to navigate through the items and their children. One of the main benefits is the option you have to load the nodes on demand.

The component rendering stays the same regardless of the data type. Yet, its configuration will be different when using hierarchical or flat data. The current demo shows TreeView load on demand (lazy loading) using hierarchical data binding.

The hierarchical data means that the collection of child items is provided in a field of its parent's model, unlike when using flat data. That is the Items field by default. If a given node has items, an expand icon will be visible. The HasChildren field can override this, yet - it is not required for hierarchical data binding.

When using load on demand, there is no need to provide all the data the Treeview will render at once - the root nodes are sufficient for an initial display. Then, you can use the OnExpand event of the component to provide flat or hierarchical data to the node that was just expanded.

Loading nodes on demand can improve the performance of your application by requesting fewer data at any given time.

You can also take a look at the Treeview data binding basics.

This TreeView Lazy Loading example is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik UI for Blazor components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for Blazor or ThemeBuilder.

Support & Learning Resources

An error has occurred. This application may no longer respond until reloaded.