This is a migrated thread and some comments may be shown as answers.

Closing menu after clicking

8 Answers 135 Views
Menu
This is a migrated thread and some comments may be shown as answers.
AP
Top achievements
Rank 1
Veteran
AP asked on 27 May 2015, 03:00 PM

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

8 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 29 May 2015, 11:27 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
AP
Top achievements
Rank 1
Veteran
answered on 29 May 2015, 12:49 PM

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.

 

0
Alexander Valchev
Telerik team
answered on 02 Jun 2015, 08:34 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
AP
Top achievements
Rank 1
Veteran
answered on 02 Jun 2015, 08:46 AM

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.

0
Alexander Valchev
Telerik team
answered on 04 Jun 2015, 06:32 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
AP
Top achievements
Rank 1
Veteran
answered on 04 Jun 2015, 08:05 AM

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?

0
AP
Top achievements
Rank 1
Veteran
answered on 04 Jun 2015, 08:34 AM

Finally got it working:-

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

This finds the data attribute from the select event.

0
Petyo
Telerik team
answered on 08 Jun 2015, 06:48 AM
Hi Andrew,

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

Regards,
Petyo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Menu
Asked by
AP
Top achievements
Rank 1
Veteran
Answers by
Alexander Valchev
Telerik team
AP
Top achievements
Rank 1
Veteran
Petyo
Telerik team
Share this question
or