在jqgrid中编辑行后无法显示成功消息

Question

I'm developing a web based application using bootstrap. I'm trying to implement inline editing in my grid on page load but i'm facing some issue while displaying the success or failure message after performing edit function.

Here is my code :

  $(document).ready(function () {
    var GetUrl = Web_Path + '/Test/TestHandler/GetTestData/' + AjaxHandlerName;

                jQuery("#jqGrid-container").jqGrid({
                    url: GetUrl,
                    datatype: 'json',
                    mtype: 'POST',
                    postData: { SearchInfo: function () { return getSearchPostData() } },
                    colNames: [' ', 'ID', 'Name', 'ContactNo', 'EmpId', 'MailId', 'RoleName'],
                    colModel: [
                    { name: 'myac', index: '', width: 80, fixed: true, sortable: false, resize: false,
                        formatter: 'actions',
                        formatoptions: {
                            keys: true,
                            delOptions: { recreateForm: true, beforeShowForm: beforeDeleteCallback }
                        }
                    },
                                { name: 'Id', index: 'Id', hidden: true, editable: true },
                                { name: 'Name', index: 'Name', validation: { required: true }, sortable: true, editable: true, editoptions: { size: "40", maxlength: "50"} },
                                { name: 'ContactNo', index: 'ContactNo', sortable: false, editable: true, editoptions: { size: "20", maxlength: "30"} },
                                { name: 'EmpId', index: 'EmpId', sortable: false, editable: true, editoptions: { size: "20", maxlength: "30"} },
                                { name: 'MailId', index: 'MailId', sortable: false, editable: true, editoptions: { size: "40", maxlength: "50"} },
 {name: 'RoleName', index: 'RoleName', sortable: false }
  ],


                    editurl: ISM_Web_Path + '/Test/TestHandler/UpdateTestContacts/' + ISMAjaxHandlerName,                 

                    ajaxRowOptions: {
                    afterEditRow: function (rowid, cellname, value, iRow, iCol) {
                    alert('success');
                    }
                    },                 
                    serializeRowData: function (postdata) {
                    return { ContactInfo: JSON.stringify(postdata) };                     
                    },
                    jsonReader: {
                        id: 'Id',
                        repeatitems: false
                    },
                    height: "100%",
                    pager: '#jqGrid-pager',
                    rowNum: 10,
                    rowList: [10, 20, 30],
                    sortname: 'Id',
                    sortorder: 'desc',
                    viewrecords: true,
                    caption: "JQ grid data",
                    loadComplete: function () {
                        var table = this;
                        updatePagerIcons(table);                       
                    }
                });
});

 function getSearchPostData() {
            var searchData = {};
            searchData.Id=1;

            return JSON.stringify(searchData);
        }
 function updatePagerIcons(table) {
            var replacement =
                    {
                        'ui-icon-seek-first': 'icon-double-angle-left bigger-140',
                        'ui-icon-seek-prev': 'icon-angle-left bigger-140',
                        'ui-icon-seek-next': 'icon-angle-right bigger-140',
                        'ui-icon-seek-end': 'icon-double-angle-right bigger-140'
                    };
            $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function () {
                var icon = $(this);
                var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

                if ($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]);
            })
}

 <div class="row">
        <div class="col-xs-12">           
            <table id="jqGrid-container" class="ui-jqgrid ui-widget ui-widget-content ui-corner-all">
            </table>
            <div id="jqGrid-pager">
            </div>           
        </div>
    </div>

Handler function

 public void UpdateTestContacts(HttpContext context)
        {
            TestContact contactInfo =new TestContact();
            string jsonData = context.Request.Params["ContactInfo"];
            MemoryStream TestContactMs = new MemoryStream(Encoding.UTF8.GetBytes(jsonData));
            DataContractJsonSerializer serializer = new DataContractJsonSerializer(typeof(TestContact));
            contactInfo = (RelationshipContact)serializer.ReadObject(TestContactMs );              
            //call manger function
            // return true or false
        }

TestContact.cs

 public class TestContact
    {
        public int Id { get; set; }

        public string Name { get; set; }

        public string ContactNo { get; set; }

        public string EmpId { get; set; }

        public int RelId { get; set; }

        public int TypeId { get; set; }

        public string MailId { get; set; }

        public string RoleName { get; set; }       
    }

I have used jquery.jqGrid.min.js .

I'm unable to display success message after editing the row successfully. I have used afterEditRow Please help me out.

Answer 1

There are no afterEditRow callback function inside of ajaxRowOptions . I recommend you to use aftersavefunc callback function of inline editing which can be specified as afterSave function of formatoptions :

formatter: 'actions',
formatoptions: {
    keys: true,
    afterSave: function (rowid, response, postdata, options) {
        alert("success");
    },
    delOptions: { recreateForm: true, beforeShowForm: beforeDeleteCallback }
}

Answer 2

 ajaxRowOptions: {
                  success: function (data, textStatus) {
                    if(textStatus=="true")
                    {
                    alert('success');
                    }
                    else
                    {
                    alert('failure');
                    }
                  }
 }

I'm returning true in handler . Above code is working for me.