Wie eine Trennlinie zwischen vielen Gruppen einfügen auf ein Kendo UI Menü

Question

ich die reine Razor Stil-Definition für ein Kendo Menü bin mit:

@using Kendo.Mvc.UI 
@(Html.Kendo().Menu() 
    .Name("main-menu") 
    .Items(items1 => 
     { 
      items1.Add().Text("Home").Url(@Url.Action("Index", "Home")); 
      items1.Add().Text("Movements").Items(subs => 
       { 
        subs.Add().Text("Import Data").Action("Import", "VehicleMovementBatch"); 
        subs.Add().Text("View Movements"); 
       }); 
      items1.Add().Text("Presences"); 
      items1.Add().Text("Billing");    
      items1.Add().Text("Config").Items(items2 => 
        { 
         items2.Add().Text("Pricing").Action("Index", "PriceRule"); 
         items2.Add().Text("Users"); 
        });       
      items1.Add().Text("Control"); 
     }) 
) 

ich absolut blutig nichts überall auf allen internets finden, dass weist sogar darauf hin, wie man das richtig macht. Am nächsten kommt es, wenn ich die DataSource in der JavaScript-Objektnotation mit Trennzeichen definiere und sie zur Laufzeit dem Grid auf der Clientseite zuordne. Dies ist definitiv ein gutes Beispiel für einen Fall, wo nur zu allen Göttern beten kann, dass die API nicht so inadäquat ist wie die Dokumentation.

Answer 1

Das ist alles, was Sie tun müssen. Ich habe es selbst herausgefunden, weil ich nirgendwo im Internet eine Antwort finden konnte.

items1.Add().Text("<hr/>").Encoded(false).Enabled(false); 

Answer 2

Die < hr /> was nicht in Kendo für mich arbeiten 2014.1.528

Dies gilt:

children.Add().Text("<div class='k-separator'></div>").Encoded(false).Enabled(false); 

So wäre ein Beispiel:

items.Add().Text("Menu X").ImageUrl(Url.Content("~/Content/img/menux_16E.png")) 
    .Items(children => 
    { 
     children.Add().Text("Item 1").ImageUrl(Url.Content("~/Content/img/item1_16E.png")); 
     children.Add().Text("<div class='k-separator'></div>").Encoded(false).Enabled(false); 
     children.Add().Text("Item 3").ImageUrl(Url.Content("~/Content/img/item3_16E.png")); 
    }); 

Answer 3

Um jemandem zu helfen, in Zukunft auf dieses Problem zu stoßen, können Sie ein Trennzeichen direkt hinzufügen:

items.Add().Separator(true); 

Das funktioniert seit mindestens v2013.2.918, da das ist was ich benutze.

Justin

Answer 4

Ich habe v2016.3.914 und items.Add().Separator(true); erzeugt einen unerwünschten horizontalen Scrollbalken auf einer RTL-Seite.

Ich löste es dies mit:

inner.Add().Separator(true).HtmlAttributes(new { style = "width: 99%;" });