Closing menu after clicking

9 posts, 0 answers
  1. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 27 May 2015 Link to this post

    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

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 29 May 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 29 May 2015 in reply to Alexander Valchev Link to this post

    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.

     

  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 02 Jun 2015 Link to this post

    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!
     
  6. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 02 Jun 2015 in reply to Alexander Valchev Link to this post

    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.

  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 04 Jun 2015 Link to this post

    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!
     
  8. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 04 Jun 2015 in reply to Alexander Valchev Link to this post

    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?

  9. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 04 Jun 2015 Link to this post

    Finally got it working:-

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

    This finds the data attribute from the select event.

  10. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 08 Jun 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready