Jqfrid Subgrid Data not loading

Question

The main grid loads fine but When I click on the plus icon the subgrid data does not load, its says loading.... But nothing happens. Don't know what I'm missing. Please help.

Below is the code I'm using:

Controller

namespace SubGrid.Controllers
{
public class HomeController : Controller
{
   public ActionResult Index()
    {
         return View("Index");
    }
    RoopaDBEntities db = new RoopaDBEntities();
    public JsonResult GetDepts(string sidx, string sord, int page, int rows, string filter)
    {
        int pageIndex = Convert.ToInt32(page) - 1;
        int pageSize = rows;
        var DeptsResults = db.Table_Dept.Select(
            a => new
            {
                a.DeptID,
                a.DeptName,
                a.HOD,
                a.Status,
            });
        int totalRecords = DeptsResults.Count();
        var totalPages = (int)Math.Ceiling((float)totalRecords / (float)rows);
        if (sord.ToUpper() == "Desc")
        {
            DeptsResults = DeptsResults.OrderByDescending(s => s.DeptID);
            DeptsResults = DeptsResults.Skip(pageIndex * pageSize).Take(pageSize);
        }
        else
        {
            DeptsResults = DeptsResults.OrderBy(s => s.DeptID);
            DeptsResults = DeptsResults.Skip(pageIndex * pageSize).Take(pageSize);
        }
        var jsonData = new
        {
            total = totalPages,
            page,
            records = totalRecords,
            rows = DeptsResults
        };
        return Json(jsonData, JsonRequestBehavior.AllowGet);
    }
    public JsonResult GetEmps(string sidx, string sord, int page, int rows, string filter)
    {
        int pageIndex = Convert.ToInt32(page) - 1;
        int pageSize = rows;
        var EmpsResults = db.Table_Emp.Select(
            a => new
            {
                a.DeptID,
                a.EmpID,
                a.EmpName,
                a.Gender,
                a.Salary,
            });

        int totalRecords = EmpsResults.Count();
        var totalPages = (int)Math.Ceiling((float)totalRecords / (float)rows);
        if (sord.ToUpper() == "Desc")
        {
            EmpsResults = EmpsResults.OrderByDescending(s => s.EmpID);
            EmpsResults = EmpsResults.Skip(pageIndex * pageSize).Take(pageSize);
        }
        else
        {
            EmpsResults = EmpsResults.OrderBy(s => s.EmpID);
            EmpsResults = EmpsResults.Skip(pageIndex * pageSize).Take(pageSize);
        }
        var jsonData = new
        {
            total = totalPages,
            records = totalRecords,
            rows = EmpsResults
        };
        return Json(jsonData, JsonRequestBehavior.AllowGet);
    }
}
}    

JavaScript

 $(function () {
 $("#ListGrid").jqGrid({
    url: "../Home/GetDepts/",
    datatype: 'json',
    mtype: 'Get',
    colNames: ['DeptID', 'DeptName', 'HOD', 'Status'],
    colModel: [
        { key: true, name: 'DeptID', index: 'DeptID' },
        { key: false, name: 'DeptName', index: 'DeptName' },
        { key: false, name: 'HOD', index: 'HOD' },
        { key: false, name: 'Status', index: 'Status' }
    ],
    pager: jQuery('#pager'),
    rowNum: 10,
    rowList: [10, 20, 30, 40],
    height: 225,
    sortname: 'DeptID',
    sortorder: "desc",
    viewrecords: true,
    loadonce: true,
    ignoreCase: true,
    caption: "Department List",
    autowidth: true,
    multiselect: false,
    emptyrecords: 'No records to display',
    jsonReader: {
        root: "rows",
        page: "page",
        total: "total",
        records: "records",
        repeatitems: false,
        id: "0",
    },

    subGrid: true,
     subGridOptions: {
        "plusicon": "ui-icon-triangle-1-e",
        "minusicon": "ui-icon-triangle-1-s",
        "openicon": "ui-icon-arrowreturn-1-e",
         },
    subGridRowExpanded: function (subgrid_Id, rowid) {
        var $subgrid = $("<table id='" + subgrid_Id + "_t'></table>");
        $("#" + subgrid_Id)
            .append($subgrid);
        $subgrid.jqGrid({
            url: '../Home/GetEmps/' + '?id=' + rowid,
            postData: {
                q: 2,
                id: rowid,
                DeptID: rowid
            },
            datatype: "json",
            mtype: 'Get',
            colNames: ['Dept ID', 'Emp ID', 'Emp Name', 'Gender','Salary'],
            colModel: [
                { index: 'DeptID', name: 'DeptID' },
                { index: 'EmpID', name: 'EmpID', key: true },
                { index: 'EmpName', name: 'EmpName'},
                { index: 'Gender', name: 'Gender' },
                { index: 'Salary', name: 'Salary' }
            ],
            viewrecords: true,
            height: '100%',
            autowidth: true,
            rowNum: 5,
            idPrefix: rowid + "_",
          })
    },                   
        loadComplete: function () {
            $("tr.jqgrow:odd").css("background", "LightBlue");
        }
})

.navGrid('#pager', { edit: true, add: true, del: true, search: true, refresh: true })

}); 

Index:

     @model SubGrid.Models.Dept
    @{
    ViewBag.Title = "Index";
     }
    <div>
    <table>
         <tr>
             <td    width="100%"><tableid="ListGrid"></table></td>                           

            <td><div id="pager"></div></td>   
        </tr>

    </table>
</div>

<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />

<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/i18n/grid.locale-en.js"></script>
<script src="~/Scripts/Dept.js"></script>

<script src="~/Scripts/jquery.jqGrid.min.js"></script>
<script src="~/Scripts/grid.subgrid.js"></script>
<script src="~/Scripts/jquery.jqGrid.js"></script>