Simple jqGrid wire-up for MVC 4 controller action being called by jqGrid implementation.

jqGrid.MVC4

Here's the (Home) controller action that serves the data back to the jqGrid.

        [HttpGet]
        public JsonResult GetPendingItems(string sidx, string sord, int page, int rows)
        {
            var requests = this.Store.RetrieveRequestorsPendingRequests(string.Empty);
            var enumerable = requests as FiestaModels.Request[] ?? requests.ToArray();
            var jsonData = new
                {
                    total = 1, //todo: calculate
                    page = page,
                    records = enumerable.Count(),
                    rows = (
                               enumerable.Select(request => new
                                   {
                                       id = request.Id,
                                       cell = new string[]
                                           {
                                               //request.Id.ToString(),
                                               request.ToString(),
                                               request.StartDate.ToShortDateString(),
                                               request.EndDate.ToShortDateString(),
                                               request.RequestStatus.ToString()
                                           }
                                   })).ToArray()
                };
            return Json(jsonData, JsonRequestBehavior.AllowGet);
        }

Here's the view's client-side code that calls the controller action

<!-- I haven't been able to get the bundler to work so I hard-coded these into the view.  YMMV -->
<script src="~/Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>

<script type="text/javascript">
    jQuery(document).ready(function(){ 
      jQuery("#pendingRequests").jqGrid({
        url: '/Home/GetPendingItems/',
        datatype: 'json',
        mtype: 'GET',
        colNames:['Name','Start Date','End Date', 'Status'],
        colModel :[
          { name: 'Name', index: 'Name', width: 120, align: 'left' },
          { name: 'Start Date', index: 'Start Date', width: 100, align: 'right' },
          { name: 'End Date', index: 'End Date', width: 100, align: 'right' },
          { name: 'Status', index: 'Status', width: 100, align: 'left' }],
        //pager: jQuery('#pager'),
        rowNum:10,
        rowList:[5,10,20,50],
        sortname: 'Id',
        sortorder: "desc",
        viewrecords: true,        
        caption: ''
      }); 
    }); 
</script>

<table id="pendingRequests"></table>