First of all, if the server sends the data you sent, jqGrid will show the results (see http://www.ok-soft-gmbh.com/jqGrid/jsonfromsvc.htm ), The reason jqGrid will not work very well, because you use StationId as an identifier, but all lines in your JSON data have the same 50130 value as an identifier. So, for example, if you select one row, all rows will be selected.
DateTime not a standard JSON type and is not currently supported by jqGrid (see this answer and this function request ). To fix the problem, you should make at least a few small changes to both the data and jqGrid.
Current JSON data contains a lot of data with a null value. To reduce the size of empty data sent from the server, use EmitDefaultValue .
Moreover, I find it strange that you do not use parameters such as
ajaxGridOptions: { contentType: "application/json" }, serializeRowData: function (data) {return JSON.stringify(data);}
(see another old answer ). Your WFC is probably not currently receiving any input parameters such as int page, int rows, string sidx, string sord , etc.). If you place at least a prototype of your server method that you are calling.
UPDATED: As I promised, before creating a small WCF application and an HTML page that calls the WCF service.
Your current data does not have an identifier . The StationId field along is not key because it is the same across different rows of data. If you include the identifier in your data, you can include the key:true option in the column definition, and jqGrid will use the data as the identifier. Since this example will only be used to display data without editing the data, I included no id in the data sent from the server. In the case where jqGrid uses an integer counter starting at 1 as row identifiers. If you decide to include editing features in the grid, you will need to specify as an identifier in the data.
Now go to the code. Since you wrote that you are using Visual Studio 2010 and are not responding to the .NET version, I created the application in .NET 4.0. 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>
WeatherDataService.svc File:
<%@ 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; } } }
WeatherDataService.svc.sc File:
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 }; } } }
(more on 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 .