I am using the pure Razor style definition for a 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");
})
)
I can find absolutely bloody nothing anywhere on all the internets, that even hints how to do do this properly. The closest I have is defining the DataSource in JavaScript object notation, with separators, and assigning it to the grid oj the client side at run time. This is definitely a good example of a case where can only pray to all the gods that the API isn't as superlatively inadequate as the documentation.
This is all you need to do. Figured it out on my own because I couldn't find an answer anywhere on the web.
items1.Add().Text("<hr/>").Encoded(false).Enabled(false);
The < hr / > thing didn't work for me in kendo 2014.1.528
This does:
children.Add().Text("<div class='k-separator'></div>").Encoded(false).Enabled(false);
So an example would be:
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"));
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With