jqGrid load in MVC

Question

I'm new in jqgrid. I try to use jqgrid in my mvc project. I'm using the following code for mapping the data to grid. But its not working. The function GetJqGridData is loading first in my MVC project.

Below is code for Controler.

public ActionResult GetJqGridData()
    {
        var jqGridData = new JqGridObject()
        {
            Data = GetSomeSampleData(),
            Page = "1",
            PageSize = 3, // u can change this !  
            SortColumn = "1",
            SortOrder = "asc"
        };

        return Json(jqGridData, JsonRequestBehavior.AllowGet);
    }

Below is code for VIEW.

<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />  
<link href="../../Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" type="text/css" />  
<link href="../../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />

<script src="../../Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>  
<script src="../../Scripts/i18n/grid.locale-en.js" type="text/javascript"></script>  
<script src="../../Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>  
<script type="text/javascript">
    $(document).ready(function () {
        $("#myGrid").jqGrid({
            url: '@Url.Action("GetJqGridData")',
            datatype: 'json',
            myType: 'POST',
            colNames: ['Id', 'Name'],
            colModel: [
{ name: 'Id', index: 'Id' },
{ name: 'Name', index: 'Name' }
],
            jsonReader: {
                root: 'Data',
                id: 'id',
                repeatitems: false
            },
            pager: $('#myPager'),
            rowNum: 5,
            rowList: [2, 5, 10],
            width: 600,
            viewrecords: true,
            caption: 'Jqgrid MVC Tutorial'
        });
    });  
</script>

<table id="myGrid"></table>  
<div id="myPager"></div>

This is result i'm getting enter image description here

Thanks Bobbin

score 2 · Answer 1 · answered Jun 07 '13 at 03:36

Try using the following json format:

{ 
  "total": "xxx", 
  "page": "yyy", 
  "records": "zzz",
  "rows" : [
    {"id" :"1", "cell" :["cell11", "cell12", "cell13"]},
    {"id" :"2", "cell":["cell21", "cell22", "cell23"]},
      ...
  ]
}

for more informations about the format, take a look in this link : http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data

jqGrid load in MVC

1 Answers1