Using dijit/DropDownMenu in a custom WAB widget

[BryceWhiteside]

I'm trying to use dijit/DropDownMenu in a custom WAB widget but can't seem to get it to work. Can anyone point me to some sample code or API docs? Thank you!

[RobertScheitlin__GISP]

Bryce,

   You are probably missing something simple in your code. Can you post your attempt to use the dijit inside your widget?

[BryceWhiteside]

Hi Robert,

Thanks for replying. Here is my Widget.js:

define(

['dojo/_base/declare',

'dojo/parser',

'dijit/DropDownMenu',

'dijit/MenuItem',

'dijit/MenuSeparator',

'dijit/PopupMenuItem',

'jimu/BaseWidget',

'jimu/loaderplugins/jquery-loader!https://code.jquery.com/jquery-3.3.1.min.js, https://code.jquery.com/ui/1.12.1/jquery-ui.min.js'

],

function(

declare,

parser,

DropDownMenu,

MenuItem,

MenuSeparator,

PopupMenuItem,

BaseWidget,

$,

){

    return declare(BaseWidget, {

        baseClass: 'jimu-widget-pagwidget',

        startup: function () {

            var map = this.map;

            $('#txtTest').text('Dijit Test');       

        }

    });

});

And here is my Widget.html:

<div>

    <div id="txtTest"></div>

<div data-dojo-type="dijit/DropDownMenu" id="navMenu">

        <div data-dojo-type="dijit/MenuItem" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconCut',

            onClick:function(){alert('cut!')}">Cut</div>

        <div data-dojo-type="dijit/MenuItem" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconCopy',

            onClick:function(){alert('copy!')}">Copy</div>

        <div data-dojo-type="dijit/MenuItem" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconPaste',

            onClick:function(){alert('paste!')}">Paste</div>

        <div data-dojo-type="dijit/MenuSeparator"></div>

        <div data-dojo-type="dijit/PopupMenuItem">

            <span>Action</span>

            <div data-dojo-type="dijit/DropDownMenu" id="submenu2">

                <div data-dojo-type="dijit/MenuItem" data-dojo-props="onClick:function(){alert('nested #1!')}">Nested #1</div>

                <div data-dojo-type="dijit/MenuItem" onclick="alert('nested #2!')">Nested #2</div>

            </div>

        </div>

    </div>

</div>

I took the example from dijit/DropDownMenu — The Dojo Toolkit - Reference Guide 

Thanks for your help,

Bryce

[BryceWhiteside]

Hi again. Turns out I had to call parser.parse() in the startup function. Problem solved. Thanks for your time.