MenuButton using json dataSource

[j.w.clark]

I have been working on this for a couple of days. So far I have the Menu loading but clicking on the menu items crash the menu and deletes all of the menu items.
Here is what I have working at this point:

var MenuButton = isc.MenuButton.create({
autoDraw: false,
title: "MainMenu",
width: 160,
menu: isc.Menu.create({
dataSource: "MenusDS",
canSelectParentItems: false,
reportCollisions: false,
itemClick: function (item) {
isc.say(item.AppURL+" Selected.");
}
})
});

DataSource:

isc.RestDataSource.create({
ID:"MenusDS",
dataFormat : "json",
jsonPrefix : "",
jsonSuffix : "",
fetchSubMenus : false,
fields:[
{name:"Menu", title:"Menu", type:"text", length:128, primaryKey:true, required:true, canEdit:false},
{name:"AppURL", title:"App URL", type:"text", length:255},
{name:"parentID", hidden:true, type:"text", required:true, foreignKey:"MenusDS.Menu",
rootValue:"root", canEdit:false}
],
operationBindings:[
{operationType:"fetch", dataProtocol:"getParams",
dataURL:"https://hvs.llc/route/Accounting/assets/php/Menus.php?action=getMenusList"}
]
});

JSON returned from PHP:

{"response":{"status":0,"startRow":0,"endRow":10,"totalRows":11 ,"data":[
{"Menu":"Menu1",children:[
{"Menu":"SubMenu1","AppURL":"Menu1\/page1.html",ParentID:"Menu1"},
{"Menu":"SubMenu2","AppURL":"Menu1\/page2.html",ParentID:"Menu1"}
]},
{"Menu":"Menu2",children:[
{"Menu":"SubMenu21","AppURL":"Menu2\/page1.php",ParentID:"Menu2"},
{"Menu":"SubMenu22","AppURL":"Menu2\/Page2.php",ParentID:"Menu2"}
]},
{"Menu":"Menu3",children:[
{"Menu":"SubMenu31","AppURL":"Menu3\/page1.html",ParentID:"Menu3"},
{"Menu":"SubMenu32","AppURL":"Menu3\/page2.html",ParentID:"Menu3"}
]},
{"Menu":"Menu4",children:[
{"Menu":"SubMenu41","AppURL":"Menu4\/page1.html",ParentID:"Menu4" }
]}
]}}';

[Isomorphic]

Good start but:
1. what URL do you see when the fetch is performed for a submenu?
2. what data do you return?

You would want the response to be the JSON for the submenu items, in the same format you would use with Menu.create({ items: [data here] });

[j.w.clark]

I'm attempting to recreate something like the example https://smartclient.com/smartclient-...id=treeBinding.

I am creating the submenus JSON with a single fetch from a PHP script. It displays fine, but when the mouse hovers over the submenu Item, the menu crashes and deletes all of the menus items.
I do get several Warnings in the Developer Console.

Menu when first loaded:


Menu after hovering over SubMenu1:

[Isomorphic]

Yes, we understand - but you would need to answer the two questions we posed to figure out what's wrong. You need to get your server's response sync'd up with what you have declared client-side, and it sounds like it's not!

[j.w.clark]

I think I don't understand the questions.

1. what URL do you see when the fetch is performed for a submenu?
--- when the mouse hovers over the submenu item, the mouse over event fires before I have a chance to click on the submenu item and destroys all menu items.

[Isomorphic]

That would be the fetch to the server we're talking about...

The reason it's still happening is that you tried to set fetchSubMenus to false, when the property is actual fetchSubmenus (no capital M).

[Blama]

Hi everyone,

also, the "fetchSubMenus" is on the RestDataSource, while it surly should be on the Menu?!

Best regards
Blama

[j.w.clark]

Thanks everyone,
I removed the "fetchSubmenus".
Blama, thanks, it was not what I wanted anyway, but thanks for letting me know it does in fact go on the Menu.

I kind of think that my JSON response is not formatted correctly and the Data Source fields are not correct for a Menu.
I have tried several different JSON formats and Data Source constructs. The results are not in the format of Menus and Submenus. They end up being in the main menu list, no submenus.

Could someone provide an example?

[j.w.clark]

Thanks again;
I found a typO and now it is working find.