Search results

Data source binding and Custom menu items

Data binding

The Menu supports data source bindings such as array of JavaScript objects that can be structured as either hierarchical or self-referential data.

Hierarchical data

The Menu can be populated with hierarchical data source by assigning it to the items property, and the fields with corresponding keys can be mapped to the fields property.

JSON data

The Menu can generate its menu items through an array of complex data source by mapping fields from the fields property.

razor
LocalData.cs
Model.cs
@Html.EJS().Menu("menu").Items(ViewBag.menuItems).Fields(ViewBag.menuFields).Render()

<style>
    body {
        margin-top: 100px;
        text-align: center;
    }
</style>
// Local Data
public ActionResult LocalData()
{
    // For MenuFieldSettings type, include Syncfusion.EJ2.Navigations in the using directive section.
    MenuFieldSettings menuFields = new MenuFieldSettings()
    {
        Text = new string[] { "continent", "country", "language" },
        Children = new string[] { "countries", "languages" }
    };
    // Assign Local data from Model to ViewBag.menuItems
    ViewBag.menuItems = Model.GetLocalData();
    ViewBag.menuFields = menuFields;
    return View();
}
public class Model
{
    public static List<object> GetLocalData()
    {
        List<object> data = new List<object>()
            {
                new
                {
                    continent = "Asia",
                    countries = new List<object>()
                    {
                        new
                        {
                            country = "China",
                            languages = new List<object>()
                            {
                                new { language= "Chinese"},
                                new { language= "Cantonese"}
                            }
                        },
                        new {
                            country = "India",
                            languages =new List<object>() {
                                new { language= "English"},
                                new { language= "Hindi"},
                                new { language= "Tamil"}
                            }
                        },
                        new {
                            country = "Japan",
                            languages =new List<object>() {
                                new { language= "Japanese"}
                            }
                        }
                    }
                },
                new
                {
                    continent = "Africa",
                    countries = new List<object>()
                    {
                        new {
                            country = "Nigeria",
                            languages =new List<object>() {
                                new { language= "English"},
                                new { language= "Hausa"}
                            }
                        },
                        new
                        {
                            country = "Egypt",
                            languages =new List<object>() {
                                new { language= "Arabic"}
                            }
                        },
                        new
                        {
                            country = "South Africa",
                            languages =new List<object>() {
                                new { language= "Tswana"},
                                new { language= "Swati"}
                            }
                        }
                    }
                },
                new
                {
                    continent = "North America",
                    countries = new List<object>()
                    {
                        new
                        {
                            country = "Canada",
                            languages =new List<object>() {
                                new { language= "French"}
                            }
                        },
                        new
                        {
                            country = "Mexico",
                            languages =new List<object>() {
                                new { language= "Spanish"}
                            }
                        },
                        new
                        {
                            country = "USA",
                            languages =new List<object>() {
                                new { language= "English"}
                            }
                        }
                    }
                },
                new
                {
                    continent = "South America",
                    countries = new List<object>()
                    {
                        new
                        {
                            country = "Brazil",
                            languages =new List<object>() {
                                new { language= "Portuguese"}
                            }
                        },
                        new
                        {
                            country = "Colombia",
                            languages =new List<object>() {
                                new { language= "Spanish"}
                            }
                        },
                        new
                        {
                            country = "Argentina",
                            languages =new List<object>() {
                                new { language= "Spanish"},
                            }
                        }
                    }
                },
                new
                {
                    continent = "Oceania",
                    countries = new List<object>()
                    {
                        new { country = "Australia"},
                        new { country = "New Zealand"},
                        new { country = "Samoa"}
                    }
                }
            };
        return data;
    }
}

Self-referential data

Menu can be populated from self-referential data structure that contains array of JSON objects with parentId mapping.

You can directly assign self-referential data to the items property, and map all the field members with corresponding keys from self-referential data to fields property.

To render the root level nodes, specify the parentId as null or no need to specify the parentId in data source.

In the following example, id, pId, and text columns from self-referential data have been mapped to itemId, parentId, and text fields, respectively.

razor
SelfReferential.cs
@Html.EJS().Menu("menu").Items(ViewBag.menuItems).Fields(ViewBag.menuFields).Render()

<style>
    body {
        margin-top: 100px;
        text-align: center;
    }
</style>
// Self Referential Data
public ActionResult SelfReferential()
{
    List<object> menuItems = new List<object>()
            {
                new { id = "parent1", text = "Events" },
                new { id = "parent2", text = "Movies" },
                new { id = "parent3", text = "Directory" },
                new { id = "parent4", text = "Queries", pId = "null"  },
                new { id = "parent5", text = "Services", pId = "null" },
                new { id = "parent6", text = "Conferences", parentId = "parent1" },
                new { id = "parent7", text = "Music", parentId = "parent1" },
                new { id = "parent8", text = "Workshops", parentId = "parent1" },

                new { id = "parent9", text = "Now Showing", parentId = "parent2" },
                new { id = "parent10", text = "Coming Soon", parentId = "parent2" },

                new { id = "parent10", text = "Media Gallery", parentId = "parent3" },
                new { id = "parent11", text = "Newsletters", parentId = "parent3" },

                new { id = "parent12", text = "Our Policy", parentId = "parent4" },
                new { id = "parent13", text = "Site Map", parentId = "parent4" },
                new { id = "parent14", text = "Pop", parentId = "parent7" },
                new { id = "parent15", text = "Folk", parentId = "parent7" },
                new { id = "parent16", text = "Classical", parentId = "parent7" }
            };

    // For MenuFieldSettings type, include Syncfusion.EJ2.Navigations in the using directive section.
    MenuFieldSettings menuFields = new MenuFieldSettings()
    {
        ItemId = "id",
        Text = "text",
        ParentId = "parentId"
    };

    ViewBag.menuItems = menuItems;
    ViewBag.menuFields = menuFields;
    return View();
}

HTML element

The Menu can be initialized using <UL> element that contains a collection of <LI> elements. A <LI> item acts as a menu item of the Menu, and the sub <UL> element inside the <LI> element acts as a sub menu item of its preceding menu item.

razor
HTMLElement.cs
@*HTML Element to render Menu*@
<ul id="menu">
    <li id="leafy_salad">
        <a>Leafy</a>
        <ul>
            <li>Broccoli</li>
            <li>Cabbage</li>
            <li>Spinach</li>
        </ul>
    </li>
    <li id="beans">
        <a>Beans</a>
        <ul>
            <li>Chickpea</li>
            <li>Green bean</li>
            <li>Horse gram</li>
        </ul>
    </li>
    <li id="bulb_stem">
        <a>Bulb and Stem</a>
        <ul>
            <li>Pearl onion</li>
            <li>Garlic</li>
            <li>Shallot</li>
            <li>Lotus root</li>
        </ul>
    </li>
    <li id="root_tuberous">
        <a>Root</a>
        <ul>
            <li>Beetroot</li>
            <li>Carrot</li>
            <li>Ginger</li>
            <li>Turmeric</li>
        </ul>
    </li>
    <li id="pod">
        <a>Podded</a>
        <ul>
            <li>American groundnut</li>
            <li>Drumstick</li>
            <li>Horse gram</li>
            <li>Peanut</li>
        </ul>
    </li>
</ul>
<style>
    body {
        margin-top: 100px;
        text-align: center;
    }
</style>

@Html.EJS().Menu("menu").Render();
public ActionResult Index()
{
    return View();
}

Custom menu items

The Menu can be customized using Essential JS2 Template engine to render the elements.

To customize menu items in your application, set your customized template string to the template property. In the following example, the menu has been rendered with customized menu items.

razor
Template.cs
@Html.EJS().Menu("menu").Items(ViewBag.data).Fields(ViewBag.menuFields).Template("#menuTemplate").Render()

<script id="menuTemplate" type="text/x-template">
    ${if(category)}
    ${category}
    ${else if (value && url)}
    <div class="e-avatar e-avatar-small image" style="background-image: url(images/${url}.png);">${value}</div>
    ${else if (support)}
    <ul>
        ${for(val of support)}
        <li>
            ${val.value}
            ${if(val.count)}
            <span class='e-badge e-badge-success'>${val.count}</span>
            ${/if}
        </li>
        ${/for}
    </ul>
    ${else}
    <div tabindex="0" class="e-card">
        <div class="e-card-header">
            <div class="e-card-header-caption">
                <div class="e-card-header-title">About Us</div>
            </div>
        </div>
        <div class="e-card-content">
            ${about.value}
        </div>
        <div class="e-card-actions">
            <button class="e-btn e-outline">
                Read More
            </button>
        </div>
    </div>
    ${/if}
</script>
<style>
    body {
        margin-top: 100px;
        text-align: center;
    }
    .menu-control {
        margin-top: 45px;
        text-align: center;
    }

    /**
    * Common customization 
    */
    .e-bigger .e-menu-wrapper.e-control ul.e-ul .e-menu-item,
    .e-menu-wrapper.e-control ul.e-ul .e-menu-item {
        display: flex;
        height: auto;
        padding: 0;
    }

    /**
    * Avatar customization
    */
    .e-bigger .e-menu-wrapper ul .e-menu-item .e-avatar {
        background-size: auto;
        text-indent: 40px;
    }

    .e-menu-wrapper ul .e-menu-item .e-avatar {
        background-color: inherit;
        background-position: 0;
        background-size: 25px;
        color: inherit;
        font-size: inherit;
        height: inherit;
        //justify-content: left;
        margin: 0 10px;
        width: 100%;
        text-indent: 35px;
    }

    /**
    * Badge customization
    */
    .e-menu-wrapper ul .e-menu-item ul li {
        padding: 0 10px;
    }

    .e-bigger .e-menu-wrapper ul .e-menu-item ul li .e-badge {
        margin: 18px 0px 0px 10px;
    }

    .e-menu-wrapper ul .e-menu-item ul li .e-badge {
        float: right;
        margin: 13px 0px 0px 10px;
    }

    .e-menu-wrapper ul .e-menu-item ul li:hover {
        background-color: #eee;
    }

    .fabric .e-menu-wrapper ul .e-menu-item ul li:hover {
        background-color: #eaeaea;
    }

    .bootstrap .e-menu-wrapper ul .e-menu-item ul li:hover {
        background-color: #e6e6e6;
    }

    .highcontrast .e-menu-wrapper ul .e-menu-item ul li:hover {
        background-color: #685708;
    }

    /**
    * Card customization
    */
    .e-bigger .e-menu-wrapper ul.e-ul .e-menu-item .e-card {
        width: 320px;
    }

    .e-menu-wrapper ul.e-ul .e-menu-item .e-card {
        width: 290px;
        font-size: inherit;
        cursor: default;
        background-color: inherit;
        border-color: transparent;
    }

    .e-menu-wrapper ul.e-ul .e-menu-item .e-card .e-card-content {
        white-space: normal;
        color: inherit;
        padding-top: 0;
        text-align: justify;
        font-size: inherit;
        }

    .e-bigger .e-menu-wrapper ul.e-ul .e-menu-item .e-card .cb-icons {
        width: 40px;
        font-size: 40px;
        height: 40px;
    }

    .e-menu-wrapper ul.e-ul .e-menu-item .e-card .cb-icons {
        width: 30px;
        font-size: 30px;
        height: 30px;
    }

    .e-menu-wrapper ul.e-ul .e-menu-item .e-card .e-card-btn {
        background-color: inherit;
    }
</style>
// Custom Menu Items
public ActionResult CustomMenuItems()
{
    List<object> data = new List<object>() {
                new {
                    category = "Products",
                    options = new List<object>(){
                        new { value= "JavaScript", url= "javascript" },
                        new { value= "Angular", url= "angular" },
                        new { value= "ASP.NET Core", url= "core" },
                        new { value= "ASP.NET MVC", url= "mvc" }
                    }
                },

                new  {
                    category = "Services",
                    options = new List<object>(){
                        new  {
                            support = new List<object>() {
                                new { value= "Application Development", count= "1200+" },
                                new { value= "Maintenance & Support", count= "3700+" },
                                new { value= "Quality Assurance" },
                                new { value= "Cloud Integration", count= "900+" }
                            }
                        }
                    }
                },

                new {
                    category = "About Us",
                    options =  new List<object>(){
                        new {
                            about = new List<object>() { new { value = "We are on a mission to provide world-class best software solutions for web, mobile and desktop platforms. Around 900+ applications are desgined and delivered to our customers to make digital & strengthen their businesses." } }[0]
                        }
                    }
                },
                new { category = "Careers" },
                new { category = "Sign In" }
            };

    // For MenuFieldSettings type, include Syncfusion.EJ2.Navigations in the using directive section.
    MenuFieldSettings menuFields = new MenuFieldSettings()
    {
        Text = new string[] { "category", "value" },
        Children = "options"
    };
    ViewBag.data = data;
    ViewBag.menuFields = menuFields;
    return View();
}

See Also