Closing menu after clicking

[AP]

I have a menu, which executes a JavaScript call on each item, rather than a link, which then makes an ajax call to update content on the page. This works, however after the menu item is clicked, the menu often stays open.

 

As the refresh isn't always instant (it's loading the reporting services report viewer, and then opening a report), it can look like the click hasn't registered.  How can I force the menu to close after it's been clicked?

 

The only method I can see is a close method, but that requires passing the menu name, something that the called function isn't going to know (and as the menu is dynamically built, the item name may not be unique either).

 

I have tried the CloseOnClick option, but this doesn't work.

 

 The menu definition is:-

 

@(Html.Kendo().Menu()
  .Name("menu") //The name of the menu is mandatory. It specifies the "id" attribute of the widget.
  .BindTo(Model, mappings =>
  {
      mappings.For<BI_II.Models.MenuItem>(binding => binding //define first level of menu
          .ItemDataBound((item, main) => //define mapping between menu item properties and the model properties
              {
                  item.Text = main.MenuName;
                  item.Url = main.FullLink;
                  item.ImageUrl = Url.Content("~/Images/") + main.MenuImage;
              })
          .Children(main => main.Children)); //define which property of the model contains the children
      mappings.For<BI_II.Models.MenuItem>(binding => binding
          .ItemDataBound((item, child) =>
          {
              item.Text = child.MenuName;
              item.Url = child.FullLink;
              item.ImageUrl = Url.Content("~/Images/") + child.MenuImage;

          }));
  })
          .HtmlAttributes(new { style = "font-size:x-small" })



)

Thanks

[Alexander Valchev]

Hi Andrew,

The closeOnClick option is turned on by default. It is applicable only for the sub menus and works as expected on my side. You may test it here.

I am not sure what causes the issue on your side. Did you checked the JavaScript console for nay errors that might give us a clue what is going wrong?

Regards,
Alexander Valchev
Telerik

 

 

[AP]

Alexander,

 

Nothing shows up in the console. Is it because I'm calling the JavaScript function by using a link like:-

javascript:menuSelect('a67a6383-6dfd-46fe-8606-64587e05047d'); ?

 I'm doing this, as I need to pass a report id to the call, so the partial view can create a reportviewer object pointing to the right report. There didn't seem a way to add ids to the menu object, so I could reliably identify what menu item had been clicked. The menu text isn't suitable, as the application builds the menu dynamically from a database, and users could set up multiple menus with the same name if they so desire.

 

[Alexander Valchev]

Hi Andrew,

Did you tried to append the UID as data attribute in the HTML of the menu item? In this way you will be able to read it when the select event fires.

Regards,
Alexander Valchev
Telerik

 

 

[AP]

No - that sounds like it might be the solution. Have you got an example or documentation around this?

I'm not that familiar with the data attribute in HTML.

NB: I'm creating the menu using MVC, not directly using JavaScript.

[Alexander Valchev]

Hеllo,

No - that sounds like it might be the solution. Have you got an example or documentation around this?

The suggested approach uses HTML5 data attributes. This is not a Kendo specific approach, its HTML5 standard: http://html5doctor.com/html5-custom-data-attributes/

Regards,
Alexander Valchev
Telerik

 

 

[AP]

What I meant was an example of how to get the value out of the select event.

I've managed to set the id in the html data attribute:-

 

item.HtmlAttributes.Add("data-menuID",main.MenuID.ToString());

How do I extract this from the select event? Looking in IE's debugger, the element is there, on the this object, under element innerHTML, along with a load of other html.

How can I get the data attribute from the select event?

[AP]

Finally got it working:-

var id = $(e.item).attr("data-menuID");

This finds the data attribute from the select event.

[Petyo]

Hi Andrew,

that approach is correct. jQuery exposes some convenience APIs for data attributes, too. 

Regards,
Petyo
Telerik