jQuery Grid Plugin - jqGrid

I just started using jqgrid 3.6.1. all my Json and everything is fine. my jqgrid comes up with no data. I even created the JSON manually and didn't solve the issue. I used the same code with  version 3.4 and worked just fine.   I am using MVC 2. Below is my code for the page. Any help will be appreciated.

<script type="text/javascript">
    jQuery(document).ready(function() {
    GridMyFirstGrid.setupGrid($("#list"), $("#pager"), $("#noSearch"));

});

GridMyFirstGrid = {
    setupGrid: function(grid, pager, search) {
        grid.jqGrid({
            url: '/DashBoard/GetUserItems/',
            datatype: 'json',
            mtype: 'GET',
            colNames: ['ItemId', 'Name', 'Price', 'SKU', 'Amount Saved', 'Ready To Buy Code'],
            colModel: [
          { name: 'ItemId', index: 'ItemId', hidden: true },
          { name: 'Name', index: 'Name', editable: true, width: 100 },
          { name: 'Price', index: 'Price', editable: true, width: 460 },
          { name: 'SKU', index: 'SKU', editable: true, width: 100 },
          { name: 'AmountSaved', index: 'AmountSaved', editable: true, width: 200 },
          { name: 'ReadyToBuyCode', index: 'ReadyToBuyCode', hidden: true }
      ],
            pager: pager,
            jsonReader: {
                root: "Rows",
                page: "Page",
                total: "Total",
                records: "Records",
                userdata: "UserData",
                id: "ItemId"
            },
            rowNum: 10,
            rowList: [5, 10, 20, 50],
            sortorder: "desc",
            viewrecords: true,
            imgpath: '../../Scripts/themes/coffee/images',
            caption: 'My first grid'
        });
    }
};
</script>
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>