0

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>
Ashok kumar
  • 1,593
  • 4
  • 33
  • 68
  • any errors in console? – Hary Oct 04 '18 at 14:49
  • There are no `dataType` option - only `datatype` option. Default `datatype: "xml"` options will be used by default and your JSON data are wrong. The next problem: your don't see any error message. Such behavior could exist depend on version of jqGrid, which you use. Please write always **the version** of jqGrid, which you use (can use) and **the fork** ([free jqGrid](https://github.com/free-jqgrid/jqGrid), commercial [Guriddo jqGrid JS](http://guriddo.net/?page_id=103334) or an old jqGrid in version <=4.7). I develop "free jqGrid" fork, which displays error message in your case. – Oleg Oct 04 '18 at 17:15
  • Additionally to fixing `dataType: 'json'` to `datatype: 'json'` I'd recommend to add `key: true` property in `OrderID` column or/and to add `prmNames: { id: "OrderID" }` jqGrid option and `jsonReader: { repeatitems: false, id: "OrderID" }` – Oleg Oct 04 '18 at 17:20

2 Answers2

0

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);
            }
        }
Kiank
  • 16
  • 2
  • No man! In fact, I kept JsonResult as return type in the very beginning. For me, the comedy is that even action method is not hitting... – Ashok kumar Oct 07 '18 at 11:17
0

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>
Hary
  • 5,690
  • 7
  • 42
  • 79