Adding a dynamic Menu with dynamic menucommand using javascript in a windows 8 metro style application RRS feed

  • Question

  • I want to add a menu items with sub-menu items relevant to a collection coming within an xhr response. I have succeeded to render menu items as app bar commands. But what i want to do is creating a new WinJS.UI.Menu() with its subMenu Items as WinJS.UI.MenuCommand() and assign it as a flyout to the app bar commands. Thanks
    Tuesday, May 22, 2012 6:23 AM


All replies

  • Do you mean like this?

    The sample HTML flyout control sample shows how to do this.

    If something different, could you sketch it out for us?


    Jeff Sanders (MSFT)

    Tuesday, May 22, 2012 2:32 PM
  • No, Jeff, this sample you linked to does not show dynamic menu creation.

    The OP wants something like I'm trying to do here:

    add.onclick = function(event) {
            var menu;
            menu = new WinJS.UI.Menu();
            menu.onbeforeshow = function() {
              var command, commands, generator, key, _ref;
              commands = [];
              _ref = qrarget.generators;
              for (key in _ref) {
                generator = _ref[key];
                commands.push(command = new WinJS.UI.MenuCommand());
                command.label = generator.name;
                command.onclick = function() {
                  if (generator.fragment) {
                  } else {
              return menu.showCommands(commands);
            return menu.show(add, "right", "right");

    This will not show the menu, since the MenuCommand elements are not parented inside the Menu element.

    • Edited by phil_ke Friday, June 29, 2012 4:15 AM
    Friday, June 29, 2012 4:15 AM
  • The Context Menu Sample shows this:

        var menu = new Windows.UI.Popups.PopupMenu();
            menu.commands.append(new Windows.UI.Popups.UICommand("Open with", onOpenWith));
            menu.commands.append(new Windows.UI.Popups.UICommand("Save attachment", onSaveAttachment));
            menu.showAsync({ x: e.clientX, y: e.clientY }).then(function (invokedCommand) {
                if (invokedCommand === null) {
                    // The command is null if no command was invoked.
                    WinJS.log && WinJS.log("Context menu dismissed", "sample", "status");

    Jeff Sanders (MSFT)

    Monday, July 2, 2012 3:17 PM