_onBlur event not firing on editable cells in DataGrid when the next click is on another grid widget

[chrisacky]

This is a real edge case which I've had troubles with for some time, but the steps to reproduce go like this:

Steps to Reproduce

1. Have a Datagrid with a editable cell (textbox) in the first column set to singleClickEdit (basically so it's not alwaysEditable).
2. Have a widget such as a DateTextBox? in the second column which is returned via a formatter.
3. Single click the first textbox and type something out.
4. Click on the other widget in the second column so that it received focus and the input from the first column should be blured.

What I would expect to happen:

• It would be expected that the text that you entered in the editable cell textbox widget would fire an _onBlur event which in turn would trigger the _onEditBlur event for the cell widget.
• This would then cause the value for the item to be updated.

What actually happens:

• However, it doesn't do this. Instead, the input stays visible (and editable) even though you have clicked on another cell, and upon the updating the store with your custom widget, the textbox disappears and the text that you originally typed is cleared.

---

This can be fixed by manually overriding the formatNode function in the file dojox/grid/cells/dijit.js so that you add the manual connect.

formatNode: function(inNode, inDatum, inRowIndex){
        if(!this.widgetClass){
                return inDatum;
        }
        if(!this.widget){
                this.widget = this.createWidget.apply(this, arguments);
                // This is the fix
                connect.connect( this.widget, "_onBlur", this, function(e){
                    this._onEditBlur( inRowIndex );
                });
        }else{
                this.attachWidget.apply(this, arguments);
        }
        // Clipped the remaining function for brevity

I would suggest that since this blur behaviour isn't always desirable, that the already existing "commitOnBlur" property is used to connect the event. That way when the column is defined the user provide the column definition.

I've provided a screenshot attachment to explain the issue.

[chrisacky]

Screensht

[chrisacky]

I just realised actually that the connect that I do is wrong, since the inRowIndex that gets passed to the this._onEditBlur function will be wrong for events after the first edit.

This is a less than ideal (but works) fix

this._inRowIndex = inRowIndex;
if(!this.widget){
        this.widget = this.createWidget.apply(this, arguments);
        connect.connect( this.widget, "_onBlur", this, function(){ 
           this._onEditBlur( this._inRowIndex );
            delete this._inRowIndex;
        });
} else {
        this.attachWidget.apply(this, arguments);
}

[bill]

DojoX Grid and EnhancedGrid are deprecated in favor of ​dgrid and ​gridx.

You should upgrade your code to use one of those two grids.

We will consider patches to the old DojoX Grid code though.