How to reload a jqGrid with new query string value

Question

I load jqgrid with drop down values using onchange event.

But when i again choose some other value in drop down i need the jqgrid to show the corresponding values.

Here s how i load the jqgrid

    function getGrid() {

var mOptometrist = $('#optOptometristList').val();// Drop down value

alert(mOptometrist);

//jQuery("#list").jqGrid().setGridParam({ url: 'Schedule.ashx?mOptometristId=' + mOptometrist + '' }).trigger("reloadGrid");    


jQuery("#jQGridDemo").jqGrid({
    url: 'Schedule.ashx?mOptometristId=' + mOptometrist + '',
    datatype: "json",
    colNames: ['Id', 'Day', 'Start Time', 'End Time', 'Interval', 'Session', "Patient", 'Slots', 'Room Number'],
    colModel: [
                    { name: 'SlNo', index: '_id', width: 20, stype: 'text', editable: true, editoptions: { disabled: true} },
                    { name: 'DayOfWeek', index: 'Day', width: 150, stype: 'text', sortable: true, editable: true, edittype: "select", formatter: 'select', editoptions: { value: getAllSelectOptions()} },
                    { name: 'StartTime', index: 'StartTime', width: 150, editable: true, formatter: 'date', formatoptions: { srcformat: 'u', newformat: 'H:i:s'} },
                    { name: 'EndTime', index: 'EndTime', width: 60, editable: true, formatter: 'date', formatoptions: { srcformat: 'u', newformat: 'H:i:s'} },
                    { name: 'Interval', index: 'Interval', width: 80, align: "right", editable: true },
                    { name: 'Session', index: 'Session', width: 40, align: "right", editable: true },
                    { name: 'PatientsPerSlot', index: 'Patient', width: 80, align: "right", editable: true },
                    { name: 'Slots', index: 'Slots', width: 150, sortable: false, editable: true },
                    { name: 'RoomID', index: 'RoomNumber', width: 100, sortable: false, editable: true }
                  ],
    rowNum: 10,
    mtype: 'GET',
    loadonce: false,
    rowList: [10, 20, 30],
    pager: '#jQGridDemoPager',
    sortname: '_id',
    viewrecords: true,
    sortorder: 'desc',
    caption: "List Employee Details",
    editurl: 'Schedule.ashx?mOptometristId= ' + mOptometrist,
    loadComplete: function () {

        $("#jQGridDemo").setColProp('Day', { editoptions: { value: "1:Sunday;2:Monday;3:Tuesday"} });


    }
});

Answer 1

You can use

url: "",
postData: {
    mOptometristId: function () {
        return $('#optOptometristList').val();
    }
}

instead of

url: 'Schedule.ashx?mOptometristId=' + mOptometrist + ''

Inside of onchange event you need just call $("#jQGridDemo").trigger("reloadGrid");. See the answer for more details.