Question

Here’s my DataGrid:

// $ is a reference to `this` as it lies in an anonymous function
$.grid = new DataGrid({
    store : $.dataStore,
    query : {id : "*"},
    structure : [
        { 
            noscroll : true,
            cells : [{ name : "Recipe", field : 'name', width : '200px' }],
        },
        {
            cells : [
                [
                 { name : 'ID#', field : 'id', width : '50px'},
                 { name : 'Category', field : 'category', width : '100px'},
                 { name : 'Status', field : 'status', width : '100px'},
                 { name: "Actions", width : '200px', type: dojox.grid.cells._Widget, formatter : $._actionButtons}
                ]
            ] // end cells
        }
    ]
}, $.targetNode)
$.grid.startup();

$.grid.on("RowClick", function(e){
    console.log(this.getItem(e.rowIndex))
})

And my formatter object for the Actions cell:

_actionButtons : function(){
    var _self = this;
    var _args = arguments;
    this.group = new Pane()

    var full = new Button({ 
        label: 'View Full',
        style : { fontSize : '80%'},
        onClick : function(){
            try {
                _self.grid.onRowClick.apply(this, arguments)
            }catch(e){}
        }
    });
    full._destroyOnRemove = true;

    var edit = new Button({
        label : 'Edit',
        style : {fontSize: '80%'}
    });
    edit._destroyOnRemove = true;

    construct.place(full.domNode, this.group.containerNode)
    construct.place(edit.domNode, this.group.containerNode)

    return this.group;
}

I’m trying to get access to the event object that would be passed by a normal onRowClick event on the DataGrid. As it sits now this kinda works, but on the on("RowClick"...) block I get multiple logs. Without the try...catch block I get an error as the rowIndex doesn’t exist in e, then 2 more logs where it does exist.

This is the 4th or so idea I’ve had included pub/sub, emit(), etc. I have a feeling that the multiple logs are caused by the bubbling behavior (Button -> Row -> DataGrid or somesuch), but getting the onRowClick’s event object to get passed into the Buttons created in the formatter seems impossible.

I just want to access the rowIndex (and other DataGrid-esque properties) from the Button widget’s onClick event to process according to the button pressed.

Answer 1

Along the same lines, but here’s what I came up with that seems to be working in a direction where what I’m envisioning will happen. Adjusted cell where the buttons will be:

{ name: "Actions", width : '200px', type: dojox.grid.cells._Widget, formatter : 
    function(){
        return $._actionButtons.call($, arguments);
    }
}

Adjusted onClick function in the returned Button widget:

_actionButtons : function(){
    var _index = arguments[0][1],
        _item  = this.grid.getItem(_index)
        _self  = this;

    // some code removed

    onClick : function(){
        console.log(_self.dataStore.getValue(_item, 'name'), "clicked")
    }
}

I’ll probably end up extending Button to handle this a bit better, but for now, voila!

Sometimes it just helps to write it down and put it out there for your brain to panic and figure out the solution before anyone else does 🙂

Minor update…

There is the formatterScope parameter for the DataGrid, but it applies to all formatter‘s and would therefore mess up anything requiring cell scope and not DataGrid scope. The above method allows me to access everything I need.