jqGrid does not populate with data

Question

I am trying to populate a jqGrid with data from a web service. I have looked at the jqGrid code and documentation thoroughly. I need another set of eyes to look at the code below and tell me if I'm missing something.

As you'll see in the code, I have the grid set up to load when the page loads or during a refresh. After the grid loads, I make an Ajax call to get the JSON data (again) and display in a div below the grid.

I see most of the expected behavior. After the page loads, the grid displays the loading indicator, then the Ajax call is initiated and the JSON data is shown below the grid. The problem is that the grid is completely empty. The column headers are correct, but no data appears in the body of the grid.

Here is the code:

$(document).ready(function () {
    $('#resultDiv').html('');
    $('#waitIndicator').hide();
    $("#list").jqGrid({
        datatype: 'json',
        url: 'WeatherDataService.svc/GetWeatherData',
        jsonReader: {
            root: "Rows",
            page: "Page",
            total: "Total",
            records: "Records",
            repeatitems: false,
            userdata: "UserData",
            id: "StationId"
        },
        loadui: "block",
        mtype: 'GET',
        rowNum: 10,
        rowList: [10, 20, 30],
        viewrecords: true,
        colNames: ['Station ID', 'Station Name', 'Timestamp', 'Max Temp',
                   'Min Temp', 'Precipitation', 'Snowfall', 'SnowDepth'],
        colModel: [
            { name: 'StationId', index: 'StationId' },
            { name: 'StationName', index: 'StationName' },
            { name: 'Timestamp', index: 'Timestamp', align: 'right' },
            { name: 'MaxTemperature', index:'MaxTemperature',align:'right'},
            { name: 'MinTemperature', index:'MinTemperature',align:'right'},
            { name: 'Precipitation', index: 'Precipitation', align:'right'},
            { name: 'Snowfall', index: 'Snowfall', align: 'right' },
            { name: 'SnowDepth', index: 'SnowDepth', align: 'right' },
        ],
        pager: '#pager',
        sortname: 'StationId',
        sortorder: 'asc',
        caption: 'Weather Records',
        loadComplete: function () {
            // if the page index is not set (e.g. page index = 0),
            // force the page index to first page
            var pageIndex = $('#list').jqGrid('getGridParam', 'page');
            if (pageIndex == 0) pageIndex = 1;

            $('#waitIndicator').show();
            $.ajax({
                url: 'WeatherDataService.svc/GetWeatherData',
                type: "GET",
                data: ({ page: pageIndex, rows: 10,
                         sidx: 'StationId', sord: 'asc' }),
                dataType: "json",
                success: function (response) {
                    $('#resultDiv').html(response);
                    $('#waitIndicator').hide();
                },
                error: function (xmlHttpRequest, textStatus, errorThrown) {
                    $('#resultDiv').html('textStatus: ' + textStatus + 
                                         ', errorThrown: ' + errorThrown);
                }
            });
        }
    });
}); 

Here is the JSON data from the web service:

{
    "Total": 14975,
    "Page": 1,
    "Records": 149746,
    "Rows": [
        {
            "StationId": 50130,
            "StationName": "ALAMOSA WSO AP",
            "Timestamp": "\/Date(725871600000)\/",
            "MaxTemperature": null,
            "MinTemperature": null,
            "Precipitation": null,
            "Snowfall": null,
            "SnowDepth": null
        },
        {
            "StationId": 50130,
            "StationName": "ALAMOSA WSO AP",
            "Timestamp": "\/Date(725958000000)\/",
            "MaxTemperature": null,
            "MinTemperature": null,
            "Precipitation": null,
            "Snowfall": null,
            "SnowDepth": null
        },
        {
            "StationId": 50130,
            "StationName": "ALAMOSA WSO AP",
            "Timestamp": "\/Date(726044400000)\/",
            "MaxTemperature": null,
            "MinTemperature": null,
            "Precipitation": null,
            "Snowfall": null,
            "SnowDepth": null
        },
        {
            "StationId": 50130,
            "StationName": "ALAMOSA WSO AP",
            "Timestamp": "\/Date(726130800000)\/",
            "MaxTemperature": null,
            "MinTemperature": null,
            "Precipitation": null,
            "Snowfall": null,
            "SnowDepth": null
        },
        {
            "StationId": 50130,
            "StationName": "ALAMOSA WSO AP",
            "Timestamp": "\/Date(726217200000)\/",
            "MaxTemperature": null,
            "MinTemperature": null,
            "Precipitation": null,
            "Snowfall": null,
            "SnowDepth": null
        },
        {
            "StationId": 50130,
            "StationName": "ALAMOSA WSO AP",
            "Timestamp": "\/Date(726303600000)\/",
            "MaxTemperature": null,
            "MinTemperature": null,
            "Precipitation": null,
            "Snowfall": null,
            "SnowDepth": null
        },
        {
            "StationId": 50130,
            "StationName": "ALAMOSA WSO AP",
            "Timestamp": "\/Date(726390000000)\/",
            "MaxTemperature": null,
            "MinTemperature": null,
            "Precipitation": null,
            "Snowfall": null,
            "SnowDepth": null
        },
        {
            "StationId": 50130,
            "StationName": "ALAMOSA WSO AP",
            "Timestamp": "\/Date(726476400000)\/",
            "MaxTemperature": null,
            "MinTemperature": null,
            "Precipitation": null,
            "Snowfall": null,
            "SnowDepth": null
        },
        {
            "StationId": 50130,
            "StationName": "ALAMOSA WSO AP",
            "Timestamp": "\/Date(726562800000)\/",
            "MaxTemperature": null,
            "MinTemperature": null,
            "Precipitation": null,
            "Snowfall": null,
            "SnowDepth": null
        },
        {
            "StationId": 50130,
            "StationName": "ALAMOSA WSO AP",
            "Timestamp": "\/Date(726649200000)\/",
            "MaxTemperature": null,
            "MinTemperature": null,
            "Precipitation": null,
            "Snowfall": null,
            "SnowDepth": null
        }
    ],
    "UserData": null
}

For most of the columns the null values will result is empty cells. But I expect to see at least the StationIDs and StationNames. Thanks for taking a look.

Solution

First of all if the server send back the data which you posted, the jqGrid will do displayed the results (see http://www.ok-soft-gmbh.com/jqGrid/jsonfromsvc.htm). Of cause jqGrid will works not really good, because you use StationId as the id, but all rows in your JSON data has the same value 50130 as the id. So, for example, if you select one row all rows will be selected.

The DateTime is not a standard JSON type and it is not supported currently by jqGrid (see this answer and this feature request). To fix the problem you have to make at least some small changes in both data and the jqGrid.

The current JSON data has a lot of data with null value. To reduce the size of empty data send from the server consider to use EmitDefaultValue attribute.

Moreover I find strange, that you not use parameters like

ajaxGridOptions: { contentType: "application/json" },
serializeRowData: function (data) {return JSON.stringify(data);}

(see another old answer). Probably your WFC don't receive currently any input parameters like int page, int rows, string sidx, string sord and so on). If you post at least prototype of your server method which you call.

UPDATED: How I promised before I created a small WCF application and a HTML page which call the WCF service.

Your current data has no id. The field StationId along is not a key because it is the same in different data rows. If you include id in your data you can include in the column definition the option key:true and jqGrid will use the data as the id. Because the example will be used only to display the data without data editing I included no id in the data send from the server. In the case jqGrid use integer counter starting with 1 as the row ids. If you decide to include editing features in the grid you will have to include as id in the data.

Now we go to the code. Because You wrote that you use Visual Studio 2010 and answer nothing about the version of .NET I created an application in .NET 4.0. The web.config:

<?xml version="1.0"?>
<configuration>
    <system.web>
        <compilation debug="true" targetFramework="4.0" />
    </system.web>

    <system.serviceModel>
        <standardEndpoints>
            <webHttpEndpoint>
                <standardEndpoint helpEnabled="true"
                                  automaticFormatSelectionEnabled="true"/>
            </webHttpEndpoint>
        </standardEndpoints>
        <behaviors>
            <serviceBehaviors>
                <behavior name="">
                    <serviceMetadata httpGetEnabled="true" />
                    <serviceDebug includeExceptionDetailInFaults="false" />
                </behavior>
            </serviceBehaviors>
        </behaviors>
        <serviceHostingEnvironment multipleSiteBindingsEnabled="true" />
    </system.serviceModel>
</configuration>

File WeatherDataService.svc:

<%@ ServiceHost Factory="System.ServiceModel.Activation.WebServiceHostFactory"
                Service="WfcToJqGrid.WeatherDataService" %>

File IWeatherDataService.cs:

using System;
using System.Collections.Generic;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;

namespace WfcToJqGrid {
    [ServiceContract]
    public interface IWeatherDataService {
        [OperationContract,
         WebGet (RequestFormat = WebMessageFormat.Json,
                 ResponseFormat = WebMessageFormat.Json,
                 UriTemplate = "GetWeatherData?page={page}&rows={rows}" +
                               "&sidx={sortIndex}&sord={sortDirection}")]
        WeatherDataForJqGrid GetDataForjqGrid (int page, int rows,
                                               string sortIndex,
                                               SortDirection sortDirection);
    }

    [DataContract]
    public enum SortDirection {
        [EnumMember (Value = "asc")]
        Asc,
        [EnumMember (Value = "desc")]
        Desc
    }

    // jsonReader: { repeatitems: false }
    [DataContract]
    public class WeatherDataForJqGrid {
        [DataMember (Order=0, Name = "total")]
        public int Total { get; set; }          // total number of pages
        [DataMember (Order = 1, Name = "page")]
        public int Page { get; set; }           // current zero based page number
        [DataMember (Order = 2, Name = "records")]
        public int Records { get; set; }        // total number of records
        [DataMember (Order = 3, Name = "rows")]
        public IEnumerable<WeatherData> Rows { get; set; }
    }

    [DataContract]
    public class WeatherData {
        [DataMember (Order=0)]
        public int StationId { get; set; }
        [DataMember (Order = 1)]
        public string StationName { get; set; }
        [DataMember (Order = 2)]
        public DateTime Timestamp { get; set; }
        [DataMember (Order = 3, EmitDefaultValue = false)]
        public string MaxTemperature { get; set; }
        [DataMember (Order = 4, EmitDefaultValue = false)]
        public string MinTemperature { get; set; }
        [DataMember (Order = 5, EmitDefaultValue = false)]
        public string Precipitation { get; set; }
        [DataMember (Order = 6, EmitDefaultValue = false)]
        public string Snowfall { get; set; }
        [DataMember (Order = 7, EmitDefaultValue = false)]
        public string SnowDepth { get; set; }
    }
}

File WeatherDataService.svc.sc:

using System;
using System.Collections.Generic;
using System.Linq;
using System.ServiceModel.Web;
using System.Net;

namespace WfcToJqGrid {
    public class WeatherDataService : IWeatherDataService {
        // we use very simple database model to simulate a real data
        private static IQueryable<WeatherData> _repository = new List<WeatherData>{
            new WeatherData { StationId = 50130, StationName = "ALAMOSA WSO AP",
                              Timestamp = new DateTime(1993,1,1,8,0,0)},
            new WeatherData { StationId = 50130, StationName = "ALAMOSA WSO AP",
                              Timestamp = new DateTime(1993,1,2,8,0,0)},
            new WeatherData { StationId = 50130, StationName = "ALAMOSA WSO AP",
                              Timestamp = new DateTime(1993,1,3,8,0,0)},
            new WeatherData { StationId = 50130, StationName = "ALAMOSA WSO AP",
                              Timestamp = new DateTime(1993,1,4,8,0,0)},
            new WeatherData { StationId = 50130, StationName = "ALAMOSA WSO AP",
                              Timestamp = new DateTime(1993,1,5,8,0,0)},
            new WeatherData { StationId = 50130, StationName = "ALAMOSA WSO AP",
                              Timestamp = new DateTime(1993,1,6,8,0,0)},
            new WeatherData { StationId = 50130, StationName = "ALAMOSA WSO AP",
                              Timestamp = new DateTime(1993,1,7,8,0,0)},
            new WeatherData { StationId = 50130, StationName = "ALAMOSA WSO AP",
                              Timestamp = new DateTime(1993,1,8,8,0,0)},
            new WeatherData { StationId = 50130, StationName = "ALAMOSA WSO AP",
                              Timestamp = new DateTime(1993,1,9,8,0,0)},
            new WeatherData { StationId = 50130, StationName = "ALAMOSA WSO AP",
                             Timestamp = new DateTime(1993,1,10,8,0,0)}
        }.AsQueryable ();

        public WeatherDataForJqGrid GetDataForjqGrid (int page, int rows,
                                                      string sortIndex,
                                                      SortDirection sortDirection){
            int totalRecords = _repository.Count();

            // sorting of data
            IQueryable<WeatherData> orderdData = _repository;
            System.Reflection.PropertyInfo propertyInfo =
                typeof(WeatherData).GetProperty (sortIndex);
            if (propertyInfo != null) {
                orderdData = sortDirection == SortDirection.Desc ?
                    (from x in _repository
                     orderby propertyInfo.GetValue (x, null) descending
                     select x) :
                    (from x in _repository
                     orderby propertyInfo.GetValue (x, null)
                     select x);
            }

            // paging of the results
            IEnumerable<WeatherData> pagedData = orderdData
                .Skip ((page > 0? page - 1: 0) * rows)
                .Take (rows);

            // force revalidate data on the server on every request
            if (WebOperationContext.Current != null)
                WebOperationContext.Current.OutgoingResponse.Headers.Set (
                    HttpResponseHeader.CacheControl, "max-age=0");

            return new WeatherDataForJqGrid {
                Page = page,
                Records = totalRecords,
                Total = (totalRecords + rows - 1) / rows,
                Rows = pagedData
            };
        }
    }
}

(read more about caching "jqGrid data stored in browser cache?") and default.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Demonstration how use jqGrid to call WFC service</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8/css/ui.jqgrid.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8/js/jquery.jqGrid.min.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/json2.js"></script>
    <script type="text/javascript">
    //<![CDATA[
        jQuery(document).ready(function () {
            $("#list").jqGrid({
                datatype: 'json',
                url: 'WeatherDataService.svc/GetWeatherData',
                jsonReader: { repeatitems: false },
                loadui: "block",
                mtype: 'GET',
                rowNum: 5,
                rowList: [5, 10, 20, 30],
                viewrecords: true,
                colNames: ['Station ID', 'Station Name', 'Timestamp', 'Max Temp',
                           'Min Temp', 'Precipitation', 'Snowfall', 'SnowDepth'],
                colModel: [
                    { name: 'StationId', index: 'StationId', width: 100 },
                    { name: 'StationName', index: 'StationName', width: 150 },
                    { name: 'Timestamp', index: 'Timestamp', align: 'right', width: 250,
                        formatter: function (cellvalue, options, rowObject) {
                            // possible characters like "+0100" at the end of string will be ignored
                            return new Date(parseInt(cellvalue.substr(6, cellvalue.length - 8), 10));
                        }
                    },
                    { name: 'MaxTemperature', index: 'MaxTemperature', align: 'right', width: 100 },
                    { name: 'MinTemperature', index: 'MinTemperature', align: 'right', width: 100 },
                    { name: 'Precipitation', index: 'Precipitation', align: 'right', width: 100 },
                    { name: 'Snowfall', index: 'Snowfall', align: 'right', width: 100 },
                    { name: 'SnowDepth', index: 'SnowDepth', align: 'right', width: 100 },
                ],
                pager: '#pager',
                sortname: 'Timestamp',
                sortorder: 'asc',
                height: "100%",
                width: "100%",
                prmNames: { nd: null, search: null }, // we switch of data caching on the server
                                                      // and not use _search parameter
                caption: 'Weather Records'
            });
        });
    //]]>
    </script>
</head>

<body>

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

</body>
</html>

You can download the full code here.

Comments

[Tim Colton]

Thank you for your reply, Oleg. Unfortunately I still cannot get the grid to load after implementing your suggestions. I changed the date information to the ISO format and added "formatter: 'date'" to the jqGrid options. I also added the ajaxGridOptions and serializeRowData properties. When I store the JSON data in a file and change the url property to point to the file, the grid does load. This makes me wonder if the problem is with the ajax call and the web service. The method signature is shown in the next comment.

[Tim Colton]

[WebGet(ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Bare)] [OperationContract] public string GetWeatherData(int page, int rows, string sidx, string sord) { // Code to get the data JavaScriptSerializer jsSerializer = new JavaScriptSerializer(); string jsonOutput = jsSerializer.Serialize(dataOutput); return jsonOutput; } }

[Oleg]

Which version of .NET you use? Do you use Visual Studio 2008 or 2010? If you answers on the questions I could post you a corresponding small code example.

[Tim Colton]

We are using VS 2010. Thanks for your help.

[Tim Colton]

Thank you Oleg for taking the time to put this sample together. I've downloaded the ZIP file, unpacked it and tried out the application. It works great. I never intended to use the StationId as the key value. The combination of the StationID and Timestamp together form a unique combination. I was just using this dataset as a way to explore jqGrid. Thanks again for your help.

[Oleg]

@Tim Colton: You welcome! I suspected, that StationID and Timestamp together could construct a key. jqGrid not supports construct keys directly, but it is not a real problem. If you don't need to implement editing of the data you don't need define id or the key at all. Because you are new on the stackoverflow I recommend you to consider accepting (see meta.stackexchange.com/questions/5234/…) and vote up answers and questions (see stackoverflow.com/faq#howtoask). It makes other the searching in the stackoverflow much easier. Good luck!