5

Sto usando la definizione puro stile rasoio per un menu Kendo:Come faccio inserire una barra di separazione tra i molti gruppi su un menu Kendo UI

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

+2

(Per coloro curioso come [impressionante l'API è] (http://docs.kendoui.com/api/wrappers/aspnet-mvc/Kendo .Mvc.UI.Fluent/MenuItemFactory).) – user2246674

+0

Documentazione davvero ricca lì. – ProfK

risposta

6

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); 
+0

Ho trovato che l'uso di ' ' funzionava ancora meglio - c'era ancora un piccolo spazio nel bordo quando ho usato '


'. La proprietà 'Encoded' è super maneggevole, però, grazie! – Hannele

1

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

Inoltre ho impostato il colore di sfondo perché il separatore non era visibile: "

" L'ho usato per la maggior parte degli articoli superiori (Elementi - non bambini) nel menu di orientamento verticale. – Bronek

+0

Ok - sì, il mio sito è molto vicino ai colori base di Bootstrap che non era un problema nel mio tema. –

0

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

0

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

ho risolto utilizzando questo:

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