Wie legen Sie eine Trennlinie zwischen den vielen Gruppen, die auf die Kendo-UI-Menü

Ich bin mit dem pure Razor-style-definition für einen Kendo-Menü:

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

Finde ich absolut blutige nichts überall auf all die Möglichkeiten des internets, dass man auch Tipps, wie zu tun dies richtig tun. Der nächste, den ich habe, ist die Definition der DataSource in der JavaScript object notation, mit Separatoren, und die Zuordnung zu den grid-oj der client-Seite zur Laufzeit. Dies ist definitiv ein gutes Beispiel für einen Fall, wo können nur noch beten zu allen Göttern, dass die API nicht als superlatively ungeeignet, da die Dokumentation.

(Für diejenigen neugierig, wie genial, das API.)
Wirklich reiche Dokumentation gibt.

InformationsquelleAutor ProfK | 2013-06-16

7

Dies ist alles, was Sie tun müssen. Dachte, es auf meinem eigenen, weil ich konnte nicht finden, eine Antwort, die überall im web.
```
items1.Add().Text("<hr/>").Encoded(false).Enabled(false);
```
- Ich fand, dass mit   gearbeitet, noch besser - es gab immer noch eine kleine Lücke in der Grenze, wenn ich <hr/>. Die Encoded Eigentum ist super-praktisch, aber, danke!
InformationsquelleAutor BobK

Dem < hr /> was hat nicht funktioniert für mich in kendo 2014.1.528

Bedeutet dies:

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

Also ein Beispiel wäre:

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

Zusätzlich habe ich Hintergrundfarbe einstellen, weil der Trenner war nicht sichtbar: "<div class='k-separator" style= " background-color:#94c0d2;'></div>" ich benutzte es, um die meisten der oberen Elemente (Elemente, nicht die Kinder) in die vertikale Position im Menü.
Ok - ja, meine Website ist also sehr nah an der basic Bootstrap-Farben, dass es nicht ein Problem bei meinem theme.

InformationsquelleAutor Robert Achmann

0

Helfen jemand kommen, über dieses Problem in der Zukunft, können Sie ein Trennzeichen direkt mit den folgenden:
```
items.Add().Separator(true);
```
Funktioniert dies mindestens seit v2013.2.918, denn das ist, was ich verwende.

Justin

InformationsquelleAutor Justin Greywolf
0

Habe ich v2016.3.914 und items.Add().Separator(true); schafft eine unerwünschte horizontale Scrollbalken auf einer RTL-Seite.

Ich löste es mit diesem:
```
inner.Add().Separator(true).HtmlAttributes(new { style = "width: 99%;" });
```
InformationsquelleAutor Achilles

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.