Unable to populate data into jqGrid control, but no errors

Question

I'm not sure where I am doing wrong, I am unable to populate data into jqGrid control.

Tried different articles, and verified some video tutorials, but no luck.

Can anyone please help me to solve the issue!

Below is the code in HomeController.

        [HttpGet]
        public ActionResult JQGridOrders()
        {
            return View();
        }

        [HttpGet]
        public ActionResult GetOrders()
        {
            using (NorthwindEntities db = new NorthwindEntities())
            {
                var ordersList = db.Orders.Select(x => new OrderInfo {
                    OderID = x.OrderID,
                    CustomerID = x.CustomerID,
                    OrderDate = x.OrderDate,
                    Freight = x.Freight,
                    ShipName = x.ShipName,
                    ShipAddress = x.ShipAddress
                }).ToList();
                return Json(new { rows = ordersList }, JsonRequestBehavior.AllowGet);
            }
        }

My OrderInfo class is below

public class OrderInfo
{
    public int OderID { get; set; }
    public string CustomerID { get; set; }
    public DateTime? OrderDate { get; set; }
    public decimal? Freight { get; set; }
    public string ShipName { get; set; }
    public string ShipAddress { get; set; }
}

Below is the View

@{ ViewBag.Title = "Showing Orders in JQGrid Control"; }
<h2>@ViewBag.Title</h2>

<link href="~/Content/Theme/jquery-ui.min.css" rel="stylesheet" />
<link href="~/Content/ui.jqgrid.css" rel="stylesheet" />
<script src="~/scripts/jquery-3.3.1.min.js"></script>
<script>
 jQuery.browser = {};
   (function () {
       jQuery.browser.msie = false;
       jQuery.browser.version = 0;
       if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) {
           jQuery.browser.msie = true;
           jQuery.browser.version = RegExp.$1;
       }
   })();
</script>
<script src="~/scripts/jqGrid/jquery.jqGrid.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/scripts/jqGrid/grid.locale-en.js"></script>
<script>
    $(function () {
        $grid = $("#jqGrid").jqGrid({
            url: '@Url.Action("GetOrders", "Home")',
            mtype: 'GET',
            dataType: 'json',
            colModel: [
                { label: 'Order ID', name: 'OrderID' },
                { label: 'Customer ID', name: 'CustomerID' },
                { label: 'Order Date', name: 'OrderDate' },
                { label: 'Freight', name: 'Freight' },
                { label: 'Ship Name', name: 'ShipName' },
                { label: 'Ship Address', name: 'ShipAddress' }
            ],
            loadonce: true
        });
    })
</script>

Answer 1

Try to change return type of action from ActionResult to JsonResult

       [HttpGet]
        public JsonResult GetOrders()
        {
            using (NorthwindEntities db = new NorthwindEntities())
            {
                var ordersList = db.Orders.Select(x => new OrderInfo {
                    OderID = x.OrderID,
                    CustomerID = x.CustomerID,
                    OrderDate = x.OrderDate,
                    Freight = x.Freight,
                    ShipName = x.ShipName,
                    ShipAddress = x.ShipAddress
                }).ToList();
                return Json(new { rows = ordersList }, JsonRequestBehavior.AllowGet);
            }
        }

Answer 2

You should map the elements between json response and colModel with jsonmap and jsonReader

• jsonReader to define the elements
• jsonmap Defines the json mapping for the column in the incoming json string.

Here is the demo and have used some fake data to show the mappings.

$(function () {

 $("#jqGrid").jqGrid({
                loadError: function (xhr, status, error) {
                    alert('load error: ' + error);
                },
                mtype: 'GET',
                ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
                url: 'https://reqres.in/api/users?page=2',
                datatype: "json",
                colNames: ["Id", "First Name"],
                colModel: [
                         { name: "Id", index: "id",key:true, width: 50, jsonmap: "id" },
                         { name: "First Name", index: "first_name", width: 200, jsonmap: "first_name"}
                ],

                gridview: true,
                jsonReader: { repeatitems:true, root:"data" },
                rowNum: 10,
                rowList: [10, 20, 30],
                viewrecords: true,
                width:500,
                height: 200,
                caption: "JSON Example",
            });
            
            
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>

<table id="jqGrid"></table>