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/

Answer 2

In addition to @Craig's solution there is also a way to add only a look&feel of checkboxes via CSS. If you inspect generated HTML, you can see that each row is represented as a table row <tr> with several table cells <td>. The table row of the selected item gets CSS class .dojoxCheckedMultiSelectMenuItemChecked, so I suggest to change styling of the first cell which always has class .dijitMenuItemIconCell:

td.dijitMenuItemIconCell {
    width: 16px;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url('some-unchecked-image-here.png');
}

tr.dojoxCheckedMultiSelectMenuItemChecked td.dijitMenuItemIconCell {
    background-image: url('some-checked-image-here.png');
}

So you will get:

I added this to the jsFiddle I was helping you with before: http://jsfiddle.net/phusick/894af/

Answer 3

The CheckedMultiSelect does not provide checkboxes when the dropDown is set to true. It simply allows the user to click to click multiple items to select.

To implement what you want, take a look at my answer here:

Custom dojo Dropdown widget by inheriting _HasDropdown and _AutoCompleterMixin

In MyCustomDropDown, you will need to build the list of checkboxes and items as a custom widget. I would recommend looking at dojox.form._CheckedMultiSelectMenu and dojox.form._CheckedMultiSelectMenuItem and mimic the functionality there and just give a different ui (with checkboxes).

Answer 4

dojox.form.CheckedMultiSelect should have been showing the checkboxes, this ticket fixes the problem. https://bugs.dojotoolkit.org/ticket/17103