Bind jqGrid from controller MVC3

Question

I'm using jqgrid in my MVC3 application to bind the data in Razor view(.cshtml). The values are sent from the controller as JSON. But its not binding.

//Controller:

public JsonResult LoadData()
        {
            Connect objMC = new Connect();//Helper Class
            var collectionEmployee = objMC.LoadAllData();//Gets Employee Collection

            var jsonSerializer = new JavaScriptSerializer();
            return Json(jsonSerializer.Serialize(collectionEmployee.AsQueryable<Product>().ToList<Product>()));
        }

//jqGrid:

jQuery("#jQGridDemo").jqGrid({
        url: '@(Url.Action("LoadData", "Home"))',
        datatype: "json",
        mtype: 'GET',
        colNames: ['ProductId', 'Name', 'AdminContent', 'ProductTemplate', 'CreatedOnUtc'],
        colModel: [{ name: 'ProductId', index: 'ProductId', width: 200, align: 'left', sorttype: 'int' },
                        { name: 'Name', index: 'Name', width: 200, align: 'left', sortable: true, editable: true },
                        { name: 'AdminContent', index: 'AdminContent', width: 200, align: 'left', sortable: true, editable: true },
                        { name: 'ProductTemplate', index: 'ProductTemplate', width: 200, editable: true, edittype: "select", editoptions: { value: "1:VariantsInGrid;2:SingleProductVariant;3:MultipleProducts" }, align: 'left' },
                        { name: 'CreatedOnUtc', index: 'CreatedOnUtc', width: 200, align: 'left', edittype: 'text', formatter: 'date', formatoptions: { newformat: 'm-d-Y' }, datefmt: 'm-d-Y',
                            editoptions: {
                                size: 10, maxlengh: 10,
                                dataInit: function (element) {
                                    $(element).datepicker({ dateFormat: 'yy.mm.dd' })
                                }
                            }, sortable: true, editable: true
                        }
            ],
        rowNum: 10,
        rowList: [10, 20, 30],
        pager: '#jQGridDemoPager',
        sortname: '_id',
        viewrecords: true,
        sortorder: 'desc',
        caption: "Grid",
        ignoreCase: true

    });


    jQuery("#jQGridDemo").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });

//HTML:

<h2>
    New Grid</h2>
<table id="jQGridDemo">
</table>

The controller is getting called and the values are passed from the controller to view. But the values are not getting bind. Just i'm seeing an empty grid. This works perfect when i'm using a handler(.ashx) to load the grid.

Where i'm wrong?

Compare JSON code returned from ASXH and controller. Or post it here and we will try to help you. — Jaime García Pérez, Jul 17 '14 at 07:06
@Phx: The code returned from ashx is now in the controller. I have used the same code here. — A Coder, Jul 17 '14 at 07:12
Yes I Know, but the JSON response may be different from ASHX than from a Controller. Anyway, did you check the HTTP Verbs accepted on your controller? jqgrid can be empty by json binding problems or because your controller is not returning any JSON (cause request is invalid). — Jaime García Pérez, Jul 17 '14 at 07:18

score 2 · Answer 1 · answered Jul 17 '14 at 07:57

The MVC code which you posted don't allow HTTP GET. You have to use mtype: 'POST' parameter of jqGrid or use JsonRequestBehavior.AllowGet parameter of Json.

You should don't use JavaScriptSerializer to make manual serialization. Controller.Json Method do the serialization for you. The usage of JavaScriptSerializer.Serialize is the main your error in my opinion.

You don't posted the code which defined Product class. You should varify that the values of name property of column definition in colModel are the same as the name of properties or fields of the Product class.

Your current code don't have any server side paging. You just returns all data at once. In the case you should use loadonce: true option of jqGrid.

You should add gridview: true and autoencode: true.

You should add <div id="jQGridDemoPager"></div> somewhere of your page (for example direct after <table id="jQGridDemo"></table>).

If ProductId property of the Product class contains unique value then you should add key: true property to the definition of ProductId property of colModel.

score 0 · Answer 2 · answered Jul 17 '14 at 07:54

I think you need to bind each value in controller. try this, may be this will work

 public JsonResult LoadData()
        {

           Connect objMC = new Connect();//Helper Class
            var collectionEmployee = objMC.LoadAllData();//Gets Employee Collection

                if ( null == collectionEmployee || collectionEmployee .Count == 0)
                    return Json(0, JsonRequestBehavior.AllowGet);
                else
                    return Json(new
                    {
                        TotalCount = (collectionEmployee == null) ? 0 : collectionEmployee .Count,
                        Data = (from item in collectionEmployee 
                                select new
                                {
                                    ProductId= item.ProductId,
                                    Name= item.Name,
                                    AdminContent= item.AdminContent,
                                    ProductTemplate= item.ProductTemplate,
                                    CreatedOnUtc=item.CreatedOnUtc
                                }).ToList()

                    }, JsonRequestBehavior.AllowGet);
        }

score 0 · Accepted Answer · answered Jul 17 '14 at 08:45

Thanks @Oleg for the all those suggestions given. Have done all those. But the serializer was blocking the code even after the below fix. Then i removed that to make the code work perfect.

I made that work like this,

//Controller:

 public JsonResult LoadData()
        {
            MONGOConnect objMC = new MONGOConnect();//Helper Class
            var collectionEmployee = objMC.LoadAllData();//Gets Employee Collection

            return Json(new
            {
                total = collectionEmployee.Count / 10,
                page = 1,
                records = collectionEmployee.Count,
                rows = collectionEmployee.AsQueryable<Product>().ToList<Product>()
            }, JsonRequestBehavior.AllowGet);
        }

//jqGrid:

 jQuery("#jQGridDemo").jqGrid({
        url: '@(Url.Action("LoadData", "Home"))',
        datatype: "json",
        mtype: 'GET',
        colNames: ['ProductId', 'Name', 'AdminContent', 'ProductTemplate', 'CreatedOnUtc'],
        colModel: [{ name: 'ProductId', index: 'ProductId', width: 200, align: 'left', sorttype: 'int' },
                        { name: 'Name', index: 'Name', width: 200, align: 'left', sortable: true, editable: true },
                        { name: 'AdminContent', index: 'AdminContent', width: 200, align: 'left', sortable: true, editable: true },
                        { name: 'ProductTemplate', index: 'ProductTemplate', width: 200, editable: true, edittype: "select", editoptions: { value: "1:VariantsInGrid;2:SingleProductVariant;3:MultipleProducts" }, align: 'left' },
                        { name: 'CreatedOnUtc', index: 'CreatedOnUtc', width: 200, align: 'left', edittype: 'text', formatter: 'date', formatoptions: { newformat: 'm-d-Y' }, datefmt: 'm-d-Y',
                            editoptions: {
                                size: 10, maxlengh: 10,
                                dataInit: function (element) {
                                    $(element).datepicker({ dateFormat: 'yy.mm.dd' })
                                }
                            }, sortable: true, editable: true
                        }
            ],

                        jsonReader: {
                            root: 'rows',
                            total: 'total',
                            page: 'page',
                            records: 'records',
                            cell: 'cell',
                            id: 'id',
                            repeatitems: false
                        },
        rowNum: 10,
        rowList: [10, 20, 30],
        pager: '#jQGridDemoPager',
        sortname: '_id',
        viewrecords: true,
        loadonce:true,
        sortorder: 'desc',
        caption: "Grid",
        gridview: true,
        autoencode: true,
        ignoreCase: true

    });

Added a JSON reader in the grid code and when returning from the controller i assigned to that. Idea is got from @NandaIN Code. Thanks for him also.

You wrote "the serializer was blocking the code even after the below fix". Do you have seen some error message about this? Do you tried to set breakpoints inside of `LoadData` function? Do you tried to use `mtype: 'POST'` instead of `mtype: 'GET'`? Could you include declaration of the class `Product`? By the way you can return array or list of `Product` items from `LoadData` function. `new { total, ...}` is not needed if you use `loadonce: true` option. You can use Developer Tools of Internet Explorer (press F12 to start use Network tab) to trace HTTP traffic between jqGrid and MVC Controller. — Oleg, Jul 17 '14 at 10:25
@Oleg: I didn't c any error message. But as you said i removed the serializer and ran the code. It worked. — A Coder, Jul 17 '14 at 10:34
@Oleg: Can you also look into this question of mine please. http://stackoverflow.com/questions/24800860/pass-updated-value-from-jqgrid-popup-to-controller-mvc3 — A Coder, Jul 17 '14 at 10:35

Bind jqGrid from controller MVC3

3 Answers3

Linked