Why my jqgrid is not showing any data?

Question

I want to use a complete jqgrid but it is not working. It is not showing any data but controller action returning the values. Here is my controller action code which is used in my project. My purpose is to use pager in jqgrid. Please help me and i need some solutions & tips for using jqgrid in mvc.

 public ActionResult itemList(jqGridViewModel jqGridParameters)
        {
            var item = from t in db.tbl_Item select t;
            var count = item.Count();
            int pageIndex = jqGridParameters.page;
            int pageSize = jqGridParameters.rows;
            int startRow = (pageIndex * pageSize) + 1;
            int totalRecords = count;
            int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
            var result = new
            {
                total = totalPages,
                page = pageIndex,
                records = count,
                rows = item.Select(x => new
                {
                    x.id,
                    x.itemcode,
                    x.name,
                    x.qtyLimit,
                    x.Quantity,
                    x.sellingPrice,
                    x.supplier,
                    x.unitType,
                    x.vat,
                    x.batchno,
                    x.brand,
                    x.buyingPrice,
                    x.catg
                }
                                         ).ToArray()
                       .ToPagedList(pageIndex, pageSize)
                       .Select(x => new
                       {
                           id = x.id,
                           cell = new string[] { x.id.ToString(),  
                                                            x.name,   
                                                            x.itemcode,                  
                    Convert.ToString(x.qtyLimit),
                    x.Quantity.ToString(),
                    x.sellingPrice.ToString(),
                    x.supplier,
                    x.unitType,
                    x.vat.ToString(),
                    x.batchno,
                    x.brand,
                    x.buyingPrice.ToString(),
                    x.catg 
                           }
                       }
                              ).ToArray()
            };
            return Json(result, JsonRequestBehavior.AllowGet);
        }

And my view code

jQuery("#list").jqGrid({
            cache: false,
            async: false,
            url: '/Settings/itemList/',
            datatype: 'json',
            mtype: 'GET',


            colNames: ['New Item', 'Batch No', 'Supplier', 'Unit', 'B. Price', 'S. Price','Item Code','Vat','Limit'],
            colModel: [

                             { name: 'name', index: 'name', width: 110, align: 'center' },
                             { name: 'batchno', index: 'batchno', width: 110, align: 'center' },
                             { name: 'supplier', index: 'supplier', width: 110, align: 'center' },
                             { name: 'unitType', index: 'unitType', width: 110, align: 'center', editoptions: { readonly: 'readonly' } },
                             { name: 'buyingPrice', index: 'buyingPrice', width: 110, align: 'center', editoptions: { readonly: 'readonly' } },
                             { name: 'sellingPrice', index: 'sellingPrice', align: 'center' },
                             { name: 'itemcode', index: 'itemcode', width: 110, align: 'center'},
                             { name: 'vat', index: 'vat', width: 110, align: 'center', editoptions: { readonly: 'readonly' } },
                             { name: 'qtyLimit', index: 'qtyLimit', align: 'center' }

            ],

            pager: jQuery('#pager'),
            rowNum: 15,

            rowList: [5, 10, 20, 50],
            sortname: 'iid',
            sortorder: "desc",
            viewrecords: true,
            width: 960,
            height: 200,
            loadOnce: true,
            imgpath: '/scripts/themes/coffee/images',
            caption: 'Stock Information',
            jsonReader: {
                root: "Data",
                page: "CurrentPage",
                total: "TotalPages",
                records: "TotalRecords",
                repeatitems: false,
                id: "0"
            },
            recordtext: "Products {0} - {1} of {2}",
            rownumbers: true,
            pagerpos: 'center'
     });

Answer 1

You define JsonReader like this:

jsonReader: {
                root: "Data",
                page: "CurrentPage",
                total: "TotalPages",
                records: "TotalRecords",
                repeatitems: false,
                id: "0"
            },

And ther on controller side you passing data to anonimous object that have this properties:

var result = new
            {
                total = totalPages,
                page = pageIndex,
                records = count,
                 ...
            }

Your property names should be the same as you define in your JsonReader