Как изменить html по умолчанию в меню интерфейса кендо?

Question

Меню Kendo UI по умолчанию отлично, но меню Bootstrap потрясающе. Что я должен сделать, чтобы сохранить структуру меню Bootstrap при вызове меню через kendo ui?

Структура меню начальной загрузки:

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

кендо вызывает его меню

<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

Я пытался решить эту проблему самостоятельно и пришел к выводу, что вам нужно либо использовать меню 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/

Answer 2

Наконец, поскольку это занимает так много времени и у меня, вероятно, сжатые сроки, ВРЕМЕННОЕ решение, которое у меня есть, заключается в следующем:

1. распакуйте kendo.menu.js в основной файл
2. сначала сделайте резервную копию (конечно)
3. взломать структуру ядра и адаптировать ее к структуре HTML начальной загрузки

Я все еще задаюсь вопросом, есть ли способ расширить kendo.menu.js где-нибудь, но, как упоминалось выше, это временное решение; надеюсь, кто-нибудь придумает крутой ответ

Спасибо!