MultiSelectCombobox issue in dojo

Question

I needed the combobox with checkboxes in front of each option, to select multiple options. I tried using CheckedMultiSelect using "dropdown:true",

It shows the value in the combobox like, 2 item(s) selected, 1 item(s) selected,etc when I select items.

How to show the values selected in the text area of combobox separated by delimiter??

Should css or HTML or someotherthing has to be changed for checkedMultiSelect??

Thanks in advance.

Answer 1

As for your second question, you have to extend dojox.form.CheckedMultiSelect class and override _updateSelection and startup methods:

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 label = "";
            array.forEach(this.options, function(option) {
                if(option.selected) {
                    label += (label.length ? ", " : "") + option.label;
                }
            });

            this.dropDownButton.set("label", label.length ? label : this.label);
        }
    }

});

Use MyCheckedMultiSelect instead of dojox.form.CheckedMultiSelect:

var checkedMultiSelect = new MyCheckedMultiSelect ({
    dropDown: true,
    multiple: true,
    label: "Select something...",
    store: dataStore
}, "placeholder");

checkedMultiSelect.startup();

Again, I added this to the jsFiddle: http://jsfiddle.net/phusick/894af/