jqSubGrid not loading with data

Question

I do realize many have asked this same question. I have tried all other suggestions and have had no success. I know for sure its something I am overlooking and wanted a second set of eyes to help me. Thanks in advance!!

My problem is that the primary grid loads find. Its the sub grid thats the problem.

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#PositionsGrid").jqGrid({
            url: '/Position/GetPositions?projectid=@Model.ID',
            datatype: 'json',
            mtype: 'POST',
            colNames: ['PositionID', 'ID', 'Job', 'Band', 'Start Date', 'End Date','Current Assignee','Terminated Worker','Status'],
            colModel: [
          { name: 'PositionID', index: 'PositionID', width: 20, align: 'left', hidden: true, sortable: false, search: false,key:true },
          { name: 'DisplayID', index: 'DisplayID', width: 50, align: 'left' },
          { name: 'JobTitle', index: 'JobTitle', width: 100, align: 'left' },
          { name: 'Band', index: 'Band', width: 50, align: 'left' },
          { name: 'StartDate', index: 'StartDate', width: 50, align: 'left', searchoptions: { sopt: ['cn'], dataInit: datePick} },
          { name: 'EndDate', index: 'EndDate', width: 50, align: 'left', searchoptions: { sopt: ['cn'], dataInit: datePick} },
          { name: 'CurrentWorker', index: 'CurrentWorker', width: 100, align: 'left' },
          { name: 'TerminatedWorker', index: 'TerminatedWorker', width: 100, align: 'left' },
          { name: 'Status', index: 'Action', width: 50, align: 'left', search: false}],
            pager: jQuery('#pager'),
            rowNum: 10,
            rowList: [5, 10, 20, 50],
            sortname: 'PositionID',
            sortorder: "asc",
            viewrecords: true,
            autowidth: true,
            subGrid: true,
            subGridRowExpanded: showDetails

        });
        $('#PositionsGrid').jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true, defaultSearch: 'cn' });
        $("#PositionGrid").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false, search: false, refresh: true });
    });

    datePick = function (elem) {
        $(elem).datepicker({ dateFormat: "mm/dd/yy", onSelect: function (dateText, inst) { $("#grid")[0].triggerToolbar(); } });
    };

    function showDetails(subgrid_id, row_id) {

        showSubGrid_AssignmentsGrid(subgrid_id, row_id, "<br><b>Worker History</b><br><br>", "AssignmentsGrid");

    }


    function showSubGrid_AssignmentsGrid(subgrid_id, row_id, message, suffix) {
     var subgrid_table_id;
        subgrid_table_id = subgrid_id + "_t";
        if (message) jQuery('#' + subgrid_id).append(message);
        if (message) jQuery('#' + subgrid_id).append(message);   
        jQuery("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table>");
        jQuery("#" + subgrid_table_id).jqGrid({
            url: "Position/GetAssignmentsByPosition?positionid=" + row_id,
            datatype: "json",
            colNames: ['AssignID', 'JobReqNum', 'WorkerName', 'StartDate', 'EndDate','Status'],
            colModel: [
            { name: "AssignID", index: "AssignID", width: 80},
            { name: "JobReqNum", index: "JobReqNum", width: 130 },
            { name: "WorkerName", index: "WorkerName", width: 80, align: "right" },
            { name: "StartDate", index: "StartDate", width: 80, align: "right" },
            { name: "EndDate", index: "EndDate", width: 100, align: "right" },
             { name: "Status", index: "Status", width: 100, align: "right" }
          ],
            height: '100%',
            rowNum: 20,
            sortname: 'AssignID',
            sortorder: "asc"
                });

    }

</script>

the controller action that loads the subgrid is below

  public JsonResult GetAssignmentsByPosition(int positionid)
    {
        ProjPosition position = uow.PositionRepository.GetPosition(positionid);
        var jsonRows = position.ProjPositionAssignments.AsEnumerable()
           .Select(a => new
           {
                cell = new string[] { a.ID.ToString(), 
                                      a.JobReqNum == null ? "" :a.JobReqNum,
                                      a.Worker == null ? "" : a.Worker.FullName,
                                      (a.StartDate == null) ? "" : ((DateTime)a.StartDate).ToString("MM/dd/yyyy"),
                                      (a.EndDate == null) ? "" : ((DateTime)a.EndDate).ToString("MM/dd/yyyy"),
                                      (a.Status == null ? "Active" : StatusDictionary.AssignmentStatusDictionary[a.Status])
                                     }
           })
           .ToArray();

        var jsonData = new
        {
            rows = jsonRows
        };

        return Json(jsonData);

    }

Answer 1

You also need to pass to jqgrid:

            page = numberOfPages
            records = totalRecords,

I personally use something like:

        var jsonData = new
        {
            total = (totalRecords + rows - 1) / rows,
            page = page,
            records = totalRecords,
            rows = (
                from item in pagedQuery                  
                select new
                {
                    cell = new string[] {       
                       item.value1,
                       item.value2, ....
                    }
                }).ToArray()

        };
        return Json(jsonData, JsonRequestBehavior.AllowGet);