Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>First of all if the server send back the data which you posted, the jqGrid will do displayed the results (see <a href="http://www.ok-soft-gmbh.com/jqGrid/jsonfromsvc.htm" rel="nofollow noreferrer">http://www.ok-soft-gmbh.com/jqGrid/jsonfromsvc.htm</a>). Of cause jqGrid will works not really good, because you use <code>StationId</code> as the id, but all rows in your JSON data has <strong>the same</strong> value 50130 as the id. So, for example, if you select one row all rows will be selected.</p> <p>The <code>DateTime</code> is not a standard JSON type and it is not supported currently by jqGrid (see <a href="https://stackoverflow.com/questions/3770626/asp-net-mvc-model-with-datetime-trying-to-serialize-for-json-for-jqgrid/3771115#3771115">this answer</a> and <a href="http://www.trirand.com/blog/?page_id=393/feature-request/sopport-for-microsoft-date-format-date1285128000000/" rel="nofollow noreferrer">this feature request</a>). To fix the problem you have to make at least some <a href="http://www.ok-soft-gmbh.com/jqGrid/jsonfromsvc1.htm" rel="nofollow noreferrer">small changes</a> in both data and the jqGrid.</p> <p>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 <a href="http://msdn.microsoft.com/en-us/library/system.runtime.serialization.datamemberattribute.emitdefaultvalue.aspx" rel="nofollow noreferrer">EmitDefaultValue</a> attribute.</p> <p>Moreover I find strange, that you not use parameters like</p> <pre><code>ajaxGridOptions: { contentType: "application/json" }, serializeRowData: function (data) {return JSON.stringify(data);} </code></pre> <p>(see <a href="https://stackoverflow.com/questions/3161302/jqgrid-page-1-of-x-pager/3161542#3161542">another old answer</a>). Probably your WFC don't receive currently any input parameters like <code>int page, int rows, string sidx, string sord</code> and so on). If you post at least prototype of your server method which you call.</p> <p><strong>UPDATED:</strong> How I promised before I created a small WCF application and a HTML page which call the WCF service.</p> <p>Your current data <strong>has no id</strong>. The field <code>StationId</code> 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 <code>key:true</code> 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 <strong>no id</strong> 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.</p> <p>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 <code>web.config</code>:</p> <pre><code>&lt;?xml version="1.0"?&gt; &lt;configuration&gt; &lt;system.web&gt; &lt;compilation debug="true" targetFramework="4.0" /&gt; &lt;/system.web&gt; &lt;system.serviceModel&gt; &lt;standardEndpoints&gt; &lt;webHttpEndpoint&gt; &lt;standardEndpoint helpEnabled="true" automaticFormatSelectionEnabled="true"/&gt; &lt;/webHttpEndpoint&gt; &lt;/standardEndpoints&gt; &lt;behaviors&gt; &lt;serviceBehaviors&gt; &lt;behavior name=""&gt; &lt;serviceMetadata httpGetEnabled="true" /&gt; &lt;serviceDebug includeExceptionDetailInFaults="false" /&gt; &lt;/behavior&gt; &lt;/serviceBehaviors&gt; &lt;/behaviors&gt; &lt;serviceHostingEnvironment multipleSiteBindingsEnabled="true" /&gt; &lt;/system.serviceModel&gt; &lt;/configuration&gt; </code></pre> <p>File <code>WeatherDataService.svc</code>:</p> <pre><code>&lt;%@ ServiceHost Factory="System.ServiceModel.Activation.WebServiceHostFactory" Service="WfcToJqGrid.WeatherDataService" %&gt; </code></pre> <p>File <code>IWeatherDataService.cs</code>:</p> <pre><code>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}&amp;rows={rows}" + "&amp;sidx={sortIndex}&amp;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&lt;WeatherData&gt; 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; } } } </code></pre> <p>File <code>WeatherDataService.svc.sc</code>:</p> <pre><code>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&lt;WeatherData&gt; _repository = new List&lt;WeatherData&gt;{ 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&lt;WeatherData&gt; 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&lt;WeatherData&gt; pagedData = orderdData .Skip ((page &gt; 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 }; } } } </code></pre> <p>(read more about caching <a href="https://stackoverflow.com/questions/3885658/jqgrid-data-stored-in-browser-cache/3885956#3885956">"jqGrid data stored in browser cache?"</a>) and <code>default.htm</code>:</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;Demonstration how use jqGrid to call WFC service&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/redmond/jquery-ui.css" /&gt; &lt;link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8/css/ui.jqgrid.css" /&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8/js/i18n/grid.locale-en.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8/js/jquery.jqGrid.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/json2.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; //&lt;![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' }); }); //]]&gt; &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;table id="list"&gt;&lt;tr&gt;&lt;td/&gt;&lt;/tr&gt;&lt;/table&gt; &lt;div id="pager"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>You can download the full code <a href="http://www.ok-soft-gmbh.com/jqGrid/WfcToJqGrid.zip" rel="nofollow noreferrer">here</a>.</p>
    singulars
    1. This table or related slice is empty.
    1. POjqGrid does not populate with data
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USCommunity
    1. USOleg
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POjqGrid does not populate with data
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    1. COThank 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.
      singulars
      1. PO
      1. USTim Colton
    2. CO[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; } }
      singulars
      1. PO
      1. USTim Colton
    3. COWhich 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.
      singulars
      1. PO
      1. USOleg
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload