KendoUI Menubar open on click

Question

I have a KenoUI MenuBar.

Code as per bellow:

@(Html.Kendo().Menu()
    .Name("UserMenu")
    .Events()
    .Items(items =>
     {
         items.Add().Text("Organisation Name");

         items.Add().Text("User Fullname").Items(useritems =>
         {
             useritems.Add().Text("Option 1");
             useritems.Add().Text("Option 2");
             useritems.Add().Text("Option 3");                                
          });

      }));

Pretty simple menu with a sub menu under User Fullname. I want to change this menu bar so that it does not open Option 1, 2, 3 sub menu when one hovers over User Fullname.

Only if you click on User Fullname should that sub menu open.

Anyone have any idea how to do that?

Answer 1

You can use the openOnClick method. By default, this is false, so the menu's open on hover. Setting it to true allows menus to open only when you click on them.

@(Html.Kendo().Menu()
                .Name("UserMenu")
                .OpenOnClick(true)
                .Items(items =>
                {
                    items.Add().Text("Organisation Name");

                    items.Add().Text("User Fullname").Items(useritems =>
                    {
                        useritems.Add().Text("Option 1");
                        useritems.Add().Text("Option 2");
                        useritems.Add().Text("Option 3");                                
                    });

                }));