Can I setup my dojo dijit form ComboButton to do a onClick or something similar when the user selects a value in the drop down list?

Question

I think I may be using the wrong dojo widget. I just need a dropdown list really, but currently have setup a ComboButton . Can I setup an onClick or onSelect of some sort when the user picks an option inside the ComboButton down down menu? My current onClick is picking up when the user clicks on the text area button, but not the drop down arrow selection. I want an onClick or onSelect action after the user clicks the down arrow button and then selects an option.

            {id: 'identOpModeId', field: 'identOpMode', name:'OpMode', width: '124px',
                navigable: true,
                expandLevel: 'all',
                widgetsInCell: true,
                allowEventBubble: true,
                onCellWidgetCreated: function(cellWidget, cell){
                    var menuItems = OpModeMenuItems.returnOpModeMenuItems(cellWidget);
                    menuItems.forEach( function (menuItem)
                    {
                        cellWidget.sMenu.addChild(menuItem);
                    });
                },
                setCellValue: function(one,two,cellWidget){
                    var rowIndex = cellWidget.cell.row.id;
                    cellWidget.identOpMode.set("label", identMemStore.get(rowIndex).identOpMode);
                },
                getCellWidgetConnects: function(cellWidget, cell){
                    // return an array of connection arguments
                    return [

                        // How do I capture the onClick of the dijitArrowButton button??

                        [cellWidget.identOpMode, 'onClick', function(e){
                            var rowIndex = cellWidget.cell.row.id;
                            // I do NOT need this line - the drop down menu already sets the value! I just need to update the store!!
                            //cellWidget.identOpMode.set("label", identMemStore.get(rowIndex).identOpMode);
                            identMemStore.data[rowIndex-1].identOpMode = identMemStore.get(rowIndex).identOpMode;
                            // cellWidget.data[rowIndex].identOpMode = identMemStore.get(rowIndex).identOpMode;
                            // Add item to userRowChanges
                            updateRows(rowIndex-1, identGridx.row(rowIndex-1).item());
                        }]
                    ];
                },
                decorator: function(){
                    return [
                        '<div data-dojo-attach-point="identOpMode" data-dojo-type="dijit/form/ComboButton" >',
                        '<div data-dojo-attach-point="sMenu" data-dojo-type="dijit/Menu"></div></div>'
                    ].join('');
                }

            },

Answer 1

I think what you're looking for is the onChange event and not the onClick and you might be looking for a DropDownButton instead of a ComboButton but either way, onChange is the method you should be looking for. A good way to hook into the onChange method is to use "dojo/on" and do something like this:

on(this.identOpMode, "change", function() {
   //Do something here
});

In your specific situation, I would actually modify the [cellWidget.identOpMode, 'onClick' part to be 'onChange' instead.

Answer 2

Richard suggestion is spot on. From his suggestion and what I have learned, dojo/on is the correction solution. Here is my solution, using the dijit/form/ComboButton though I may change to a DropDownBox in the future, for now it's working, so I'll leave it.

For my dijit/form/ComboButton , I simply added code to my onClick for each item in the list to grab the data change.

returnOpModeMenuItems: function (CellWidget)
{
    var menu = [];
    var labels = ["Label1","Label2","Label3"];
    labels.forEach( function (label)
    {
        var menuItem = new dijit.MenuItem({
            label : label,
            value : label,
            onClick : function (value) {
                CellWidget.identOpMode.set('label', label);

                var rowIndex = CellWidget.cell.row.id;
                identMemStore.data[rowIndex-1].identOpMode = label;

                updateRows(rowIndex-1, identGridx.row(rowIndex-1).item());
            }
        });
        menu.push(menuItem);
    });
    return menu;
}

For other dojo widgets that don't have onClick's I used the following:

                { id: 'srcSelVideoFrameRateId', field: 'srcSelVideoFrameRate', name: 'Frame Rate', width: '77px',
                    widgetsInCell: true,
                    navigable: true,
                    setCellValue: function(gridData, storeData, cellWidget){
                        var rowIndex = cellWidget.cell.row.index()+1;
                        var spinnerVal = sourceSelVideoTabMemStore.get(rowIndex).srcSelVideoFrameRate;

                        cellWidget.srcSelVideoFrameRate.set('style', "width:55px");
                        cellWidget.srcSelVideoFrameRate.set('value', spinnerVal);
                    },
                    getCellWidgetConnects: function(cellWidget, cell){
                        // return an array of connection arguments
                        return [
                            [cellWidget.srcSelVideoFrameRate, 'onChange', function(e){
                                var rowIndex = cellWidget.cell.row.id;
                                sourceSelVideoTabMemStore.data[rowIndex-1].srcSelVideoFrameRate = cellWidget.srcSelVideoFrameRate.displayedValue;

                                // Add item to userRowChanges
                                updateRows(rowIndex-1, srcSelVideoGridx.row(rowIndex-1).item());
                            }]
                        ];
                    },
                    decorator: function(){
                        return "<input data-dojo-type='dijit/form/NumberSpinner' data-dojo-props='smallDelta:0.1, largeDelta:1.0, constraints:{min:1,max:24,places:1,round:false},' data-dojo-attach-point='srcSelVideoFrameRate' />";
                    }
                },

For basic text editable fields I use the following:

srcSelVideoGridx.edit.connect(srcSelVideoGridx.edit, "onApply", function(cell, success) {
    var item = cell.row.data();
    var rowId = cell.row.id-1;
    console.log('Row with ID ' + rowId + ' is modified. New value: ' + item);
    updateRows(rowId, item);
});