twitter bootstrap - How do I modify the kendo UI menu's default html? -
kendo ui's default menu great bootstrap's menu awesome. must in order keep same bootstrap menu's structure while calling menus via kendo ui ?
bootstrap menu structure:
<div style="height: 0px;" class="nav-collapse clr collapse"> <ul class="nav pull-left"> <li class="active"><a href="#">home</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">customer <b class="caret"></b></a> <ul class="dropdown-menu"> <li class="nav-header">customer mgt</li> <li class="divider"></li> <li><a href="#">manage</a></li> <li><a href="#">new customer</a></li> <li class="divider"></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">cards <b class="caret"></b></a> <ul class="dropdown-menu"> <li class="nav-header">card mgt</li> <li class="divider"></li> <li><a href="#">manage</a></li> <li><a href="#">diagnosis</a></li> <li class="divider"></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">reports <b class="caret"></b></a> <ul class="dropdown-menu"> <li class="nav-header">report mgt</li> <li class="divider"></li> <li><a href="#">download report</a></li> <li><a href="#">transaction report</a></li> <li class="divider"></li> </ul> </li> <li><a href="#contact">about</a></li> <li><a href="#contact">contact</a></li> </ul> <!-- / header menu --> <!-- search bar --> <form class="navbar-search pull-right"> <input type="text" placeholder="search" class="search-query"> </form> <!-- / search bar --> </div> kendo calling menu
<div style="height: 0px;" class="nav-collapse clr collapse"> <!-- header menu --> @(html.kendo().menu() .name("menu") .items(menu => { menu.add().text("home").action("index", "home"); menu.add().text("customers").items(cust => { cust.add().text("manage").action("index", "customer"); cust.add().text("new customer").action("create", "customer"); }); menu.add().text("cards").items(card => { card.add().text("manage").action("index", "card"); card.add().text("diagnosis").action("diagnosis", "card"); card.add().text("personalise").action("printpersonalise", "card"); }); menu.add().text("reports").items(report => { report.add().text("download report").action("index", "terminaldownloadlog"); report.add().text("transaction report").action("index", "transaction"); }); menu.add().text("about").action("about", "home"); })) </div>
i have been trying solve myself , have come conclusion need either use kendo menu or bootstrap menu.
both rely on own js libs can't use both.
instead used following code create own html helper generates nice hierarchical menus bootstrap.
public static mvchtmlstring menulink(this htmlhelper htmlhelper, string itemtext, string actionname, string controllername, mvchtmlstring[] childelements = null) { var currentaction = htmlhelper.viewcontext.routedata.getrequiredstring("action"); var currentcontroller = htmlhelper.viewcontext.routedata.getrequiredstring("controller"); string finalhtml; var linkbuilder = new tagbuilder("a"); var libuilder = new tagbuilder("li"); if (childelements != null && childelements.length > 0) { linkbuilder.mergeattribute("href", "#"); linkbuilder.addcssclass("dropdown-toggle"); linkbuilder.innerhtml = itemtext + " <b class=\"caret\"></b>"; linkbuilder.mergeattribute("data-toggle", "dropdown"); var ulbuilder = new tagbuilder("ul"); ulbuilder.addcssclass("dropdown-menu"); ulbuilder.mergeattribute("role", "menu"); foreach (var item in childelements) { ulbuilder.innerhtml += item.tostring() + "\n"; } libuilder.innerhtml = linkbuilder.tostring() + "\n" + ulbuilder.tostring(); libuilder.addcssclass("dropdown"); if (controllername == currentcontroller) { libuilder.addcssclass("active"); } finalhtml = libuilder.tostring() + ulbuilder.tostring(); } else { urlhelper urlhelper = new urlhelper(htmlhelper.viewcontext.requestcontext, htmlhelper.routecollection); linkbuilder.mergeattribute("href", urlhelper.action(actionname, controllername)); linkbuilder.innerhtml = itemtext; libuilder.innerhtml = linkbuilder.tostring(); if (controllername == currentcontroller && actionname == currentaction) { libuilder.addcssclass("active"); } finalhtml = libuilder.tostring(); } return new mvchtmlstring(finalhtml); } credit:
http://madushaonline.wordpress.com/2013/09/24/active-links-on-bootstrap-navbar-with-asp-net-mvc/
Comments
Post a Comment