jqGrid - Dynamically adding Rows Via Json

Question

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 colModel:

{"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

Could you include in the body of your question the full `grid` which you use to initialize `$("#queryGrid").jqGrid`? By the way your code have some errors like `"sorttype":"Int32"` and `"sorttype":"String"`. All possible values for the `sorttype` you can find [here](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options). I would recommend you to use `data` parameter instead of `addJSONData` ahich has in the most cases advantages. I find also practical to replace `colNames` parameter with `label` option of `colModel`. — Oleg, Mar 17 '11 at 17:28

score 2 · Accepted Answer · edited May 23 '17 at 10:33

2

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);
    }

edited May 23 '17 at 10:33

Community

1
1

answered Mar 17 '11 at 10:13

LeftyX

35,328
21
132
193

You're using asp.net MVC, right? check return Json(yourdata, JsonRequestBehavior.DenyGet); } – LeftyX Mar 17 '11 at 13:29
I've updated my answer. try to see if that works. You can find more infos here http://haacked.com/archive/2009/06/25/json-hijacking.aspx – LeftyX Mar 17 '11 at 13:31
I am using a POST. The data does come down from the sever. For some reason It simply doesn't display in jqGrid.. – Damien Mar 17 '11 at 13:46
try to publish your sample project somewhere cause I can't get much here. – LeftyX Mar 17 '11 at 14:28
Seems to be work now after I messed around with a whole bunch of things but this answer was certainly the start of that path! Cheers! – Damien Mar 17 '11 at 17:28

score 1 · Answer 2 · edited May 23 '17 at 12:02

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.

Hi Oleg. It was solved partly using your own solution you provided to another question which the accept answer linked too. Cheers. — Damien, Mar 18 '11 at 09:16
@Damien: Fine! As I wrote the answer I didn't seen that you already "accept" the answer of LeftyX. Nevertheless you should fix at least `sorttype` values in your code. — Oleg, Mar 18 '11 at 09:42
oh yeah about the sort values. I building them up dynamically and used the .Net types to do so. — Damien, Mar 18 '11 at 17:08
@Damien: I have seen this of course, but this are wrong values for `sorttype`. [Here](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options) you will find the full list of supported values. — Oleg, Mar 18 '11 at 17:12

jqGrid - Dynamically adding Rows Via Json

2 Answers2