CloseOnClick & DataUrlField

[Jerome]

I am not sure why, but when I use DataUrlField, the subMenu refuses to close and stays open.

I even tried forcing the issue by using CloseOnClick(true). If I comment out the DataUrlField, then the menu works as I would expect, closing on click, or if I set it to CloseOnClick(false) it stays open as expected.  As soon as I add the DataUrlField it seems to force the CloseOnClick to false.  

 

Any ideas what I might be doing wrong, or a workaround?

 

Here is the snippet:

@(Html.Kendo().Menu()
               .Name("absMenu")
               .DataTextField("Label")
               .DataSource(ds => ds.Read("GetNavMenus", "NavMenus")
               .Model(model => model.Children("hasChildren")))
               .Orientation(MenuOrientation.Vertical)
               .CloseOnClick(true)
               .HighlightPath(false)
               .Animation(a => a.Open(o => o.SlideIn(SlideDirection.Right).Duration(100)))
               //.DataUrlField("Action")
               )

[Ivan Danchev]

Hi Jerome,

I tested the Menu with the posted configuration and at my end I see no difference in the way the sub menus close with or without DataUrlField set in the Menu. See the .zipped video, which shows how the sub menus close. Note that I am not clicking the parent items, since they also have urls associated with them and will navigate on click. I am not sure whether that is the case with your Menu, or you are navigating only on sub item selection.

Attached you can find a sample runnable project, which I used to test the scenario. Give it a try and let me know in case I am missing something with regard to reproducing the problematic behavior.

Regards,
Ivan Danchev
Progress Telerik

[Jerome]

Ivan,

Thanks for the followup!  Actually your sample is doing the same thing... when you click on the subMenu item, the "action" happens, but the submenu doesn't close.  The reason you can't see it, is because your action is reloading the page from Wikipedia.  If you change the "action" to load the url link in a new page, then go back to your Home Index page, you will notice that the subMenu is still open.  I have attached a slightly modified version of the sample app and have attached... click on Root1->Item 2.1, let wikipedia load, then switch back to the Home tab... 

I also tried this using the Events=>Selected option instead of using the DataUrlField, and get the same eaffect.  See the 2nd Menu for an example of this method.

Maybe I am missunderstanding how calling JS from DataUrlField or an event affects the Menu JS?

Thanks,

Jerome.

PS: the forum won't allow me to attach a ZIP file.... how can I upload it?

[Jerome]

Change the Action to:

new SubItem() { SubItemID = 7, Label = "Item 2.1",  Action = "javascript:window.open(\"https://www.wikipedia.org\", \"Wikipedia\"); void(0);", hasChildren = null },

(for some reason, the forum's formating options won't allow me to make that a code block)

 

and then I tried this for the Events (sorry for the ugliness in this post, still wont let me format it as code):

<div style="width: 200px;">     @(Html.Kendo().Menu()         .Name("absMenu")         .DataTextField("Label")         .DataSource(ds => ds.Read("GetNavMenus", "Home")         .Model(model => model.Children("hasChildren")))         .Orientation(MenuOrientation.Vertical)         .CloseOnClick(true)         .HighlightPath(false)         .Animation(a => a.Open(o => o.SlideIn(SlideDirection.Right).Duration(100)))         .DataUrlField("Action")     )</div><div style="width: 200px;">     @(Html.Kendo().Menu()         .Name("absMenu2")         .DataTextField("Label")         .DataSource(ds => ds.Read("GetNavMenus", "Home")             .Model(model => model.Children("hasChildren")))         .Orientation(MenuOrientation.Vertical)         .CloseOnClick(true)         .HighlightPath(false)         .Animation(a => a.Open(o => o.SlideIn(SlideDirection.Right).Duration(100)))         .Events(e => e.Select("LoadWiki"))         //.DataUrlField("Action")         )</div>                                  <script>     function LoadWiki(e) {         window.open("https://www.wikipedia.org", "Wikipedia"); S    } </script>

[Jerome]

There is an "S" typo at the end of the JS function LoadWiki, that was typed in error as I was posting the last post... please delete the erroneous character before trying to use the the code.

[Jerome]

Pics attached

[Ivan Danchev]

Hi Jerome,

Thank you for the additional details. I've logged this issue for fixing and opened a bug report item in our Feedback Portal on your behalf: https://feedback.telerik.com/aspnet-core-ui/1453233-menu-submenu-does-not-close-on-item-selection-if-navigation-is-triggered-programmatically

For your involvement in identifying this issue with the Menu, I updated your Telerik points.

Regards,
Ivan Danchev
Progress Telerik

[Jerome]

@Ivan,

Ah man, I was really hoping it was something I was doing wrong... 🤨  (that is usually the case 99.999%, just ask my wife)

Thank you for all your help!

Jerome.

[Ivan Danchev]

Jerome,

That was a good one :)

As a temporary workaround, consider closing the submenu by calling the Menu's close API method in the Select event handler:

function LoadWiki(e) {
  e.sender.close();
}

Regards,
Ivan Danchev
Progress Telerik

[Jerome]

@Ivan,

Thanks for the workaround, as that does indeed close the submenu.  Now I have to figure out how to dynamically store subitem's action somewhere, and then retrieve that value from "e" (LoadWiki(e))...

window.open(e.sender.????)

could I use DataContentField or some other attribute?

The online docs and demos are very sparse on this ... :( unless I am looking in the wrong places... I even looked at MVC and AJAX

[Ivan Danchev]

Jerome,

There is no need to store the action in another field, because you can get the selected item's action from the dataItem. If we use the previous example, in which the url is saved in the Action field, you can access that field value, as shown below:

function LoadWiki(e) {
	var itemUid = $(e.item).attr("data-uid");
	var dataSource = e.sender.dataSource;
	var dataItem = dataSource.getByUid(itemUid);

    alert(dataItem.Action)
} 

Regards,
Ivan Danchev
Progress Telerik

[Jerome]

That is awesome!!

That actually helps solve a few other things I was trying to figure out.  

Thanks!!!!