StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>First of all I hope the code examples from <a href="https://stackoverflow.com/questions/3161302/jqgrid-page-1-of-x-pager/3161542#3161542">the answer</a> could help you (see also <a href="https://stackoverflow.com/questions/2675625/setting-the-content-type-of-requests-performed-by-jquery-jqgrid/2678731#2678731">this answer</a>). The main idea, that you should use following additional jqGrid parameters</p> <pre><code>ajaxGridOptions: { contentType: 'application/json; charset=utf-8' }, serializeGridData: function (postData) { return JSON.stringify(postData); }, jsonReader: { root: "d.rows", page: "d.page", total: "d.total", records: "d.records" }; </code></pre> <p>If the server not set <code>rows</code>, <code>page</code>, <code>total</code> and <code>records</code> parameter in the response and just return the list of data like in your case you can use the following <code>jsonReader</code></p> <pre><code>jsonReader: { root: function (obj) { return obj.d; }, page: function (obj) { return 1; }, total: function (obj) { return 1; }, records: function (obj) { return obj.d.length; } } </code></pre> <p>(see <a href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#jsonreader_as_function" rel="nofollow noreferrer">here</a> and <a href="https://stackoverflow.com/questions/2835957/jquery-with-asp-net-mvc-calling-ajax-enabled-web-service/2836817#2836817">here</a>). In the case if you don't want implement server side data paging, sorting and filtering I recommend you to use <code>loadonce:true</code>.</p> <p>Moreover your code have some problems. The first one is that you call <code>JavaScriptSerializer.Serialize</code> manually in your web method. If you use <code>dataType: "json"</code> the JSON response will be converted to object by <code>$.ajax</code>. It is so in your case also. Because of that the <code>msg</code> parameter of the <code>success</code> handler has <code>d</code> property. But <code>msg.d</code> is not the object, but one more JSON string which you convert to object with <code>eval(msg.d)</code>. The reason is that the results of your method will be converted to JSON one more time.</p> <p>To fix the problem you should change the web method <code>GetUsersJSON</code> to the following:</p> <pre><code>[WebMethod] [ScriptMethod (ResponseFormat = ResponseFormat.Json)] public static List<User> GetUsersJSON() { using(UserAdministrationSandboxDataContext uasd = new UserAdministrationSandboxDataContext()) { return uasd.GetUserList(); } } </code></pre> <p>then you can place <code>data: eval(msg.d)</code> in your previous example to <code>data: msg.d</code>.</p> <p>Typically one use additional <code>[ScriptMethod (ResponseFormat = ResponseFormat.Json)]</code> or <code>[ScriptMethod (UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]</code> attribute for the web method, but in many cases (it seems also in your case) it is not needed.</p> <p>After the usage of <code>ajaxGridOptions</code>, <code>serializeGridData</code> and <code>jsonReader</code> jqGrid will able to read the page of data, but the data should be in JSON format and not twice encoded JSON format.</p> <p><strong>UPDATED</strong>: You ask me to comment <strong>why</strong> you need to use <code>repeatitems:false</code> setting in the <code>jsonReader</code> to be able to read your data. It is important question for understanding how <code>jsonReader</code> work, but the answer will take a little place.</p> <p>In general there are two main styles how the JSON data can be formatted for jqGrid. It should be array of data for grid rows. Every item of the array represent the row in grid and the row should be in one from the two main form</p> <p>1) as an object with named properties like</p> <pre><code>{"Username":"TestUser","Email":"TestUser@test.com","Comment":"..","IsApproved":true} </code></pre> <p>or 2) an array of strings like</p> <pre><code>["TestUser","TestUser@test.com","true"] </code></pre> <p>or</p> <pre><code>["TestUser","TestUser@test.com","1"] </code></pre> <p>jqGrid map both "true" and "1" values to the boolean value "true" in case of <code>edittype:'checkbox'</code> setting. How you can understand if the grid has many checkbox-columns the usage of "1"/"0" format can reduce the size of transfered data.</p> <p>The <code>repeatitems:false</code> option means that jqGrid should scan JSON data for the first (object style) representation of data. The <code>repeatitems:true</code> means the second (array style) representation.</p> <p>By the way if you use the object style (<code>repeatitems:false</code>) the <code>cell</code> setting of the <code>jsonReader</code> will be <strong>not used</strong> and you can remove <code>cell:''</code> setting which you use.</p> <p>The <code>id</code> option of the <code>jsonReader</code> in numeric form is practical if you have one column in the grid with unique values. The option <code>id:'0'</code> means that the value of the column "Username" will be used as the row id. If you examine the grid with Firebug of Developer tools of IE or Chrome you will see that the corresponding <code><tr></code> element has attribute <code>id="TestUser"</code> (used in your data). Because duplicate in ids are not allowed on one HTML page, you can understand that it is very important to define grid with correct unique ids. If jqGrid not find id column in the data it will use ids "1", "2", ... So if you see that your grid has the values you should search for the error in the <code>id</code> property of the <code>jsonReader</code>.</p> <p>The next important thing is the advantages and disadvantages of two ways of the data representation: object style (<code>repeatitems:false</code>) and array style (<code>repeatitems:true</code>)</p> <p>The object style has advantage in two main cases</p> <ol> <li>you want just post existing objects with as less work on the server as possible (quick and dirty solution)</li> <li>you get data from the server which interface you can not change.</li> </ol> <p>In all other situations the array style (<code>repeatitems:true</code>) has advantages compared with the object style. The main from there</p> <ol> <li>In the object style representation will be send frequently <strong>more data as needed</strong>. In your example the "Comment" property for example will be send which will not be used by jqGrid.</li> <li>The data from array style are much more compacter because you will not transfer the name of properties (which are <strong>constants</strong>) in every row.</li> </ol> <p>So if you want to reduce the size of transfered data and you can make changes on the server side I would recommend you to use array style (<code>repeatitems:true</code>) of representation of data. In the case the <code>cell:''</code> property of the <code>jsonReader</code> can be good used.</p> <p>I recommend you to look though <a href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data" rel="nofollow noreferrer">the part of jqGrid documentation</a> about <code>jsonReader</code>, <code>xmlReader</code> and <code>localReader</code>.</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