multiple selection dropdown?

How can I create multiple selection dropdown? For example
see this URL http://www.codeproject.com/asp/multiselectdropdown.asp

Thanks

Alex,
Would you please comment on this question?

Thanks

You can allow multiple selection in combo popup using selection mode property and also disable closing popup on click -

<style>

#myCombo-popup .aw-items-selected {background: #ccc}

</style>
<script>

    var combo = new AW.UI.Combo;
    combo.setId("myCombo");

    combo.setItemText(function(i){return "item" + i});
    combo.setItemCount(30);

    combo.setSelectionMode("multi");
    combo.onCurrentItemChanged = null;

    combo.onSelectedItemsChanged = function(items){
        var i, a = [];
        for (i=0; i<items.length; i++){
            a[i] = this.getItemText(items[i]);
        }
        this.setControlText(a.join(", "));
    }

    document.write(combo);

</script>

On the first glance it works very similar to the one in your link.

Thank you

Alex,
Would you please show me how to add the above combo to a grid?

Thanks

Alex,
Would you please also show me how to write a function for
combo.onCurrentItemChanged ?

Thanks again

Alex,

I tired very hard to find answer to above questions without success.
Would you please answer the above questions?

Thanks

Mohammad,

Sorry for the delay - there was a nasty bug in template focus code, which I could not find for a while. Here is the example code, basically you should use normal combo template and modify a List control, which is used as a popup -

var list = new AW.UI.List;

list.setItemText(function(i){return "item" + i});
list.setItemCount(30);

list.setSelectionMode("multi");

list.onControlActivating = function(){
    this.lock();
}

list.onSelectedItemsChanged = function(items){
    try {
        var i, a = [];
        for (i=0; i<items.length; i++){
            a[i] = this.getItemText(items[i]);
        }

        var s = a.join(", ");
        this.$owner.setCellText(s, this.$0, this.$1);

        var e = this.$owner.getCellTemplate(this.$0, this.$1).getContent("box/text").element();
        if (AW.ie){
            e.innerHTML = s;
        }
        else {
            e.value = s;
        }
        e = null;
    }
    catch(err){
        // ignore errors
    }
}


var obj = new AW.UI.Grid;
obj.setCellData(function(col, row){return col + "." + row});
obj.setHeaderText("header");

obj.setColumnCount(10);
obj.setRowCount(10);
obj.setCellEditable(true);

obj.setCellTemplate(new AW.Templates.Combo, 1);

obj.onPopupTemplateChanged = function(){return true}; // cancel the default handler
obj.setPopupTemplate(list, 1);

document.write(obj);

Alex,

I am trying to preselect some of the items of the dropdown menu for each
row. Each will have a different set of selections.

I added the following line of code to your above example. This obviously gives me the same set of the preselections for every row.

Would you please tell me how to make the preselection different for each row?

Thanks
MS

var list = new AW.UI.List;
var array = [3, 5, 8];
list.setSelectedItems(array);