I have an igGrid on a bootstrap dialog for editting. With MVC, the javascript is not on the partial view (dialog) but the parent view. The parent view's script tag is where I put my $.ig.loader to bind the grid's iggridupdatingeditrowending event with an ajax call to a controller to do server side validation when the done button is clicked during an editting of a grid row. This works great the first time I open the dialog. However, after I close the dialog by clicking the X icon, bootstrap simply hides the div tag of the dialog. The next time I open the dialog, the grid loads and renders with all the data and functionality you would expect, except for the iggridupdatingeditrowending event no longer gets fired.
I am guessing that this is because the grid renders without the $.ig.loader function being called, thus it is no longer bound to the iggridupdatingeditrowending event. Does anyone know of a way to rebind the events? Here is a sample of the javascript code which I used from a sample project posted in the forum:
$.ig.loader(function () {
(function ($grid) { //This is a closure which holds the server side validation logic var _errors = []; var _rowID, _valid; $grid.bind("iggridupdatingeditrowending", function (evt, ui) {_rowID = ui.rowID; // cancel button is clicked if (ui.update === false) {var validator = getRowValidator(_rowID); _errors.length = 0; $(validator).igValidator("hide"); return; } ui.keepEditing = true;$.ajax({ type: "POST", url: "@Url.Action("ValidateEntitlement")", data: JSON.stringify({ oldValues: ui.oldValues, newValues: ui.values }), contentType: "application/json" }).success(function (data) { _errors = data; var validator = getRowValidator(_rowID); $(validator).igValidator("validate"); if (_valid === true) {$grid.igGridUpdating("endEdit", true); } }); });
function getRowValidator(rowId) {var $row = $grid.find("tr[data-id='" + rowId + "']");
return $row.igValidator({ width: 200, alignment: "right", checkValue: function (evt, ui) { if (_errors !== undefined) { if (_errors.length == 0) { _valid = true; return true; } ui.message = "<ul>"; for (var i = 0; i < _errors.length; i++) ui.message += "<li>" + _errors[i].ErrorMessage + "</li>"; ui.message += "</ul>";
_valid = false; return false; } _valid = true; return true; } }); } })($("#igOwners")); })
Hello JHDL,
Thank you for posting in the community.
In this scenario theeditrowendingevent is being subscribed using the jQuery bind function. To ensure that the event would be hooked even after the dialog window in question is closed and reopened, I would suggest using a delegate (either via jQuery delegate() or preferably on()). More information on event handling in Ignite UI may be found at:
http://help.infragistics.com/NetAdvantage/jquery/Current/CLR4.0?page=Using_Events_in_NetAdvantage_for_jQuery.html
http://help.infragistics.com/jQuery/2013.1/ui.iggridupdating
As an alternative approach in this case, it should be possible to reattach the event handled each time the dialog in question is being opened, given that the dialog's open event can be handled.
Hope this helps. Please do not hesitate to contact me if you have any questions.