Hello

I am trying to have a search bar on the grid and I am getting an error

Uncaught TypeError: Cannot read property ‘colModel’ of undefined
at HTMLTableElement.<anonymous> (jquery.jqGrid.js:3418)

The project is built using Microsoft VS 2015 as an MVC App. The grid is loading and data is shown. But the search bar is not shown.

The version of jQGrid is 4.3.1

jQuery JavaScript Library v3.3.1

There are only two files with regard to jQgrid in the project. The css file and the javascript file. Am I missing any jggrid library? Any idea whats wrong?

following is the code:

$(“#DocsGrid”).jqGrid
({
url: “/Home/GetDocuments”,
datatype: ‘json’,
mtype: ‘POST’,
gridview: true,
autoencode: true,
//table header name
colNames: [‘DocumentID’, ‘Form Name’,’Form Desc’, ‘Section’, ‘DocumentType’, ‘Approval Date’, ‘Created Date’],
//colModel takes the data from controller and binds to grid
colModel: [
{ name: ‘FormID’, index: ‘FormID’, width: 5, sortable: true, sorttype: “int” },
{ name: “FormName”, index: ‘FormName’, width: 15, sortable: true, sorttype: “text” },
{ name: “FormDesc”, width: 15, index: ‘FormDesc’, sorttype: “FormDesc”, searchoptions: { sopt: [‘eq’, ‘ne’] }, sortable: true },
{ name: “Section”, index: ‘Section’, width: 15, sortable: true, sorttype: “text” },
{ name: “DocumentType”, index: ‘DocumentType’, width: 15, sorttype: “text”, searchoptions: { sopt: [‘eq’, ‘ne’] }, sortable: true },
{ name: “ApprovalDueDate”, index: ‘ApprovalDueDate’, width: 15, sortable: true },
{ name: “Create_Time_Stamp”, index: ‘Create_Time_Stamp’, width: 15, sortable: true }
],
height: ‘100%’,
viewrecords: true,
caption: ‘Documents’,
emptyrecords: ‘No records’,
rowNum: 10,
viewrecords: true,
forceClientSorting: true,
pager: jQuery(‘#DocsGrid’),
rowList: [10, 20, 30, 40],

jsonReader:
{
root: “rows”,
page: “page”,
total: “total”,
records: “records”,
repeatitems: false,
Id: “0”
},
autowidth: true,
});
});
$(“#DocsGrid”).jqGrid(‘filterToolbar’, { stringResult: true, searchOnEnter: false, defaultSearch: “cn” });