Come faccio inserire una barra di separazione tra i molti gruppi su un menu Kendo UI

Question

Sto usando la definizione puro stile rasoio per un menu Kendo:

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

posso trovare assolutamente sanguinosa nulla in qualsiasi punto tutte le internet, che suggerisce anche come farlo correttamente. Il più vicino che ho è la definizione del DataSource nella notazione di oggetti JavaScript, con separatori, e l'assegnazione alla griglia del lato client in fase di esecuzione. Questo è sicuramente un buon esempio di un caso in cui solo pregare tutti gli dei che l'API non sia così superlativamente inadeguata come la documentazione.

Answer 1

Questo è tutto ciò che devi fare. Ho capito da solo perché non sono riuscito a trovare una risposta da nessuna parte sul web.

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

Answer 2

Il < hr /> cosa non ha funzionato per me nel kendo 2014.1.528

Questo fa:

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

Così Un esempio potrebbe essere:

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

Per aiutare chiunque possa incontrare questo problema in futuro, è possibile aggiungere un separatore direttamente con il seguente:

items.Add().Separator(true); 

Questo funziona almeno dal v2013.2.918, poiché questo è quello che sto usando.

Justin

Answer 4

Ho v2016.3.914 e items.Add().Separator(true); crea una barra di scorrimento orizzontale indesiderata su una pagina RTL.

ho risolto utilizzando questo:

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