2

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>
4

2 回答 2

1

我一直在尝试自己解决这个问题，并得出结论，您需要使用 Kendo 菜单或 Bootstrap 菜单。

两者都依赖于自己的 JS 库，因此您不能轻松地同时使用它们。

相反，我使用以下代码创建了我自己的 HTML 帮助程序，它为 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);
    }

信用：

http://madushaonline.wordpress.com/2013/09/24/active-links-on-bootstrap-navbar-with-asp-net-mvc/

于 2013-12-09T13:59:42.687 回答
0

最后，由于这需要很多时间，而且我可能有一个紧迫的截止日期，我所拥有的临时解决方案是：

  1. 解压核心文件中的kendo.menu.js
  2. 首先备份（当然）
  3. 破解核心结构并将其调整为引导 html 结构

我仍然想知道是否有办法在某处扩展 kendo.menu.js，但如上所述，这是一个临时解决方案；希望有人想出一个很酷的答案

谢谢 ！

于 2013-07-19T16:25:21.787 回答