Jak wstawić pasek separatora pomiędzy wieloma grupami w Kendo UI Menu

Question

używam czystej definicji stylu maszynki do Kendo Menu:

@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"); 
     }) 
) 

mogę znaleźć absolutnie krwawe nic nigdzie na wszystkich internets, że nawet podpowiedzi, jak to zrobić właściwie. Najbliższe jest zdefiniowanie notacji obiektu DataSource w JavaScript, z separatorami i przypisanie jej do siatki po stronie klienta w czasie wykonywania. Jest to z pewnością dobry przykład przypadku, w którym można modlić się tylko do wszystkich bogów, że interfejs API nie jest tak nieadekwatny jak dokumentacja.

Answer 1

To wszystko, co musisz zrobić. Sam to wymyśliłem, ponieważ nie znalazłem nigdzie odpowiedzi w Internecie.

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

Answer 2

< hr /> coś nie działa na mnie w kendo 2014.1.528

ten sposób:

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

Więc przykładem będzie:

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

Aby pomóc każdemu, kto spotka się z tym problemem w przyszłości, możesz dodać separator bezpośrednio za pomocą:

items.Add().Separator(true); 

Działa to od co najmniej v2013.2.918, ponieważ to właśnie używam.

Justin

Answer 4

mam v2016.3.914 i items.Add().Separator(true); tworzy niechcianej poziomego paska przewijania na stronę RTL.

I rozwiązać go za pomocą tego:

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