Model Binding

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

  1. Make sure you followed all the steps from the introductory article on Telerik UI for ASP.NET MVC.
  2. Create a new action method and pass the Categories table as the model. The Categories table has to be associated to the Products table.

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

        <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master"
            Inherits="System.Web.Mvc.ViewPage<IEnumerable<MvcApplication1.Models.Category>>" %>
    
        @model IEnumerable<MvcApplication1.Models.Category>
    
  4. Add a Menu.

        <%: Html.Kendo().Menu()
            .Name("menu") // The name of the Menu is mandatory. It specifies the "id" attribute of the Menu.
            .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;
                    }));
            })
        %>
    
        @(Html.Kendo().Menu()
            .Name("menu") // The name of the Menu is mandatory. It specifies the "id" attribute of the Menu.
            .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;
                    }));
            })
        )
    

See Also

In this article
Not finding the help you need? Improve this article