JqGrid Load Json data from controller

Question

I am using a jqgrid and i want to display the grid from the jquery a call to controller which return me json data my grid did not show the data code is here

public JsonResult GetPlainobjectAsJson()
        {
            var rows = (getdatalist()
                .Select(c => new
                {
                    id = c.CatId,
                    cell = new []
                                        {
                                            c.CatId.ToString(),
                                            c.CatName,
                                            c.desc,
                                            c.desc1,
                                            c.desc10,
                                            c.desc11,
                                            c.desc12,
                                            c.desc13,
                                            c.desc14,
                                            c.desc15,
                                            c.desc16,
                                            c.desc17,
                                            c.desc18,
                                            c.desc19,
                                            c.desc2,
                                            c.desc20,
                                            c.desc21,
                                            c.desc22,
                                            c.desc23,
                                            c.desc24,
                                            c.desc25,
                                            c.desc3,
                                            c.desc4,
                                            c.desc5,
                                            c.desc6,
                                            c.desc7,
                                            c.desc8,
                                            c.desc9,
                                            c.ProId.ToString(),
                                            c.ProName
                                        }
                })).ToArray();
            return new JsonResult
            {
                Data = new
                {
                    page = 1,
                    records = rows.Length,
                    rows,
                    total = 1
                }
            };

        }

this function generate the json data and this function

return the json result

  public JsonResult GetPlainobject()
        {

            var res = GetPlainobjectAsJson();

            return Json(res, JsonRequestBehavior.AllowGet);
        }

and here is the index page

<script type="text/javascript">




    $(document).ready(function () {
        debugger;
        $("#treegrid").jqGrid({
            url: '@Url.Content("~/TreeGrid/GetPlainobject")',
            datatype: "json",
            mtype: "Get",
            colNames: ["CatId", "CatName", "desc", "desc1", "desc10", "desc11", "desc12", "desc13", "desc14", "desc15", "desc16", "desc17", "desc18",
                "desc19", "desc2", "desc20", "desc21", "desc22", "desc23", "desc24", "desc25", "desc3", "desc4", "desc5", "desc6",
                "desc7", "desc8", "desc9", "ProId", "ProName"],
            colModel: [
            { name: "CatId", index: "CatId", width: 150, key: true },
            { name: "CatName", index: "CatName", width: 200 },
            { name: "desc", index: "desc", width: 200 },
            { name: "desc1", index: "desc1", width: 300 },
            { name: "desc10", index: "desc10", width: 300 },
            { name: "desc11", index: "desc11", width: 150 },
            { name: "desc12", index: "desc12", width: 200 },
            { name: "desc13", index: "desc13", width: 300 },
            { name: "desc14", index: "desc14", width: 150 },
            { name: "desc15", index: "desc15", width: 200 },
            { name: "desc16", index: "desc16", width: 300 },
            { name: "desc17", index: "desc17", width: 150 },
            { name: "desc18", index: "desc18", width: 200 },
            { name: "desc19", index: "desc19", width: 300 },
            { name: "desc2", index: "desc2", width: 150 },
            { name: "desc20", index: "desc20", width: 150 },
            { name: "desc21", index: "desc21", width: 200 },
            { name: "desc22", index: "desc22", width: 300 },
            { name: "desc23", index: "desc23", width: 150 },
            { name: "desc24", index: "desc24", width: 200 },
            { name: "desc25", index: "desc25", width: 300 },
            { name: "desc3", index: "desc3", width: 200 },
            { name: "desc4", index: "desc4", width: 300 },
            { name: "desc5", index: "desc5", width: 150 },
            { name: "desc6", index: "desc6", width: 200 },
            { name: "desc7", index: "desc7", width: 300 },
            { name: "desc8", index: "desc8", width: 150 },
            { name: "desc9", index: "desc9", width: 200 },
            { name: "ProId", index: "ProId", width: 300 },
            { name: "ProName", index: "ProName", width: 150 }

            ],


            height: "auto",
            rowNum: 10,
            rowList: [10, 20, 30],
            pager:"#pager",
            gridview: true,
            viewrecords: true,
            caption: "Tree Grid Example",
            jsonReader : {
            root: "Data",
            page: "page",
            total: "total",
            records: "records"

            }

        });



    });

</script>

help me where i m wrong ....

score 0 · Accepted Answer · answered Apr 05 '13 at 08:33

0

I think that you should just remove unneeded GetPlainobjectAsJson method which return JsonResult. You should not use JsonResult as the parameter of Json. Instead of that you can include the code main code of GetPlainobjectAsJson inside of GetPlainobject and place

return Json(new {
                page = 1,
                records = rows.Length,
                rows,
                total = 1
            }, JsonRequestBehavior.AllowGet);

Additionally you should remove jsonReader from the client code and include loadonce: true instead. It will allow to use local sorting, paging and sorting/filtering of data in jqGrid. You can remove from colModel all index properties because there has the same values as name property.

answered Apr 05 '13 at 08:33

Oleg

220,925
34
403
798

thanks a lot dear but if i want to show data tree grid from this code where from i set the parent id – zahaib zahaib Apr 05 '13 at 09:27
@zahaibzahaib: You are welcome! To fill TreeGrid you need fill not only the values for the main columns of grid but the values for some additional hidden columns which are created by TreeGrid and which describe the hierarchy of nodes/leafs. See [the answer](http://stackoverflow.com/a/5333199/315935) and [this one](http://stackoverflow.com/a/6509041/315935) as examples. You can either load only top level nodes of grid and jqGrid will send additional request for cildren (see [the documentation]()http://www.trirand.com/jqgridwiki/doku.php?id=wiki:adjacency_model#what_we_post) or load all at once. – Oleg Apr 05 '13 at 09:55
thanks dear but how can i add parent and level against a row because i m get data from the controller in json format which have catid as parent field and prodid as an child field how can i set these properties in controller code ... \ – zahaib zahaib Apr 05 '13 at 10:04
@zahaibzahaib: First of all you have to reorder the items which prepare the controller. First should come top level item then its direct children and so on. The order should corresponds the order in the TreeGrid when all nodes are opened. Then you have to add 5 additional items to `cell` array which represent every item. The additional items corresponds the values of hidden columns `level`, `parent`, `isLeaf`, `expanded` and `loaded`. Examine just JSON from [the answer](http://stackoverflow.com/a/6509041/315935). – Oleg Apr 05 '13 at 10:19
THANKS A LOT oleg . but i m little confused how can i add new ceel in method GetPlainobjectAsJson() that have code above please .. – zahaib zahaib Apr 05 '13 at 10:39
@zahaibzahaib: You create array with main data elements `cell = new [] {c.CatId.ToString(), c.CatName,..., c.ProName}`. It should contain *more values* which corresponds `level`, `parent`, `isLeaf`, `expanded` and `loaded`. – Oleg Apr 05 '13 at 11:09

JqGrid Load Json data from controller

1 Answers1