New to Telerik UI for ASP.NET Core? Download free 30-day trial

Model Binding

The Telerik UI Menu enables you to bind it to a hierarchical model.

  1. Create a new action method and pass the Categories table as the model. The Categories has to be associated to the Products table.

    public ActionResult Index()
    {
        NorthwindDataContext northwind = new NorthwindDataContext();
    
        return View(northwind.Categories);
    }
    
  2. Make your view strongly typed.

    @model IEnumerable<MvcApplication1.Models.Category>
    
  3. Add a Menu.

    @(Html.Kendo().Menu()
        .Name("menu") // The name of the Menu is mandatory. It specifies the "id" attribute of the widget.
        .BindTo(Model, mappings =>
        {
            mappings.For<Category>(binding => binding // Define the first level of the Menu.
                .ItemDataBound((item, category) => // Define the mapping between the Menu item properties and the model properties.
                    {
                    item.Text = category.CategoryName;
                    })
                .Children(category => category.Products)); // Define which property of the model contains the children.
            mappings.For<Product>(binding => binding
                .ItemDataBound((item, product) =>
                {
                    item.Text = product.ProductName;
                }));
        })
    )
    
        @{
            var menuItems = Model.Select(category =>
            {
                return new MenuItemBase
                {
                    Text = category.CategoryName,
                    Children = category.Products.Select(product =>
                    {
                        return new MenuItemBase { Text = product.ProductName };
                    })
                };
            });
        }
    
        <kendo-menu name="menu" bind-to="menuItems">
        </kendo-menu>
    

See Also

In this article