CODEWITHSUNDEEP
javascriptdojo
blu10
blu10

Reputation: 654

Dojo CheckedMultiSelect drop down, how to open when text is clicked on

i'm using a dojo checkedmulitselect on a page and have it working correctly. How do i configure it though so that the drop down opens no matter where i click on the control?. At the moment it opens only when i click on the arrow portion of the control. Is this possible?

I got this example from http://jsfiddle.net/phusick/894af/

Current code:

require(["dojo/parser", "dijit/form/Form"]);

require([
    "dojo/_base/declare",
    "dojo/_base/lang",
    "dojo/_base/array",
    "dojo/on",
    "dojo/dom",
    "dojo/store/Memory",
    "dojo/store/Observable",
    "dojo/data/ObjectStore",
    "dojox/form/CheckedMultiSelect",
    "dijit/Tooltip",
    "dojo/mouse",
    "dojo/dom-attr",
    "dojo/query",
    "dojo/dom-class",
    "dijit/place",
    "dojo/domReady!"
], function( 
    declare,
    lang,
    array,
    on,
    dom,        
    Memory,
    Observable, 
    DataStore,
    CheckedMultiSelect,
    Tooltip,
    mouse,
    domAttr,
    query,
    domClass,
    place
) {

    var memoryStore = new Memory({
        idProperty: "value",
        data: [
            {value: "CT", label: "Label One"}
        ]
    });

    var dataStore = new DataStore({ 
        objectStore: memoryStore,
        labelProperty: "label" 
    });

    var MyCheckedMultiSelect = declare(CheckedMultiSelect, {

        startup: function() {
            this.inherited(arguments);  
            setTimeout(lang.hitch(this, function() {
                this.dropDownButton.set("label", this.label);            
            }));       

        },

        _updateSelection: function() {
            this.inherited(arguments);                
            if(this.dropDown && this.dropDownButton) {
                var numOptionsSelected = 0;
                var label = "";
                array.forEach(this.options, function(option) {
                    if (option.selected) {
                        label += (label.length ? ", " : "") + option.label;                     
                        numOptionsSelected++;
                    }
                });

                if (numOptionsSelected > 0) {
                  this.dropDownButton.set("label", label.length ? label : this.label);
                }

            }
        }       

    });

    var checkedMultiSelect = new MyCheckedMultiSelect ({
        dropDown: true,
        multiple: true,
        label: 'Code Table',
        name: 'queryType',
        store: dataStore
    }, "placeholder");

    array.forEach(checkedMultiSelect.options, function(option){ 
        option.selected = true;     
    });

    checkedMultiSelect.startup();

});

Upvotes: 0

Views: 2307

Answers (1)

Sebastien Brunot
Sebastien Brunot

Reputation: 431

I manager to do this by updating the jsfiddle example with the following code, just after checkedMultiSelect.startup():

checkedMultiSelect.on('click', function(evt){
    if(evt.target.nodeName == "INPUT"){
        checkedMultiSelect.dropDownButton.toggleDropDown();
    }
});

Upvotes: 1

Related Questions