Home/ Questions/Q 9139569
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T09:24:17+00:00

I’m trying to create a dijit DropDownButton with a DropDownMenu and populate it with

  • 0

I’m trying to create a dijit DropDownButton with a DropDownMenu and populate it with menu items using dojo mvc. Is this possible or do I need to manually create/delete MenuItems? I have tried the below but the DropDownMenu is not getting populated.

<div data-dojo-attach-point="person_select_btn" data-dojo-type="dijit/form/DropDownButton">
    <div data-dojo-attach-point="person_list_drop_menu" data-dojo-type="dijit/DropDownMenu">
        <div data-dojo-type="dojox/mvc/Repeat" 
             data-dojo-props="exprchar: '#' children: at(this.personListModel, 'model')">
            <div data-dojo-type="dijit/MenuItem"
                 data-dojo-props="label: at('rel:#{this.index}','personName')">
            </div>
        </div>
    </div>
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Dojo 1.8 introduced dojox/mvc/WidgetList which effectively replaces dojox/mvc/Repeat. There is a way to create repeating menu items with dojox/mvc/WidgetList, like (replace /path/to/dojotoolkit with the path of Dojo Toolkit in your environment):

    <!DOCTYPE html>
<html>
    <head>
        <link id="themeStyles" rel="stylesheet" href="/path/to/dojotoolkit/dijit/themes/claro/claro.css"/>
        <link rel="stylesheet" href="/path/to/dojotoolkit/dijit/themes/claro/document.css"/>
        <script type="text/javascript" src="/path/to/dojotoolkit/dojo/dojo.js" data-dojo-config="parseOnLoad: 0, isDebug: 1, async: 1, mvc: {debugBindings: 1}"></script>
        <script type="text/javascript">
            require([
                "dojo/parser",
                "dijit/Menu",
                "dijit/MenuItem",
                "dojox/mvc/getStateful",
                "dojo/domReady!"
            ], function(parser, Menu, MenuItem, getStateful){
                menuTemplateString = Menu.prototype.templateString; // So that dijit/Menu and dojox/mvc/WidgetList mix can refer to dijit/Menu's original templateString

                windowContextMenuData = getStateful([
                    {label: "Item One", onClick: function(){ alert("Hello world One"); }},
                    {label: "Item Two", onClick: function(){ alert("Hello world Two"); }},
                    {label: "Item Three", onClick: function(){ alert("Hello world Three"); }},
                    {label: "Item Four", onClick: function(){ alert("Hello world Four"); }},
                    {label: "Item Five", onClick: function(){ alert("Hello world Five"); }},
                    {label: "Item Six", onClick: function(){ alert("Hello world Six"); }},
                    {label: "Item Seven", onClick: function(){ alert("Hello world Seven"); }},
                    {label: "Item Eight", onClick: function(){ alert("Hello world Eight"); }},
                    {label: "Item Nine", onClick: function(){ alert("Hello world Nine"); }},
                    {label: "Item Ten", onClick: function(){ alert("Hello world Ten"); }}
                ]);

                parser.parse();
            });
        </script>
    </head>
    <body class="claro" role="main">
        <script type="dojo/require">at: "dojox/mvc/at"</script>
        <div id="windowContextMenu"
         data-dojo-type="dijit/Menu"
         data-dojo-mixins="dojox/mvc/WidgetList"
         data-dojo-props='contextMenuForWindow: true, style: "display: none;", children: windowContextMenuData, templateString: menuTemplateString'
         data-mvc-child-type="dijit/MenuItem"
         data-mvc-child-props='"*": at(this.target, "*")'>
        </div>
    </body>
</html>

    Above approach won’t work with different types of menus (like CheckedMenuItem), though. Upcoming release of Dojo will address that: http://trac.dojotoolkit.org/changeset/30158/dojo

    • 0