jQuery Grid Plugin - jqGrid

Hello Guys,

I am working on ASP.NET MVC application and using jqGrid 4.4.4 to bind my lsit to grid. I have three identical views whica contains same functionalities related to CRUD operations. I am using jqgrid's inline add functionality to add new row in grid. My two views are working perfect but my one view is not reloading grid items after adding a record or deleting a record from grid. Below are jqGrid code that I am using to build jqgrid.

$("#myGrid").jqGrid({

url: '@Url.Content("~/Content/GetData")',

datatype: "json",

colModel: [

{ name: 'ID', index: 'ID', label: 'ID', clickable: false, hidden: true, editable: false },

{ name: 'Title', index: 'Title', label: 'Brand', width: 150, editable: true, edittype: 'text', editrules: { required: true, custom: true, custom_func: validateValue }, formoptions: { elmsuffix: '(*)' }, sortable: true },

//{ name: 'ModifiedOn', index: 'ModifiedOn', label: 'Modified on', width: 80, editable: false, sortable: true, formatter: 'date' },

{ name: 'Actions', width: 60, fixed: true, sortable: false, search: false, resize: false, formatter: 'actions', formatoptions: { keys: true, editbutton: true, delbutton: true } }

],

caption: "Grid Data",

mtype: "GET",

rowNum: 1000,

rowList: [10, 20, 30],

shrinkToFit: true,

width: 980,

height: 200,

jsonReader: {

root: "Rows",

page: "Page",

total: "Total",

records: "Records",

repeatitems: false,

userdata: "UserData",

id: 'ID'

},

onSortCol: function (index, columnIndex, sortOrder) {

var sortcolumn = index + " " + sortOrder;

if (sortstring.search(index) != -1) {

if (sortOrder == 'asc')

sortstring = sortstring.replace(index + " desc", index + " asc");

else

sortstring = sortstring.replace(index + " asc", index + " desc");

}

else {

if (sortstring != "")

sortstring = sortstring + "," + sortcolumn;

else

sortstring = sortcolumn;

}

$('#myGrid').jqGrid('setGridParam', { sortname: sortstring });

},

pager: '#pager1',

sortname: 'Title',

viewrecords: true,

sortorder: "desc",

scroll: true,

reloadAfterSubmit: true,

emptyrecords: 'No records to display...',

ajaxGridOptions: { cache: true },

loadonce: false,

editurl: '@Url.Content("~/Content/ManageData")',

});

$("#myGrid").jqGrid('navGrid', '#pager1', { edit: false, add: false, del: false, search: false });

jQuery("#myGrid").jqGrid('inlineNav', "#pager1", { edit: false });

The problem I was facing previously was, after adding a new row, grid was not updating on client side. so I have passed a jason keyword from my controller action and on reload the grid on AjaxSuccess event. See below code block.

$(document).ajaxSuccess(function (event, request, settings, exception) {

if ((request.responseText.toLowerCase() == ""add"") || (request.responseText.toLowerCase() == "add")) {

$("#myGrid").trigger('reloadGrid');

}

});

This is working fine for my two pages but somehow it's not reloading grid after adding/deleting item to/from grid. While looking at request, i found that after calling my controller action to add/update record, grid is not calling controller action to get grid data specifically for this page.

Please share your ideas with me if I am missing something here.

Thanks,