StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>All what you want to have in the part 1 of your question can be implemented with jqGrid 3.7.x. You should use both <code>datatype: 'json'</code> and <code>loadonce: true</code> parameters. The server should send <strong>all</strong> the data back. See <a href="https://stackoverflow.com/questions/3169408/jqgrid-setgridparam-datatypelocal/3170652#3170652">jqgrid setGridParam datatype:local</a> as an example.</p> <p>What about the second part of your question. It seems to me that you try to make jqGrid too complex. I find much easier to set some controls (select/dropdown boxes, checkboxes or radio buttons) <strong>outside</strong> of the jqGrid (for example on top of the grid). If the user make changes in some of this control you should reload the grid from the server based on the new choosed parameters. See <a href="https://stackoverflow.com/questions/2928371/how-to-filter-the-jqgrid-data-not-using-the-built-in-search-filter-box/2928819#2928819">How to filter the jqGrid data NOT using the built in search/filter box</a> as an example. If you will try to combine this way with the <code>loadonce: true</code> parameter you should understend, that after the first load of grid with <code>loadonce: true</code> the other parameter <code>datatype: 'json'</code> <strong>will be changed</strong> to <code>datatype: 'local'</code>. So to reload the grid you should additionally set <code>datatype: 'json'</code> every time before reloading the grid.</p> <p><strong>UPDATED</strong> based on comments: Well. If you have some predefined data sets, you want load all from the server and then quick display the grid needed you can just define some dives and place all jqGrids (table and paging div elements) inside the corresponding additional div (one div per jqGrid). You can start loading the data to all this grids at the page loading. You makes parents divs invisible or hidden with respect of <code>jQuery.show()</code> and <code>jQuery.hide()</code> anytime when you need. Divs which should be hidden at the page start can have CSS style <code>display:none</code>.</p> <p>Another option to create grids dinamically with cached data is following. You can remove a jqGrid with <code>jQuery.remove()</code> and insert a new one <code><table></code> and paging <code><div></code> element with a method like <code>jQuery.after()</code>. With this way you can construct jqGrid absolutely dynamiclly. If you do so you should take in consideration, that jqGrid create some additional divs over table and paging div elements. So to delete whole jqGrid with id="list" you should remove div with id="gbox_list". Alternative if you place both <code><table></code> and paging <code><div></code> in a parent div element and you can use <code>jQuery.empty()</code> and <code>jQuery.html()</code> methods on the parent div to remove or insert a new one jqGrid.</p> <p>Now about displaying of radio buttons inside of jqGrid. This is possible if you will use custom formater. See <a href="https://stackoverflow.com/questions/2991267/jqgrid-editable-column-that-always-shows-a-select/2992064#2992064">jqGrid: Editable column that always shows a select</a> as example how to display selects (dropdown boxes) inside of jqGrid. By the way I see no advantage to use radio buttons compareing with selects. Radio buttons took only more place on the page and users will have to scroll the page friquently.</p> <p>Nevertheless I don't recommend you to use complex elements inside of jqGrid cells. I recommend you to demonstrate to your users "Inline Editing" feature of jqGrid. It means if user select a row or make double-click on a row (you can implement one way which prefer your users) the row will be switched in the editing mode with checkboxes, select boxes (dropdown boxes), text inputs and so on. This is a <strong>standard</strong> way. It have some advantages over "form editing" from the side of users comfort. The more you go away from the <strong>standard</strong> ways the more problems you could receive in the future. To demonstrate "inline editing" you can open <a href="http://trirand.com/blog/jqgrid/jqgrid.html" rel="nofollow noreferrer">http://trirand.com/blog/jqgrid/jqgrid.html</a> and choose on the tree left "Row Editing" and then "Input Types". As a code example you can use <a href="https://stackoverflow.com/questions/2863874/jqgrid-edit-only-certain-rows-for-an-editable-column/2866685#2866685">jqGrid - edit only certain rows for an editable column</a>.</p> <p><strong>UPDATED 2</strong>: One more small remark. If the data on the server will be not changed friquently and you want more long time cache there on the client you can consider to use <code>prmNames: { nd:null}</code> parameter of jqGrid especially if you use Internet Explorer. If you do this the last HTTP GET results (inclusive <code>jQuery.ajax</code> requests) will be cached on the client and next ajax rwquests can load data from the local browser cache instead of sending requests to the server. If the server include any information about the allowed caching time in the response (HTTP headers) it will be automatically used on the client in <code>jQuery.ajax</code>.</p> <p><strong>UPDATED 3</strong> based on the source code posted: You have some errors in the code. Here is the fixed code</p> <pre><code>var myGrid = $("#mygrid").jqGrid({ datatype: 'local', colModel: [ { name: 'AID', label: 'Some ID', key: true, width: 100, editable: false, sorttype: "int" }, { name: 'Name', width: 300, editable: false }, { name: 'Group', width: 100, editable: false }, { name: 'Info', width: 100, editable: false }, { name: 'AValue', width: 100, editable: true, edittype: 'text' } ], pager: '#mypager', rowNum: 10, rowList: [10, 20, 500], viewrecords: true, autowidth: true, sortname: 'AID', sortorder: 'desc' }); myGrid.jqGrid('navGrid','#mypager',{edit:false,add:false,del:false,search:false}); var mydata = []; for (var i = 0; i < 100; i++) { mydata.push({AID:i,Name:"123",Group:"456",Info:"78",AValue:"8"}); } myGrid.setGridParam({data: mydata}).trigger("reloadGrid"); </code></pre> <p>You can try it here <a href="http://www.ok-soft-gmbh.com/jqGrid/Clientside.htm" rel="nofollow noreferrer">http://www.ok-soft-gmbh.com/jqGrid/Clientside.htm</a></p> <p><strong>UPDATED 4</strong>: The same example inclusive the client side editing is here <a href="http://www.ok-soft-gmbh.com/jqGrid/ClientsideEditing.htm" rel="nofollow noreferrer">http://www.ok-soft-gmbh.com/jqGrid/ClientsideEditing.htm</a>. It is based on the <a href="http://www.trirand.com/blog/?page_id=393/help/losing-edited-cell-data-after-paging/" rel="nofollow noreferrer">http://www.trirand.com/blog/?page_id=393/help/losing-edited-cell-data-after-paging/</a> and <a href="https://stackoverflow.com/questions/3229141/losing-edited-cell-data-after-paging/">Losing edited cell data after paging</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