StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Your main problem is that you use not absolute URLs in the <code>ajax</code> call. Wrong entries in <code>web.config</code> can make also problems. Moreover you use <code>datatype: getMovies</code> instead of <code>datatype: 'json'</code> and <code>postData: yourData</code>. The way with <code>datatype</code> as functions exist (see <a href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#function" rel="nofollow noreferrer">http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#function</a>), but since jqGrid 3.6.5 you have more direct way inside of <code>jsonReader</code> to read the data returned from web server.</p> <p><strong>UPDATED:</strong> It seems to me that describing of editing features I'll make later and explain here just how to get JSON data and fill there inside of jqGrid.</p> <p>First of all jqGrid can request itself the JSON data from the server. So we don’t need to make a separate <code>jQuery.ajax</code> call. You need only define a URL which point to the server and define some additional <code>jQuery.ajax</code> parameters which you prefer. You don’t post in your question the definition of the <code>Movie</code> class. So I define it myself like following</p> <pre><code>public class Movie { public int Id { get; set; } public string Name { get; set; } public string Director { get; set; } public string ReleaseDate { get; set; } public string IMDBUserRating { get; set; } public string Plot { get; set; } public string ImageURL { get; set; } } </code></pre> <p>You should remark, that Microsoft serialize <code>DataTime</code> type not as a readable date string but as a string <code>/Date(utcDate)/</code>, where <code>utcDate</code> is this number (see <a href="https://stackoverflow.com/questions/2794633/jquery-param-doesnt-serialize-javascript-date-objects/2794836#2794836">jQuery.param() - doesn't serialize javascript Date objects?</a>). To make fewer problems at the beginning I define <code>ReleaseDate</code> as string. </p> <p>Method <code>IList<Movie> GetMovies()</code> returns JSON data like an array of objects <code>Movie</code>. So jqGrid as a response to HTTP <code>GET</code> request receive from the <code>MovieService.svc/GetMovies</code> URL the data like following:</p> <pre><code> [{"Id":1, "Name": "E.T.", "Director": "Steven Spielberg",...},{...},...] </code></pre> <p>I can say that it is not typical format of data, which are waiting jqGrid (compare with <a href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#json_data" rel="nofollow noreferrer">http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#json_data</a>). To be able to place the data inside of jqGrid we must define a <code>jsonReader</code>. So we do following</p> <pre><code>jQuery("#editgrid").jqGrid({ url: '<%= Url.Content("~/MovieService.svc/GetMovies")%>', datatype: 'json', ajaxGridOptions: { contentType: "application/json" }, jsonReader: { repeatitems: false, id: "Id", root: function(obj) { return obj; }}, headertitles: true, sortable: true, colNames: ['Movie Name', 'Directed By', 'Release Date', 'IMDB Rating', 'Plot', 'ImageURL'], colModel: [ { name: 'Name', width: 250}, { name: 'Director', width: 250, align: 'right' }, { name: 'ReleaseDate', width: 100, align: 'right' }, { name: 'IMDBUserRating', width: 100, align: 'right' }, { name: 'Plot', width: 150 }, { name: 'ImageURL', width: 55, hidden: true } ], pager: jQuery('#pager'), pginput: false, rowNum: 0, height: '100%', viewrecords: true, rownumbers: true, caption: 'Movies from 2008' }).jqGrid('navGrid', '#pager', { add: false, edit: false, del: false, search: false }); </code></pre> <p><strong>REMARK</strong>: I remove from the example any sorting parameters, because in case of request of JSON data, the sorting parameter will be only send to server (some additional parameters append the server URL) and server must give back sorted data. For more information see description of <code>prmNames</code> parameter on <a href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options" rel="nofollow noreferrer">http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options</a> and description of <code>sopt</code> parameter on <a href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki:singe_searching" rel="nofollow noreferrer">http://www.trirand.com/jqgridwiki/doku.php?id=wiki:singe_searching</a>.</p> <p>With respect of <code>datatype: 'json'</code> we define <code>dataType: 'json'</code> parameter of <code>jQuery.ajax</code> (don’t confuse the case inside of <code>datatype</code> parameter). The names of all fields inside of <code>colModel</code> we define <strong>exact</strong> the same as the field names inside our JSON objects. Some additional parameters <code>viewrecords</code>, <code>rownumbers</code>, <code>sortable</code> and <code>headertitles</code> are not very important in this example, I choosed there because 1) I like there and 2) I set <code>rowNum: 0</code> to make possible the options <code>rownumbers: true</code> works correct and not show us negative row numbers started with -5 if <code>rowNum: 5</code> like in your original example.</p> <p>With <code>ajaxGridOptions: { contentType: "application/json" }</code> we define additional parameters which will be <strong>direct</strong> forwarded to the <code>jQuery.ajax</code>.</p> <p>The most complex part of this example is </p> <pre><code>jsonReader: { repeatitems: false, id: "Id", root: function(obj) { return obj; }} </code></pre> <p>It defines that id of all rows have the name "Id" (see definition of the <code>class Movie</code>). "<code>repeatitems: false</code>" say that every data field we want identify by the field name (defined in <code>colModel</code>) instead of default definition per position. The definition of <code>root</code> is a little strange, but it defines how to find the <strong>root</strong> of <strong>rows</strong> inside of JSON data. Default format of JSON data is following</p> <pre><code>{ total: "xxx", page: "yyy", records: "zzz", rows : [ {id:"1", cell:["cell11", "cell12", "cell13"]}, {id:"2", cell:["cell21", "cell22", "cell23"]}, ... ] } </code></pre> <p>and the root of rows are defined as <code>root: "rows"</code>. So if the JSON data assigned to the variable <code>res</code>, the root can be returned as <code>res.rows</code>. To allow jqGrid to read our data we define <code>jsonReader.root</code> as a function (this feature exist since jqGrid 3.6.5 see <a href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki:change#additions_and_changes" rel="nofollow noreferrer">http://www.trirand.com/jqgridwiki/doku.php?id=wiki:change#additions_and_changes</a>). You can verify that this strange method work. The typical additional parameters <code>page</code>, <code>total</code> (<code>lastpage</code>) and <code>records</code> are not exist inside of our JSON data and they will be initialized as following <code>page:0, total:1, records:0</code>. So we are not able to make data paging. You can expand <code>jsonReader</code> with functions defining <code>page</code>, <code>total</code> and <code>records</code> (also as functions) like</p> <pre><code>jsonReader: { repeatitems: false, id: "Id", root: function (obj) { return obj; }, page: function (obj) { return 1; }, total: function (obj) { return 1; }, records: function (obj) { return obj.length; } } </code></pre> <p>which will complete our jsonReader. Then setting of <code>rowNum: 0</code> will not more needed.</p> <p>I showed this way only to show the flexibility of jqGrid. You should use described way only if you access a web server which you cannot change. jqGrid has features like <em>paging</em>, <em>sorting</em> and two kind of <em>searching</em> (more as filtering with WHERE in the corresponding SELECT) of data: simple and advanced. If we want have these nice features inside of jqGrid on our web pages we should define in Web Service an additional method like</p> <pre><code>[OperationContract] [WebGet(ResponseFormat = WebMessageFormat.Json, UriTemplate = "jqGridGetTestbereiche?_search={_search}&page={page}&"+ "rows={rows}&sidx={sortIndex}&sord={sortDirection}&"+ "searchField={searchField}&searchString={searchString}&"+ "searchOper={searchOper}&filters={filters}")] public jqGridTable jqGridGetMovies( int page, int rows, string sortIndex, string sortDirection, string _search, string searchField, string searchString, string searchOper, string filters) </code></pre> <p>where <code>jqGridTable</code></p> <pre><code>public class jqGridTable { public int total { get; set; } // total number of pages public int page { get; set; } // current zero based page number public int records { get; set; } // total number of records public List<jqGridRow> rows { get; set; } } public class jqGridRow { public string id { get; set; } public List<string> cell { get; set; } } </code></pre> <p>Or if we want use the most compact form of data transferred from server to client then</p> <pre><code>// jsonReader: { repeatitems : true, cell:"", id: "0" } public class jqGridTable { public int total { get; set; } // total number of pages public int page { get; set; } // current zero based page number public int records { get; set; } // total number of records public List<List<string>> rows { get; set; }// first element in every row must be id of row. } </code></pre> <p>(you can read more about this kind of data transfer on <a href="http://www.trirand.com/blog/jqgrid/jqgrid.html" rel="nofollow noreferrer">http://www.trirand.com/blog/jqgrid/jqgrid.html</a> if you choose on the left tree part "Data Mapping" and then "Data Optimization")</p> <p>P.S.: About jsonReader you can read more on <a href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#json_data" rel="nofollow noreferrer">http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#json_data</a>. One my old answer <a href="https://stackoverflow.com/questions/2690657/mapping-json-data-in-jqgrid/2706620#2706620">Mapping JSON data in JQGrid</a> can be also interesting for you.</p> <p><strong>UPDATED 2</strong>: Because you don't mark the answer as accepted, you stay have some problems. So I created a new Project in Visual Studio 2010 which demonstrate what I written. You can download the source from <a href="http://www.ok-soft-gmbh.com/jqGrid/jQueryMVC.zip" rel="nofollow noreferrer">http://www.ok-soft-gmbh.com/jqGrid/jQueryMVC.zip</a>. Compare with your project, especially the part with full url as a parameter of jqGrid and a part of web.config which describes WCF service interface.</p> <p><strong>UPDATED 3</strong>: I use VS2010 not so long time. So I could very quickly downgrade this to VS2008. So almost the same code working working in Visual Studio 2008, but with ASP.NET MVC 2.0 you can download from <a href="http://www.ok-soft-gmbh.com/jqGrid/VS2008jQueryMVC.zip" rel="nofollow noreferrer">http://www.ok-soft-gmbh.com/jqGrid/VS2008jQueryMVC.zip</a>. The code in ASP.NET MVC 1.0 should be the same, but a GUID from the project file and some strings from Web.config should be patched (see <a href="http://www.asp.net/learn/whitepapers/aspnet-mvc2-upgrade-notes" rel="nofollow noreferrer">http://www.asp.net/learn/whitepapers/aspnet-mvc2-upgrade-notes</a>). </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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