Binding to Remote Data

Remote data binding enables you to bind the Menu to a server end-point that returns the items collection for the Menu.

The Menu supports remote data binding as of the R2 2019 release.

1. Implement an action method in your controller that returns the collection for the Menu.

   public JsonResult GetCategories()
   {
       SampleEntities northwind = new SampleEntities();
   
       var result = northwind.Categories.Select((category) =>
           new
           {
               Name = category.CategoryName,
               Products = northwind.Products
                   .Where((product) => product.CategoryID == category.CategoryID)
                   .Select((product)=> new { Name = product.ProductName })
           }
       );
   
       return Json(result, JsonRequestBehavior.AllowGet);
   }
   

2. Use the DataSource to configure the action URL to the end-point. Set up the DataTextField to define the field which will be bound to the text of the items. If the children items are not in an items field, configure the Model with the corresponding field that holds the children collection.

       @(Html.Kendo().Menu()
           .Name("menu")
           .DataTextField("Name")
           .DataSource(dataSource => dataSource
               .Model(model => model.Children("Products"))
               .Read(read => read
                   .Action("GetCategories", "Menu")
               )
           )
       )
   

       <kendo-menu name="Menu" datatextfield="Name">
           <hierarchical-datasource>
               <schema>
                   <hierarchical-model children="Products"></hierarchical-model>
               </schema>
               <transport>
                   <read url="@Url.Action("GetCategories", "Menu")" />
               </transport>
           </hierarchical-datasource>
       </kendo-menu>
   

See Also

• Remote Data Binding by the Menu HtmlHelper for ASP.NET Core (Demo)
• Server-Side API