How to register onClick listener to dijit Button within GridX?

Question

I'm trying to register my onClick listener to dijit Button placed as in-cell widget withing GridX. I've done the following, basing on example test_grid_cellWidget:

{ field: "save", name:"Save", 
    widgetsInCell: true,
    navigable: true,
    decorator: function(){
        //Generate cell widget template string
        return '<button data-dojo-type="dijit.form.Button" data-dojo-attach-point="btn">Save</button>'
    },
    setCellValue: function(data){
        //"this" is the cell widget
        this.btn.set("label", "Speichern")
        this.btn.connect("onClick", function(){
            alert('clicked')
        })
    }
},

setCellValue is executed successfully, and the label is changed. However, the onClick listener is not registered and is not called, when I click on button. When I use the syntax data-dojo-props="onClick:function" it works, but it requires declaring listener function as global, which is something I'd like to avoid.

Anyway, I have the Button object, and I'm executing the code found in dijit documents, so it should be working. But why nothing is registered in that context?

Answer 1

I've found the answer in GridX wiki: https://github.com/oria/gridx/wiki/How-to-show-widgets-in-gridx-cells%3F

You need to use the field cellWidget.btn._cnnt:

    setCellValue: function(gridData, storeData, cellWidget){
        this.btn.set("label", "Speichern")
        if(cellWidget.btn._cnnt){
            // Remove previously connected events to avoid memory leak.
            cellWidget.btn._cnnt.remove();
        }
        cellWidget.btn._cnnt = dojo.connect(cellWidget.btn, 'onClick', lang.hitch(cellWidget.cell, function(){
            rowSaveClick(this.row)
        }));
    },

Answer 2

I don't know what dojo version you use, but as you use data-dojo-type, I suppose it's 1.7+. First, I would recommend to drop the dot notation of module names and start using the AMD mid syntax instead (i.e.: drop "dijit.form.Button" for "dijit/form/Button", as the dot notation will be dropped in dojo 2.0).

Then, the recommended way of connecting events to widgets is to :

• either define the event as a function (like widget.onClick = function(evt){...})
• or use the "on" method of the widget (like widget.on("click", function(evt){...}))

I prefer to use the second form, as it's more consistent with dojo/on. It consists of using the event name without the "on", and put everything in lowercase. For example, if your widget had an extension point named "onMouseRightClick", you could use it as widget.on("mouserightclick", ...)

Your example would then become :

{ field: "save", name:"Save", 
    widgetsInCell: true,
    navigable: true,
    decorator: function(){
        //Generate cell widget template string
        return '<button data-dojo-type="dijit/form/Button" data-dojo-attach-point="btn">Save</button>'
    },
    setCellValue: function(data){
        //"this" is the cell widget
        this.btn.set("label", "Speichern")
        this.btn.on("click", function(){
            alert('clicked')
        });
    }
},

Note : untested code. I'm just guessing what the problem might be. Let me know if there is still an issue...

Answer 3

I've found that using getCellWidgetConnects works quite well (see docs).

But the docs aren't exactly clear, so it wasn't working for me at first. If you are connecting to a DomNode, the pass 'click' as the event in the connections array. If you are connecting to a Dijit widget, then pass 'onClick'.