jqgrid search toolbar not coming up using jquery.jqgrid.js - jqgrid

Question

I am trying to add the search bar with jquery.jqgrid.js after trying several methods this method was the only one that did not give me an error but neither does it show my search toolbar, can someone have a look and see if I missing anything??
jQuery(document).ready(function() {
jQuery("#list").jqGrid({
url: '/Home/DynamicGridData/',
datatype: 'json',
mtype: 'POST',
colNames: ['Edit', 'AlertId', 'Policy', 'PolicyRule', 'Alert Status',
'Alert Code', 'Message', 'Category'],
colModel: [
{ name: 'Edit', edittype: 'select', formatter: 'showlink' },
{ name: 'AlertId', index: 'AlertId', sortable: true, sorttype: 'int',
autoFit: true, align: 'left', hidden: true },
{ name: 'Policy', index: 'Policy.Name', sortable: true, sorttype: 'text',
autoFit: true, searchoptions: { sopt: ['eq', 'ne', 'cn'] },
align: 'left' },
{ name: 'Policy Rule', index: 'PolicyRule', sortable: true,
sorttype: 'text', autoFit: true, sorttype: 'text',
searchoptions: { sopt: ['eq', 'ne', 'cn'] }, align: 'left' },
{ name: 'Alert Status', index: 'AlertStatus.status', sortable: true,
sorttype: 'text', searchoptions: { sopt: ['eq', 'ne', 'cn'] },
autoFit: true, align: 'left' },
{ name: 'Alert Code', index: 'Code', sortable: true, sorttype: 'text',
align: 'left', searchoptions: { sopt: ['eq', 'ne', 'cn'] },
autoFit: true },
{ name: 'Message', index: 'Message', sortable: true, sorttype: 'text',
align: 'left', searchoptions: { sopt: ['eq', 'ne', 'cn'] },
autoFit: true },
{ name: 'Category', index: 'Category.name', sortable: true,
sorttype: 'text', align: 'left', autoFit: true,
searchoptions: { sopt: ['eq', 'ne', 'cn'] }}],
pager: $("#pager"),
rowNum: 10,
rowList: [10, 60, 100],
scroll: true,
sortname: 'AlertId',
sortorder: 'asc',
viewrecords: true,
imgpath: '/scripts/themes/basic/images',
caption: 'my name',
gridComplete: function() {
var objRows = $("#list tr");
var objHeader = $("#list.jqgfirstrow td");
if (objRows.length > 1) {
var objFirstRowColumns = $(objRows[1]).children("td");
for (i = 0; i < objFirstRowColumns.length; i++) {
$(objFirstRowColumns[i]).css("width",
$(objHeader[i]).css("width"));
}
}
}
});
});
$("#list").jqGrid('navGrid','#pager',
{edit:true,add:true,del:true,search:true,refresh:true});
$("#list").jqGrid('navButtonAdd',"#pager",
{caption:"Toggle",title:"Toggle Search Toolbar",
buttonicon :'ui-icon-pin-s',
onClickButton:function() {
$("#list")[0].toggleToolbar()
} });
$("#list").jqGrid('navButtonAdd',"#pager",
{ caption: "Clear", title: "Clear Search",
buttonicon :'ui-icon-refresh',
onClickButton:function(){
$("#list")[0].clearToolbar()
} });
jQuery("#list").jqGrid('filterToolbar');

Answer 1

After the improving of the format of your code one can see your main error: you call navGrid, navButtonAdd and filterToolbar outside of jQuery(document).ready. If you move it inside the jQuery(document).ready you will see immediately the searching toolbar: see here.
You code has other small problems:
variable i inside gridComplete should be declared to be local and not global variable.
You should remove deprecated parameter imgpath.
You use many options of colModel parameters with default values like sortable:true, sorttype: 'text', align: 'left' and so on. It makes only the code longer, slowly and more difficult to read. I recommend you to look in the part of documentation which describes colModel parameters and remove default properties.
The sorttype property which you use will not work in case of usage datatype: 'json' without loadonce:true. So you should decide either you use server based sorting, paging and filtering/searching and you should better remove in the case sorttype properties or you should use loadonce:true, but the grid contain should be loaded at once at the first request to the server.
There are no autoFit column property.