How to customize the specific menu items (menu created using data source)?
Solution:
We can customize the specific jQuery Menu items by overriding the styles using “htmlAttribute” 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.
https://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 “htmlAttribute” has 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 “HtmlAttributes” attribute. 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 “HtmlAttributes” attribute.
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 to “HtmlAttribute” attribute of “MenuFields” 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; }
}
Conclusion
I hope you enjoyed learning about how to customize the specific menu items (menu created using data source).
You can refer to our jQuery Menu’s feature tour page to know about its other groundbreaking feature representations.
For current customers, you can check out our jQuery components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our jQuery Menu and other jQuery components.
If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
