From your code you have passed 'colModel' but column names array also needs to be set which i did not find in your jQuery code.
Ex :-
var colNames = ['Recognition_Type','Recognition_No'];
If the above does not fix your error you can find the exact error in HTML developer tool for any browser :-
i) Open the page you are displaying the data or where the JQGrid is being bounded.
ii) Press F12 and it will open the Developers Tool, open the Console tab here.
iii) Now do the operation to fetch data, here you can see the exact error which causing the fail.
Also i have pasted below a working copy of the jQuery method to bind a JQGrid you can try this out :-
function BindGrid(containerId, data, pgSize, colNames, colModel, pagerId, isScroller, height, isPagerVisible, pagerSize, width) {
jQuery('#' + containerId).GridUnload();
jQuery('#' + containerId).jqGrid({
data: data,
datatype: "local",
rowNum: pgSize,
colNames: colNames,
colModel: colModel,
pager: $('#' + pagerId),
toppager: true,
autowidth: true,
gridview: true,
scrollerbar: isScroller,
height: height,
width: width,
rowList: [10, 20, 30],
cache: false,
loadonce: false,
pgbuttons: true,
pgtext: null,
viewrecords: true,
recordtext: "Showing {0} - {1} of {2} ",
loadComplete: function (data) {
},
}).setGridWidth(jqGridWidth);
}
Hope this will definitely of help to you.