How do I modify the kendo UI menu's default html?

Question

Kendo UI's default menu is great but Bootstrap's menu is awesome. What must I do in order to keep the same Bootstrap menu's structure while calling the 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 its 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>

did someone answer my question cos I saw something at the end of my question about someone called OnaBai? Thanks in advance for any help ! — equatorlounge, Jul 19 '13 at 06:48

score 1 · Answer 1 · answered Dec 09 '13 at 13:59

I have been trying to solve this myself and have come to the conclusion that you need to either use the Kendo menu or Bootstrap menu.

Both rely on their own JS libs so you can't easily use both.

Instead I used the following code to create my own HTML helper that generates nice hierarchical menus for 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/

hey doesn't seem bad though however, I only had access (at that time) to the view folder of some asp.net mvc project, question is, is it possible to add a function in that folder and what if you need to use it elsewhere in your project ? That was why I was requesting a solution only in HTML; eliminates all the hassles of having server side language in all our views — equatorlounge, Mar 04 '14 at 15:40

score 0 · Answer 2 · answered Jul 19 '13 at 16:25

Finally, since it's taking so much time and I probably have a tight deadline, the TEMPORARY solution i have is to:

decompress the kendo.menu.js in the core file
make a backup first (of course)
hack the core structure and adapt it to the bootstrap html structure

I still wonder if there is a way to extend the kendo.menu.js somewhere but, as mentioned above, it's a temporary solution; hope someone comes up with a cool answer

Thanks !

How do I modify the kendo UI menu's default html?

2 Answers2