Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do insert a separator bar between many groups on a Kendo UI Menu

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.

like image 282
ProfK Avatar asked Jun 16 '13 07:06

ProfK


2 Answers

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);
like image 190
BobK Avatar answered Nov 03 '22 23:11

BobK


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"));
     });
like image 26
Robert Achmann Avatar answered Nov 03 '22 23:11

Robert Achmann