Modal dialog not closing properly if initialized in different container then the grid itself with "Cannot read property 'focus' of undefined"

An exception is being thrown while selecting different rows :

The code from 16-1.lob :

_selectionToggle: function (element, dontToggle) {
var sel = this.grid.element.data(“igGridSelection”);
if (!sel) {
return;
}
sel._suspend = !sel._suspend;
if (element || dontToggle) {
this._actElement = element;
} else {
this._actElement.focus();
}
},

The bug, IMHO, is that the state of the grid while entering the method is not good enough to process. Here are the states of the different variables :

this._actElement === undefined
-> true
dontToggle
-> undefined
element
-> null

The error message and stack trace are :

Uncaught TypeError: Cannot read property ‘focus’ of undefined(…)

(anonymous function) @ VM1908:1

InjectedScript._evaluateOn @ (program):145

InjectedScript._evaluateAndWrap @ (program):137

InjectedScript.evaluateOnCallFrame @ (program):151

$.widget._selectionToggle @ infragistics.lob-16.1.js:69400

(anonymous function) @ jquery-ui-1.10.3.js:401

$.widget._endEdit @ infragistics.lob-16.1.js:68700

(anonymous function) @ jquery-ui-1.10.3.js:401

$.widget._mouseDown @ infragistics.lob-16.1.js:67923

(anonymous function) @ jquery-ui-1.10.3.js:401

proxy @ jquery-1.9.1.js:818jQuery.event.dispatch @ jquery-1.9.1.js:3074

elemData.handle @ jquery-1.9.1.js:2750

this._actElement

The code is from igGridUpdating and it can be found in infragistics.lob.js on line 69391.

The exception happens when the edit mode is dialog and the focus is transferred to a field in the dialog because of validation.

In our case the edit dialog is displayed in different pane so the event which closes the dialog is not called and the focus is not returned back the right way. Then the whole selection functionality breaks down.

I have solved it this way : 

1. Uncomment some code as suggested in infragistics.lob in mouseDown event : 

_mouseDown: function (evt) {
…..
if (this.isEditing()) {
// can be uncommented for blocking done/cancel buttons
//if (this.options.editMode === "cell" || !this.options.showDoneCancelButtons) {
// close editing if the end-user clicked somewhere else
// this will re-enable selection and allow for subsequent start edit which is
// at this point blocked indefinately because of the inability to select anything
if (!target.hasClass(this.css.editingCell) &&
(this.options.editMode === "cell" || this._getRowId(target.closest("tr")) !== this._editingForRowId)) {
this._endEdit(evt, true, false);
}
//}
…
},

this solves the problem partially – it moves the selection properly without closing the dialog and without crashing the grid.

2. Get the igGridUpdating in any following event and call manually endEdit();

 

Hello Ognyan,

Thank you for posting in our community and sharing the resolution you found. I believe some other community members could also benefit from your post.

Please let me know if you have any additional questions regarding this matter.

The previous version has a bug. This is my latest patch which uses internally the girds own public API which does the job. Here is the modification to the _mouseDown method : 

_mouseDown: function (evt) {

…

if (this.isEditing()) {
// can be uncommented for blocking done/cancel buttons
//if (this.options.editMode === "cell" || !this.options.showDoneCancelButtons) {
// close editing if the end-user clicked somewhere else
// this will re-enable selection and allow for subsequent start edit which is
// at this point blocked indefinately because of the inability to select anything
if (!target.hasClass(this.css.editingCell) &&
(this.options.editMode === "cell" || this._getRowId(target.closest("tr")) !== this._editingForRowId)) {

// Here is the little modification which checks if we are in dialog mode.

if (this.options.editMode === "dialog") {
this.endEdit(false, true);
}
else {
this._endEdit(evt, true, false);
}
}
//}
}

…

},

Hello Ognyan,

Thank you for getting back to me.

Please let me know if I could be of any further assistance.