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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to customize the specific menu items (menu created using data source)?

How to customize the specific menu items (menu created using data source)?

Solution:

We can customize the specific menu items by overriding the styles usinghtmlAttribute attribute. The “htmlAttribute attribute is the member fields of “fields” property. When we using the “htmlAttribute” attribute, we need to map this attribute to “fields” property of menu (menu created using data source).

If you want to know more about the “fields” property then please refer the following class reference link for JavaScript, (this link is same as MVC component also since our MVC components are created as wrapper for the JavaScript). The below link showcases all the properties, methods and events supported by each component.

http://help.syncfusion.com/UG/JS_CR/ejMenu.html#fields

JavaScript:

To override the styles of specific menu items (menu created using JSON data source), we need to maintain the style member field in data source. In this field we can add styles for specific menu item. We need to map this member field to “htmlAttribute” property. This “htmlAttributehas applied the styles to corresponding menu items. The “htmlAttribute” automatically apply the styles to corresponding menu items.

<!--Example menu-->

<ul id="menujson"></ul>

<script type="text/javascript">

    var background = { "style": "background-color:#FF0099;" };

    var border = {"class":"border"};

    var data = [

        { id: 1, text: "Group A", parentId: null, styles: background },

        { id: 2, text: "Group B", parentId: null, styles: border },

        { id: 3, text: "Group C", parentId: null },

        //first level child

        { id: 11, parentId: 1, text: "Algeria" },

        { id: 12, parentId: 1, text: "Armenia" },

        { id: 13, parentId: 1, text: "Bangladesh" },

        { id: 14, parentId: 1, text: "Cuba" },

        { id: 15, parentId: 2, text: "Denmark" },

        { id: 16, parentId: 2, text: "Egypt" },

        { id: 17, parentId: 3, text: "Finland" },

        { id: 18, parentId: 3, text: "India" },

        { id: 19, parentId: 3, text: "Malaysia" },

    ];

    jQuery(function ($) {

        $("#menujson").ejMenu({

            width: "300px",

            fields: { dataSource: data, id: "id", parentId: "parentId", text: "text", url: "url", htmlAttribute: "styles" }

        });

    });

</script>

<style type="text/css">

    /*To change the border color of menu with class*/

    .border {

        border: 1px solid green;

    }

    /*To increase the with and height of the menu items*/

    .e-menu .padding > ul > li {

        padding: 10px 24px 10px 35px;

    }

    /*To orride the active element styles*/

    .e-menu.e-horizontal .e-list:hover, .e-menu.e-horizontal .e-list:hover > a, .e-menu.e-horizontal .e-mhover, .e-menu.e-horizontal .e-mhover > a, .e-menu.e-horizontal .e-mhover > span, .e-menu.e-horizontal .e-mfocused, .e-menu.e-horizontal .e-mfocused > a, .e-menu.e-horizontal .e-mfocused > span {

        background: #b6ff00;

        color: #5c5c5c;

    }

</style>

In the above sample we are maintaining the style (“styles”) member field in data source. We have added the styles to it and mapped this member field to “htmlAttribute” property.

MVC:

We can customize the specific menu item (default menu) by adding class and style using “HtmlAttributesattribute. We need to create the IDictionary object for the specific menu item. In that object we can add the class and style to it. And we need to pass those object to corresponding menu item’s HtmlAttributesattribute.

Please refer the bellow code for how to customize the menu item in MVC.

[CSHTML]

@{IDictionary<string, object> parameters = new Dictionary<string, object>();

parameters.Add("style", "border:1px solid green");

parameters.Add("class", "background");

}

@Html.EJ().Menu("menuEvents").Items(items =>

{

    items.Add().Url("").Id("File").Text("File").HtmlAttributes(parameters).Children(child =>

        {

            child.Add().Url("").Id("New").Text("New");

            child.Add().Url("").Text("Open");

            child.Add().Url("").Text("Save");

        });

    items.Add().Url("").Id("Edit").Text("Edit").Children(child =>

    {

        child.Add().Url("").Text("Undo").HtmlAttributes(parameters);

        child.Add().Url("").Text("Redo");

        child.Add().Url("").Text("Mobile MVC");

    });

    items.Add().Url("").Id("View").Text("View").Children(child =>

    {

        child.Add().Url("").Text("Print Layout");

        child.Add().Url("").Text("Show ruler");

        child.Add().Url("").Text("Show spelling suggestion");

    });

}).Width("600")

<style>

    /*To change the background color of menu item with class*/

    .background {

        background-color:#FF0099;

    }

    /*To increase the with and height of the menu items*/

    .e-menu .padding > ul > li {

        padding: 10px 24px 10px 35px;

    }

    /*To orride the active element styles*/

    .e-menu.e-horizontal .e-list:hover, .e-menu.e-horizontal .e-list:hover > a, .e-menu.e-horizontal .e-mhover, .e-menu.e-horizontal .e-mhover > a, .e-menu.e-horizontal .e-mhover > span, .e-menu.e-horizontal .e-mfocused, .e-menu.e-horizontal .e-mfocused > a, .e-menu.e-horizontal .e-mfocused > span {

        background: #b6ff00;

        color: #5c5c5c;

    }

</style>

We can customize the specific menu item (menu created by JSON data), we need to declare the member field in class file and create the IDictionary object for specific menu item in controller page. In that object we can add the class or style of corresponding menu items and pass this object to corresponding menu data source members field. Then map this field toHtmlAttribute attribute ofMenuFields” property.

The bellow snippet is used to show how to customize the menu item (menu created by JSON data),

[CSHTML]

@Html.EJ().Menu("menujson").MenuFields(f => f.Datasource((IEnumerable<MenuJson>)ViewBag.datasource).Id("pid").Text("mtext").ParentId("parent").HtmlAttribute("style"))

 

<style>

    /*To change the background color of menu item with class*/

    .background {

        background-color: #FF0099;

    }

    /*To increase the with and height of the menu items*/

    .e-menu .padding > ul > li {

        padding: 10px 24px 10px 35px;

    }

    /*To orride the active element styles*/

    .e-menu.e-horizontal .e-list:hover, .e-menu.e-horizontal .e-list:hover > a, .e-menu.e-horizontal .e-mhover, .e-menu.e-horizontal .e-mhover > a, .e-menu.e-horizontal .e-mhover > span, .e-menu.e-horizontal .e-mfocused, .e-menu.e-horizontal .e-mfocused > a, .e-menu.e-horizontal .e-mfocused > span {

        background: #b6ff00;

        color: #5c5c5c;

    }

</style>

[Controllers.cs]

List<MenuJson> menu = new List<MenuJson>();

IDictionary<string, object> parameters = new Dictionary<string, object>();//object for htmlattribute

public ActionResult Index()

{

    parameters.Add("style", "border:1px solid green");//style added to object

    parameters.Add("class", "background");//class added to object

    menu.Add(new MenuJson { pid = 1, mtext = "Group A", parent = null, style = parameters });//style and class are added

    menu.Add(new MenuJson { pid = 2, mtext = "Group B", parent = null });

    menu.Add(new MenuJson { pid = 3, mtext = "Group C", parent = null });

    menu.Add(new MenuJson { pid = 11, parent = "1", mtext = "Algeria" });

    menu.Add(new MenuJson { pid = 12, parent = "1", mtext = "Armenia" });

    menu.Add(new MenuJson { pid = 13, parent = "1", mtext = "Bangladesh" });

    menu.Add(new MenuJson { pid = 14, parent = "1", mtext = "Cuba" });

    menu.Add(new MenuJson { pid = 15, parent = "2", mtext = "Denmark", style = parameters });

    menu.Add(new MenuJson { pid = 16, parent = "2", mtext = "Egypt" });

    menu.Add(new MenuJson { pid = 17, parent = "3", mtext = "Finland" });

    menu.Add(new MenuJson { pid = 18, parent = "3", mtext = "India" });

    menu.Add(new MenuJson { pid = 19, parent = "3", mtext = "Malaysia" });

    ViewBag.datasource = menu;

    return View();

}

 

public class MenuJson

{

    public string mtext { get; set; }

    public int pid { get; set; }

    public string parent { get; set; }

    public IDictionary<string, object> style { get; set; }

}

Article ID: Published Date: Last Revised Date: Platform: Control:
4304 03/17/2015 03/17/2015 JavaScript ejMenu
Tags:
Did you find this information helpful?
Add Comment
You must log in to leave a comment

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