JqGrid does not load data in mvc

Question

My .cshtml is as follows:

<script type="text/javascript">
        $(function () {
            $("#list").jqGrid({
                url: '/LogInManagement/DisplayItems/',//this is action in controller which returns the json as result.
                datatype: 'json',
                mtype: 'GET',
                colNames: ['ID', 'Product Name', 'Description', 'IsInStock', 'Attachment'],//column name
                colModel: [
          { name: 'ID', index: 'Id', width: 40, align: 'left' },
          { name: 'ProductName', index: 'ProductName', width: 240, align: 'left' },
          { name: 'Description', index: 'Description', width: 200, align: 'left' },
          { name: 'IsInStock', index: 'IsInStock', width: 40, align: 'left' },
          { name: 'Attachment', index: 'Attachment', width: 240, align: 'left' }],
                pager: jQuery('#pager'),
                rowNum: 10,
                rowList: [5, 10, 20, 50],
                sortname: 'Id',
                sortorder: "desc",
                viewrecords: true,
                caption: 'Items'
            });
        }); 
    </script> 
@{
    ViewBag.Title = ViewBag.DisplayName;
}

<h2>Welome : @ViewBag.DisplayName</h2>
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>

I am calling the method "DisplayItems" as follows:

public ActionResult DisplayItems()
    {
        Item item = new Item();
        int pages = 0;
        var resultItems = Assignment.Models.Item.GetItems().ToArray();
        var jsonData = new
        {
            total = 1,
            page = pages,
            records = resultItems.Count(),
            rows = resultItems
        };
        return Json(jsonData, JsonRequestBehavior.AllowGet);
    }

And it is returning data properly. But the grid in cshtml shows "Loading...", but no data. Data is coming in following format:

enter image description here

AthibaN · Answer 1 · 2013-09-16T06:43:55.767

I had the same problem few months ago and i resolved the problem by changing the Action method like below (keep the cshtml file as it is),

    using System.Web.Script.Serialization;

    public string DisplayItems()
        {
            Item item = new Item();

        int pages = 0;
        var resultItems = Assignment.Models.Item.GetItems().ToArray();
        var jsonData = new
        {
            total = 1,
            page = pages,
            records = resultItems.Count(),
            rows = resultItems
        };
        JavaScriptSerializer js = new JavaScriptSerializer();
        string Serializeddata = js.Serialize(jsonData );
        return Serializeddata;
    }

Note the return type string and i use JavaScriptSerializer to return the string. Let me know if it works for you. Cheers.

JqGrid does not load data in mvc

1 Answers1