Dynamic Data to Jqgrid

Question

i'm using jqgrid for listing data .now when ever i click search button i want to dynamically assign data to jqgrid which come from a controller action using ajax.but data still remains as the first load.any ideas?

    $('#listatt').jqGrid({
        datatype: 'local',

        viewrecords: true,
        sortname: 'RowNumber',
        sortorder: 'desc',
        cellsubmit: 'clientArray',
        editurl: 'clientArray',
        cellEdit: true,

        data: mydata,

        colNames: ['Sl.#', 'id', 'empid', 'Name', 'Code', 'Time', 'Status', 'Type', 'Reason'],
        //columns model
        colModel: [
                        { name: 'RowNumber', index: 'RowNumber', align: 'left', editable: true, edittype: 'text', width: '35px' },
                         { name: 'sl_No', index: 'sl_No', align: 'left', search: false, stype: 'text', searchoptions: { sopt: ['eq'] }, width: '10px', hidden: true },
                             { name: 'emp_ID', index: 'emp_ID', align: 'left', editable: true, edittype: 'text', width: '35px', hidden: true },


                        { name: 'emp_Name', index: 'emp_Name', align: 'left', search: false, stype: 'text', editable: false, searchoptions: { sopt: ['eq'] }, width: '200px' },
                        { name: 'emp_Code', index: 'emp_Code', align: 'left', search: false, stype: 'text', editable: false, searchoptions: { sopt: ['eq'] }, width: '250px' },
                        { name: 'attTime', index: 'attTime', template: dateTemplate
                        },

                        { name: 'inOut', index: 'inOut', width: 100, editable: true, edittype: 'select', editoptions: { value: "0:Select;1:In;2:Out" }, hidden: true },
                               { name: 'attType_ID', index: 'attType_ID', width: 100, formatter: "select", editable: true, edittype: 'select', editoptions: { value: "0:Absent;1:Present;2:Half Day"} },
                     { name: 'attReasons', index: 'attReasons', width: 200, sortable: false, editable: true, edittype: "textarea", editoptions: { rows: "2", cols: "10"} }


                      ],

        //pager for grid
        pager: $('#pager'),
        //number of rows per page
        rowNum: 20,
        rowList: [10, 20, 40, 80, 100],
        viewrecords: true,
        //grid height
        height: '380px',
        height: '500px',
        shrinkToFit: true

    });

--ajax call

        $.ajax({
            url: '@Url.Action("GetGridDataSequence")',
            data: { branchID: $("#branchID").val(), divisionID: $("#divisionID").val(), shiftID: $("#shiftID").val(), chkout: $("#chkout").is(':checked'), attdate: $("#attdate").val() },
            dataType: "json",
            type: "POST",
            error: function () {
                alert("An error occurred.");
            },
            success: function (data) {



                $('#listatt').jqGrid('setGridParam',
          {
              datatype: 'local',
              data: data
          })
.trigger("reloadGrid");

            }
        });

--controller

public string  GetGridDataSequence(int branchID, int divisionID, int shiftID, Boolean chkout,DateTime attdate)
        {
            Attendence Attendence = new Attendence();
            AttendenceInfo AttendenceInfo = new AttendenceInfo();
            var dt = Attendence.AttendenceSelectAll(Convert.ToInt32(this.Session["CompanyID"]), branchID, divisionID, shiftID, attdate, chkout);
            var jason = JsonConvert.SerializeObject(dt);
            return jason;

        }

Answer 1

Instead you can try something like this,

function loadGrid(data){
  $('#listatt').jqGrid({
    datatype: 'local',
    data: data,
    ....
  });
}

And in your ajax success function,

success: function (data) {
     $("#listatt").jqGrid('GridUnload');
     loadGrid(data);
}

Answer 2

I think you need change datatype of Grid from 'local' to 'json' and add property "url" in my project (for example):

url: 'Home/ExpensesGet?DateFrom=' + getToday(-1),
//type of data
datatype: 'json',
//url access method type
mtype: 'GET',
....