Search code examples
menudojopositioning

How do I move a widget around on the screen?


I have a Menu widget that I want to display whenever the user clicks on specific dom elements, but I don't want a MenuBar. What's the best way to do this? I've tried attaching click handlers to the relevant DOM elements and having the click handler display the Menu, but I can only get it to display the Menu in the area where the original declarative markup would have been rendered. I can't get it to move at all. I'm attempting to use dojo.style(myWidget.domNode, 'top', calculatedTop) (and the equivalent with 'left'). What (obvious thing) am I missing?

Thanks.


Solution

  • Since you are using the dijit's default menu widget, I would think that you just need to specify the property targetNodeIds on the Menu Widget (reference) to define where the context menu is relevant:

    targetNodeIds (Defined by dijit.Menu)
        Array of dom node ids of nodes to attach to. Fill this with nodeIds upon widget creation and it becomes context menu for those nodes.
    

    To get the popup showing on left click I believe you'd want to use the property leftClickToOpen:

    // leftClickToOpen: [const] Boolean
    //      If true, menu will open on left click instead of right click, similiar to a file menu.
    //defaults to false
    leftClickToOpen: false,
    

    Specifying this declaratively would look like:

    <div data-dojo-type="dijit.Menu" data-dojo-props="targetNodeIds: ['nodeId1','nodeId2','nodeId3'], leftClickToOpen:true"
            style="display: none;">
    <!-- Your content here -->
    </div>