jqGrid: Search box is disabled!

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,
            e开发者_开发百科dit: false,
            searchtext:"Search" },
        {}, // default settings for edit
        {}, // default settings for add
        {}, // delete
        {closeOnEscape: true, multipleSearch: true,
              closeAfterSearch: true }, // search options
        {}
    );

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