Menu
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.
917
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.
84
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
