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?

Answer 1

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 .

Answer 2

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

Answer 3

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.