We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Populate a menu from a asp.net web api

Thread ID:





127436 Nov 15,2016 08:45 PM UTC Nov 16,2016 10:16 AM UTC JavaScript 1
Tags: ejMenu
Mattias Nyqvist
Asked On November 15, 2016 08:45 PM UTC

I wounder if there is possible to populate a menu form an asp.net web api? Any help to solve this problem would make me very happy, I have googled a lot but not found anything. I have worked with kendo UI before (javascript framwork) and there was it possible so i hope syncfusion also support this.

Kasithangam C [Syncfusion]
Replied On November 16, 2016 10:16 AM UTC

Hi Mattias, 
Thanks for contacting Syncfusion support. 
Yes, we have provided support to populate a menu from an asp.net web api. We can bind WebApi service’s data to Menu control by using the web api adaptor. Please refer the below link: 
We have prepared the sample based on your requirement and it is available under the following link: 
Sample: Sample 
In the above sample, we have created the data in the web api controller method as shown below code: 
public class ProductsController : ApiController 
        List<Product> products = new List<Product>() 
            new Product { Id = 1, Name = "Tomato Soup" }, 
            new Product { Id = 2, Name = "Yo-yo"}, 
            new Product { Id = 3, Name = "Hammer" }, 
            new Product { Id=  4, Name = "Knife" }, 
            new Product { Id=  4, Name = "Pen"},      
        public IEnumerable<Product> GetAllProducts() 
            return products; 
Now, we can bind the data to the menu control in the script section as shown below code: 
        <ul id="menujson"></ul> 
            var dataManager = ej.DataManager({ 
                url: "/api/products", //call the web api controller  
                adaptor: new ej.WebApiAdaptor() 
                fields: { 
                    dataSource: dataManager, 
                    id: "Id", 
                    text: "Name", 
To know more details about properties, methods and events of Menu component, please find the below API link: 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon