Cancel edit event in jqGrid inline edit

Question

I'm using jqgrid inline edit in which i have a scenario to invoke the "cancel edit" button event and throw a message "Are you sure to cancel?".

//Code:

//Unload the grid.

$('#CommentsData').jqGrid('GridUnload');

               //Comments grid start.
               $("#CommentsData").jqGrid({

                   datastr: tableSrc,
                   hoverrows: false,
                   datatype: "jsonstring",
                   jsonReader: {
                       id: 'CommentId',
                       repeatitems: false
                   },
                   height: 'auto',
                   width: 'auto',
                   hidegrid: false,
                   gridview: true,
                   sortorder: 'desc',
                   sortname: 'DateTime',
                   pager: '#CommentsPager',
                   rowList: [],             // disable page size dropdown
                   pgbuttons: false,        // disable page control like next, back button
                   pgtext: null,            // disable pager text like 'Page 0 of 10'
                   viewrecords: false,      // disable current view record text like 'View 1-10 of 100' 
                   caption: "Comments",
                   colNames: ['DateTime', 'UserName', 'Comments'],
                   colModel: [

                       {
                           name: 'DateTime', index: 'DateTime', width: 120, formatter: "date", sorttype: "date",
                           formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y h:i A" }
                       },
                       { name: 'UserName', index: 'UserName' },
                       { name: 'CommentText', index: 'CommentText', editable: true }],

                   //Events to add and edit comments.
                   serializeRowData: function (postdata) {

                       var filterResult;
                       var jsonResult;

                       if (tableSrc == "")
                           jsonResult = $.parseJSON(commentDetails);
                       else
                           //Parse values bind to the comments.
                           jsonResult = $.parseJSON(tableSrc);

                       var newResult = new Object();

                       //Check if operation is edit.
                       if (postdata.oper == "edit") {

                           //Filter the edited comments from main source.
                           newResult = Enumerable.From(jsonResult).Where(function (s) { return s.CommentId = postdata.id }).First();
                           newResult.CommentText = postdata.CommentText;
                       }
                       else {
                           filterResult = Enumerable.From(jsonResult).First();

                           newResult.CommentText = postdata.CommentText;
                           newResult.TransactionId = filterResult.TransactionId;
                           newResult.TaskId = filterResult.TaskId;
                       }

                       filterResult = JSON.stringify(newResult);

                       $.ajax({
                           url: '@Url.Action("UpdateComments", "Home")',
                           datatype: 'json',
                           data: { 'resultData': filterResult, 'action': postdata.oper },
                           type: 'POST',
                           success: OnCompleteComments,
                           error: function (xhr, status, error) {
                               if (xhr.statusText == "Session TimeOut/UnAuthorized") {
                                   alert(xhr.statusText);
                                   window.location.href = '@Url.Action("LogOut", "Account")';
                               }
                               else
                                   alert(xhr.responseText);
                           }
                       });
                       //After update Load the grid.
                       function OnCompleteComments(result) {
                           selectTaskComment = false;
                           $('#dialog').dialog("close");
                           myfilter = $("#TransactionsGrid").jqGrid("getGridParam", "postData").filters;
                           rowList = $('.ui-pg-selbox').val();

                           Loadgrid($("#TransactionsGrid").getGridParam('page'));

                       }

                   },

                   onSelectRow: function (id) {
                       selectTaskComment = true;
                       var thisId = $.jgrid.jqID(this.id);

                       $("#" + thisId + "_iledit").removeClass('ui-state-disabled');
                       $("#del_" + thisId).removeClass('ui-state-disabled');

                       var selectValues = jQuery('#CommentsData').jqGrid('getRowData', id);
                       thisId = $.jgrid.jqID(this.id);

                       if (selectValues.UserName == '@ViewBag.UserName' || '@ViewBag.IsAdmin' == 'True') {
                           $("#" + thisId + "_iledit").removeClass('ui-state-disabled');
                           $("#del_" + thisId).removeClass('ui-state-disabled');

                       }
                       else {

                           $("#" + thisId + "_iledit").addClass('ui-state-disabled');
                           $("#del_" + thisId).addClass('ui-state-disabled');

                       }

                   }

               });

               jQuery("#CommentsData").jqGrid('navGrid', '#CommentsPager', { edit: false, add: false, del: true, search: false, refresh: false }, {}, {},

                   {
                       //Delete event for comments
                       url: '@Url.Action("UpdateComments", "Home")',
                       serializeDelData: function (postData) {
                           return {
                               resultData: JSON.stringify(postData.id),
                               action: JSON.stringify(postData.oper),
                           }
                       },
                       errorTextFormat: function (xhr) {
                           if (xhr.statusText == "Session TimeOut/UnAuthorized") {
                               window.location.href = '@Url.Action("LogOut", "Account")';
                           } else {
                               return xhr.responseText;
                           }
                       },
                       beforeSubmit: function () {

                           myfilter = $("#TransactionsGrid").jqGrid("getGridParam", "postData").filters;
                           return [true, '', ''];
                       },
                       afterSubmit: function (response, postdata) {
                           selectTaskComment = false;
                           Loadgrid($("#TransactionsGrid").getGridParam('page'));

                           return [true, '', ''];
                       }

                   });

                   $('#CommentsData').jqGrid('inlineNav', '#CommentsPager', { edit: true, add: true, save: true, del: false, cancel: true });

                   $("#CommentsData_iledit").addClass('ui-state-disabled');
                   $("#del_CommentsData").addClass('ui-state-disabled');

In which event i have to write the code and throw the alert message?

Also if possible, need to know if the above code could be optimized. Because the delete event is written in a separate place comparing edit and add. I'm bit confused if this is right method.

Answer 1

The easiest way to invoke the "cancel edit" button would be executing the code

$("#CommentsData_ilcancel").click(); // trigger click event on Cancel button

where CommentsData is the id of the grid.