jqGrid - Dynamically adding Rows Via Json

I am trying to dynamically add rows to my jqGrid dependent on a value a user has put into a textbox. There is a method which fetches a Json request from the server but I am having problems getting it to add the actual data.

Here is the jqGrid code:

function RenderGrid(grid) {
$("#queryGrid").jqGrid({
    datatype: grid.DataType,
    mtype: grid.RequestType,
    colNames: grid.ColumnNames,
    colModel: grid.ColumnModel,
    pager: $('#pager'),
    rowNum: grid.MaxViewableRows,
    caption: "Search",
    width: grid.Width,
    rowList: grid.MaxViewableRowOptions,
    height: grid.Height,
    loadtext: "Please wait...",
    viewrecords: grid.ShowTotalRecords,
    hidegrid: grid.HideEnabled,
    forceFit: true
})

I have not set the URL option because, as I mentioned previously, the data is coming from elsewhere. However this is the co开发者_如何学JAVAlModel:

{"name":"id","index":"id","hidden":"true"},
{"name":"Customer","index":"Customer","sorttype":"Int32","editable":false,"width":216,"resizable":true},
{"name":"ShortName","index":"ShortName","sorttype":"String","editable":false,"width":216,"resizable":true},
{"name":"CorrespondenceName","index":"CorrespondenceName","sorttype":"String","editable":false,"width":216,"resizable":true}

Here is the code which gets the JSON:

function SearchGrid() {
    $.ajax({
        url: $.url("/MyController/MyAction"),
        type: "POST",
        dataType: "json",
        data: {
            Name: $('#Name').val(),
            Fields: $('#Fields').text(),
        },
        success: ApplyDataToGrid //More on this later in the question
    });
}

How this all seemenly works fine. I don't think the issue is with any of the above code. Here is where it gets tricky, this is where I get the JSON object and when I attempt to add it to the grid.

This is the JSON I get back:

{"page":1,"records":1,"rows":[{"id":1,"cell":[94,"DAMIEN","IS AN IDIOT"]}],"total":1}

This is the code I use to (attempt) to add the data onto the grid:

function ApplyDataToGrid(data) {
    $("#queryGrid")[0].addJSONData(data, $("#queryGrid").bDiv, 0)   
}

or

function ApplyDataToGrid(data) {
    $("#queryGrid")[0].addJSONData(data)   
}

This does apply the page count and record count but it doesn't display the row which should add the ID and the three columns!

Any idea? It's driving me crazy! Thanks in Advance, Damien

Since you're calling an MVC controller to grab json data I would suggest you to do what Oleg suggested me here. You can pre-load your jqGrid empty and then, when the user clicks a button or changes some text in a text-box, you can trigger the reload of the grid: myGrid.trigger('reloadGrid',[{page:1}]);

Your grid will fetch the changed fields and send it with the request:

postData: {
            Param1: function() { return $("#Filter1").val(); },
            Param2: function() { return $("#Filter2").val(); }
        }, 

If you're using ASP.NET MVC 2 or 3 and your POSTing your data your action would look something like this:

  [HttpPost]
    public JsonResult SuccesMsg()
    {
        return Json(yourdata, JsonRequestBehavior.DenyGet);
    }

It is not clear which scenario you has, because you want append the data to the grid and additionally want to have correct page count and record count. jqGrid support many settings. Which settings exactly you use in the test grid which has problems. The code like datatype: grid.DataType for example is too general. It would be very helpful if you include the values of all jqGrid parameters which you use in the test which not work.

The settings sorttype":"String" and "sorttype":"Int32" are definitively wrong. Probably you mean sorttype:"int" and default sorttype:"text".

Probably you can fill better the grid with data parameter which contain full grid data. If you really need append the data in the existing grid without recreating it you can use addRowData which work with all datatypes. It allow by the way to add array of data to the grid per one call of addRowData.

One more question: Your grid has 4 columns and you include the values only for three columns: [94,"DAMIEN","IS AN IDIOT"]. It seems me strange. Probably you want to use ["1", "94","DAMIEN","IS AN IDIOT"]? If you include "key:true" in the "id" column and include jsonReader:{cell:""} that the item of JSON data can be changed from

{"id":1,"cell":["1","94","DAMIEN","IS AN IDIOT"]}

to

["1","94","DAMIEN","IS AN IDIOT"]

(see here).

It will be much easier if you prepared an example without any grid.DataType. Only after it will work good you can make it more dynamical.