Jqgrid local data formated using Jsonconvert not working

Question

I am trying to populate jqgrid with data stored in a hidden field. I have successfully tried the method of populating the grid from serverdata (data type= json). But here I need it this way. Here is what I did:

Controller:

      DataTable myTable= MyData.getAllData();

      string s = JsonConvert.SerializeObject(myTable);

       model.GridData = s;

       return this.View(model);

View:

var mydata = $('#GridData').val();

When I use alert(mydata ) here, I can see

[{ "id": 1, "ToCurrencyID": 2, "currency": "United Arab Emirates", "country": "United Arab Emirates dirham", "shortName": "AED", "ExchRate": 20.000}]

And here is the jqgrid code:

    jQuery(document).ready(function () {
        jQuery("#list").jqGrid({ data: mydata,
            datatype: "local",
            height: 150,
            width: 600,
            rowNum: 10,
            rowList: [10, 20, 30],
            colNames: ['Sl#', 'currencyId_Hidden', 'Country', 'Currency', 'Short Name', 'Exchange Rate'],
            //columns model/*
            colModel: [
                        { name: 'id', index: 'id', align: "left", sortable: false, width: '34px' },
                        { name: 'ToCurrencyID', index: 'ToCurrencyID', sortable: false, align: "left", hidden: true },
                        { name: 'currency', index: 'currency', align: "left", sortable: false, width: '366px' },
                        { name: 'country', index: 'country', align: "left", sortable: false, width: '366px' },
                        { name: 'shortName', index: 'shortName', width: '141px', sortable: false, align: "left" },
                        { name: 'ExchRate', index: 'ExchRate', width: '382px', sortable: false, align: "right" }
                  ],
            pager: "#pager",
            loadonce: true,
            viewrecords: true,
            caption: "Contacts"
        });

    });

The problem is that, grid is not getting populated.

But, when I directly use,

var mydata=[{ "id": 1, "ToCurrencyID": 2, "currency": "United Arab Emirates", "country": "United Arab Emirates dirham", "shortName": "AED", "ExchRate": 20.000}];

it, is working fine.

I think jqgrid needs a json array itself, not just a string. Any suggestions?

What I needed was `$.parseJSON(mydata)`! Thank you all. – Sharun Jun 21 '13 at 04:39 — Sharun, Jun 21 '13 at 04:39

score 1 · Answer 1 · edited May 23 '17 at 10:32

1

The code of controller which you use looks very suspected. You use this.View(model) to return the result and makes manual JSON serialization with respect of JsonConvert.SerializeObject. Instead of that one should use return Json(yourData, JsonRequestBehavior.AllowGet); to return JsonResult from the controller action. One should use the options datatype: "json", url: UrlOfControllerAction instead of datatype: "local", data: mydata in jqGrid.

If you want return all data at once without implementing server side paging of data you should use loadonce: true option additionally to datatype: "json". Depend on the exact format of returned data and depend on version of jqGrid which you use you could need to use jsonReader which inform jqGrid how get the data from the JSON response of the server.

If you need implement server side paging, sorting and filtering of the data you can find example of the corresponding code in the answer.

edited May 23 '17 at 10:32

Community

1
1

answered Jun 20 '13 at 11:46

Oleg

220,925
34
403
798

Thank you Oleg.. I knw I can use `datatype: "json", url: UrlOfControllerAction`. Bu this this particular situation, I need to pass the json data(in the form :[{..},{...}]) along with the other model data. I think the problem is, I have sent the griddata as a string instead of JsonResult. But as I mentioned, I can't use return Json, as I want to send the entire model to the view. Is there any way to treat a normal string as json data in the view? – Sharun Jun 21 '13 at 04:15
Well, I found the solution. use:`$.parseJSON(mydata)` – Sharun Jun 21 '13 at 04:40
@Sharun: In the case you included not correct data for `mydata`. The data should be the *string* `"[{ \"id\": 1, \"ToCurrencyID\": 2, \"currency\": \"United Arab Emirates\", \"country\": \"United Arab Emirates dirham\", \"shortName\": \"AED\", \"ExchRate\": 20.000}]"` instead of the *object* `[{ "id": 1, "ToCurrencyID": 2, "currency": "United Arab Emirates", "country": "United Arab Emirates dirham", "shortName": "AED", "ExchRate": 20.000}]` which you posted. In any way I'm glad that your problem is solved now. – Oleg Jun 21 '13 at 09:08

score 0 · Accepted Answer · answered Jun 21 '13 at 04:38

I just needed to convert the mydata(which is now a string variable) to Json. And everything works fine now.

      jQuery("#list").jqGrid({ data: $.parseJSON(mydata),
                datatype: "local",
                height: 150,
                width: 600,
                rowNum: 10,
                rowList: [10, 20, 30],
               .. 
               ..
              });

Jqgrid local data formated using Jsonconvert not working

2 Answers2