jqGrid: Search box is disabled! - jqgrid

Question

I am new to jqGrid and Stack Overflow as well..
Well, I have a problem regarding the jqGrid SearchBox. Why does it show the search box in disabled mode?
Here is my code.
jQuery(document).ready(function(){
var jsonData = '{"StartDate":"01/01/2009", "EndDate":"12/12/2010", "DateFormat":"dd/MM/yyyy", "BatchId":"21"}';
jQuery("#attendance-grid").jqGrid({
datatype: "json",
mtype: "POST",
url: "url/function",
postData: jsonData,
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
search: true,
multipleSearch : true,
jsonReader: {
root: function (obj) { return obj.d.rows; },
page: function (obj) { return obj.d.page; },
total: function (obj) { return obj.d.total; },
records: function (obj) { return obj.d.records; }
},
height: 'auto',
rowNum: 10,
rowList: [10,20,30],
colNames:['Date', 'Batch', 'Enroolment No.', 'FName', 'MName', 'LName', 'Branch'],
colModel:[
{name:'date',index:'date', width:90, sorttype:"date", datefmt: 'm/d/Y', formatter:"date"},
{name:'batch_name',index:'batch_name', width:150, sortable:true},
{name:'Stud_EnrollNo',index:'Stud_EnrollNo', width:100, sortable:true},
{name:'stud_fname',index:'stud_fname', width:80, sortable:true},
{name:'stud_mname',index:'stud_mname', width:80, sortable:true},
{name:'stud_lname',index:'stud_lname', width:80, sortable:true},
{name:'currbranch',index:'currbranch', width:50, sortable:false}
],
pager: "#pattendance-grid",
loadtext: 'Loading...',
sortname: 'stud_fname',
viewrecords: true,
gridview: true,
rownumbers: true,
sortorder: 'desc',
grouping:true,
groupingView : {
groupField : ['stud_fname'],
groupColumnShow : [true],
groupText : ['<b>{0} - {1} Item(s)</b>'],
groupCollapse : true,
groupOrder: ['desc']
},
caption: "Attendance Report"
}).navGrid('#pattendance-grid',
{ search:true,
view: true,
del: false,
add: false,
edit: false,
searchtext:"Search" },
{}, // default settings for edit
{}, // default settings for add
{}, // delete
{closeOnEscape: true, multipleSearch: true,
closeAfterSearch: true }, // search options
{}
);

Answer 1

Probably your main problem is that you use postData parameter in the wrong way. If you use is as a string, then the postData overwrite all other typical jqGrid parameters. Try to change postData parameter as
postData: {
StartDate:"01/01/2009",
EndDate:"12/12/2010",
DateFormat:"dd/MM/yyyy",
BatchId:21
}
Moreover you should not use multipleSearch:true as jqGrid parameter: only inside of parameters of navGrid function it has any sense.
What you additionally could needed is
serializeRowData: function (data) {return JSON.stringify(data);}
where JSON.stringify is a part of json2.js from here