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

Menu - Hierarchical Data

Click on items to display their child items.

Style in ThemeBuilder

  • Custom SASS variables
  • Atomic customizations
  • Sharing projects
Start Theming
  • Hierarchical-data.razor
Loading the demo source code...please wait.

Description

The Telerik UI for Blazor Menu displays data in a traditional menu-like structure. It allows you browse through the items and their children, and supports data binding to hierarchical data or flat data.

The component rendering will be the same regardless of the data type, however, its configuration will be different when using flat or hierarchical data. The current demo targes data binding to hierarchical data.

While in the flat data collections all records are available at one level, in the hierarchical data collections the model of the parent item contains a list of its children.

You can use the default data binding in your model, so the Menu will automatically recognize the field that contains the child items. The default property name is Items . Otherwise, you should point the ItemsField parameter of the Menu to the field from your model that contains the collection of subitems.

The demo above demonstrates a Telerik Blazor Menu component that uses hierarchical data. The MenuItem model has a SubSectionList field – a List< MenuItem> that contains the child menu items. Each parent menu item can be clicked to display the list of child menu items. By default, the menu items are shown on MouseEnter, but you can modify this behavior using the ShowOn and HideOn parameters.
As the SubSectionList field name is different than the default Items field name required for the data binding, the Menu cannot automatically recognize it and needs additional data binding. Take a look at the component declaration – the ItemsField points to the SubSectionList field. This field binding is required, so the component can get and properly render the child items.

This Menu Hierarchical Data 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.