jqGrid with ASP.NET MVC problem displaying records

Question

I am using Craig Stuntz article on Using jqGrid with ASP.NET MVC: Search and Formatting, http://blogs.teamb.com/craigstuntz/2009/04/27/38243/ Using HttpFox I can see the json data being returned successfully but it will not display in the grid. The displays fine, but with no data and page numbers. Can anyone see a problem with this

$(document).ready(function() {
$("#grid").jqGrid({
    url: '/Grid/DynamicGridData/',
    datatype: 'json',
    mtype: 'GET',
    colNames: ['EnquiryID', 'FirstName', 'Surname', 'PostCode'],
    colModel: [
      { name: 'EnquiryID', index: 'EnquiryID', width: 80, align: 'left' },
      { name: 'FirstName', index: 'FirstName', width: 150, align: 'left' },
      { name: 'Surname', index: 'Surname', width: 150, align: 'left' },
      { name: 'PostCode', index: 'PostCode', width: 150, align: 'left'}],
    pager: jQuery('#pager'),
    rowNum: 10,
    rowList: [5, 10, 20, 50],
    sortname: 'EnquiryID',
    sortorder: "desc",
    viewrecords: true,
    imgpath: '/scripts/themes/steel/images',
    caption: 'My first grid'
});
$("#search").filterGrid("#grid", {
    gridModel: false,
    filterModel: [{
        label: 'Search',
        name: 'search',
        stype: 'text'
        }]

    });

});

Calling the above:

  <script language="javascript" type="text/javascript" src="<%= Url.Content          ("~/Scripts/Home.GridDemo.js") %>"></script>

<div id="search"></div>  
<table id="grid" cellpadding="0" cellspacing="0"></table>
<div id="pager"  style="text-align:center;"></div>

Answer 1

I think it is easier just to build your own grid table. Here is an example that uses alternating row colors,

<table class="results" width="100%" border="0" cellpadding="5">
<thead class="tablehead">
  <tr> 
    <td width="55px"><b>Country</b></td>
    <td width="55px"><b>State</b></td>
    <td width="55px"><b>City</b></td>
    <td width="55px"><b>Town</b></td>
    <td width="55px"><b>Postal</b></td>
  </tr>
</thead>
<tbody>
<% 
    int count = 0;
    foreach (var item in (IEnumerable<MY_RESULTS>)ViewData["My_Results"])
    {
        if (count % 2 == 0) { Response.Write("<tr class='even'>"); } else { Response.Write("<tr class='odd'>"); }   
    %>
            <td><%= Html.Encode(item.Country)%></td>
            <td><%= Html.Encode(item.State)%></td>
            <td><%= Html.Encode(item.City)%></td>
            <td><%= Html.Encode(item.Town)%></td>
            <td><%= Html.Encode(item.Postal)%></td>
        </tr>

    <% count += 1; } %>
</tbody>
</table>

You just need to set up css class for odd, even, and tablehead background colors.

Answer 2

The setGridDefaults need to be set as in the article:

$(document).ready(function() {
GridDemo.Home.GridDemo.setupGrid($("#grid"), $("#pager"), $("#search"));
});

GridDemo.Home.GridDemo = {
setupGrid: function(grid, pager, search) {
    grid.jqGrid({
    colNames: ['Int', 'String', 'Date'],
        colModel: [
                    { name: 'IntProperty', index: 'IntProperty' },
                    { name: 'StringProperty', index: 'StringProperty' },
                    { name: 'DateProperty', index: 'DateProperty' }, 
                  ],
        pager: pager,
        sortname: 'IntProperty',
        rowNum: 10,
        rowList: [10, 20, 50],
        sortorder: "asc",
        url: "GridDemoData"
    }).navGrid(pager, { edit: false, add: false, del: false, search: false });        
    search.filterGrid("#" + grid.attr("id"), {
        gridModel: false,
        filterModel: [{
            label: 'Search',
            name: 'search',
            stype: 'text'
        }]
    });
}

};