CODEWITHSUNDEEP
javascriptdojo
Nzall
Nzall

Reputation: 3555

How to open dojo widget that inherits from dijit/_HasDropDown programmatically from enclosing widget?

I have the following custom dojo widget:

<div class="${baseClass}">
    <div data-dojo-type="dijit/TitlePane" data-dojo-props="title:'${prefixTitle}', open:false" id="titleNodePane">
        <div id="container"
        class="${baseClass}Container"
        data-dojo-attach-point="containerNode"></div>
    </div>
</div>

With this code:

/**
 * Javascript for ExpandableSearchComponent
 */
define([ "dojo/_base/declare", "dijit/_WidgetBase", "dijit/_TemplatedMixin",
        "dojo/text!./templates/ExpandableSearchComponent.html",
        "dijit/TitlePane", "dijit/_WidgetsInTemplateMixin", "dijit/registry",
        "dojo/on", "dojo/aspect", "dojo/_base/lang" ], function(declare,
        _WidgetBase, _TemplatedMixin, template, TitlePane,
        _WidgetsInTemplateMixin, registry, on, aspect, lang) {

    return declare([ _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin ], {
        templateString : template,
        prefixTitle : "",
        containedWidgetId : "",
        that : this,

        startup : function() {
            this.inherited(arguments);
            var containedWidget = registry.byId(this.containedWidgetId);
            var titlePane = registry.byId("titleNodePane");
            this.own(on(titlePane, "Show", function() {

                containedWidget.openDropDown();

            }.bind(containedWidget)));
            //Other logic

        }
    });

});

It is declared like this:

<div data-dojo-type="js/widgets/ExpandableSearchComponent"                                  
    data-dojo-props="prefixTitle: 'Name: ', containedWidgetId: 'machineSearchView.name'">   
<!-- Other elements including the machineNameStore-->                                                          
    <div data-dojo-type="dijit/form/ComboBox"                                               
        data-dojo-props="store:machineNameStore, searchAttr:'name', value:'${MachineName}'" 
        name="machineSearchView.name" id="machineSearchView.name"></div>                    
</div>

It works almost perfectly, except for 1 thing: the on(titlePane, "Show", function(){}). This is intended to open the dropdown of the contained widget extending _HasDropDown. I'm getting the error Uncaught TypeError: Cannot read property 'domNode' of null on line 139 of _HasDropDown. Apparently, this.dropDown isn't being set until the TitlePane has fully expanded, which breaks openDropDown().

Is there a way to fix this?

Upvotes: 0

Views: 190

Answers (1)

pgianna
pgianna

Reputation: 725

The _HasDropDown mixin also has a loadAndOpenDropDown() function that will create the drop down if it doesn't exist and then open it.

Upvotes: 1

Related Questions