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>

Answer 1

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/

Answer 2

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

1. decompress the kendo.menu.js in the core file
2. make a backup first (of course)
3. 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 !