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 : Nov 16th 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:

Created:

Updated:

Platform:

Replies:

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

Hi
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.
/Matt

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: 
<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; 
        } 
    } 
</code> 
Now, we can bind the data to the menu control in the script section as shown below code: 
<code> 
[HtmlPage1.html] 
 
<div> 
        <h2>Menu</h2> 
        <ul id="menujson"></ul> 
    </div> 
    <script> 
            var dataManager = ej.DataManager({ 
                url: "/api/products", //call the web api controller  
                adaptor: new ej.WebApiAdaptor() 
            }); 
            $("#menujson").ejMenu({ 
                fields: { 
                    dataSource: dataManager, 
                    id: "Id", 
                    text: "Name", 
                } 
            }); 
 
    </script> 
</code> 
To know more details about properties, methods and events of Menu component, please find the below API link: 
Regards, 
Kasithangam 


CONFIRMATION

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.

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

;