jqGrid on Clientside – paging/editing/sorting queries

Question

I'm trying to build a system using jqgrid which does everything on the clientside, i.e. use AJAX to retrieve a JSON object (using C#/.Net) and cache this in a javascript variable and then populate several grids from that cache (addRowData), depending on the data. That's all working very well.

However, I'm having problems discovering how to do some of the more advanced things now.

1) paging/sorting the data with no server interaction. Is this possible? Or does it require that I write custom paging functions (i.e. when the user moves to page 2, get the next 10 records from the cache and update the grid with them). Hopefully there's an automatic way to do this? How about sorting? Read some things that suggest its done server side but maybe they were old articles? Not sure.

2) Allow the users to see controls (mainly radio buttons and datepicker) on each row and have those changes reflected in the cache variable. I looked at the editing functions of jqGrid but this seems to be "click/edit/save". Ideally I'd like the grid's initial display to show, for example, one of the columns displaying pairs of radio buttons on every row and the user can just click the ones they are interested in (i.e. they don't have to explicitly "edit" the row to see/change the radio buttons). This data is updated in the grid and, more importantly, in the cache variable driving the grid. Is there an automatic way of tying controls on each row to an underlying client dataset? How do I create the controls in each cell and relate their value to the cell value?

Hoepfully someone could point me in the right direction?

Thanks for any help you can give,

Bill

Answer 1

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 datatype: 'json' and loadonce: true parameters. The server should send all the data back. See jqgrid setGridParam datatype:local as an example.

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) outside 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 How to filter the jqGrid data NOT using the built in search/filter box as an example. If you will try to combine this way with the loadonce: true parameter you should understend, that after the first load of grid with loadonce: true the other parameter datatype: 'json' will be changed to datatype: 'local'. So to reload the grid you should additionally set datatype: 'json' every time before reloading the grid.

UPDATED 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 jQuery.show() and jQuery.hide() anytime when you need. Divs which should be hidden at the page start can have CSS style display:none.

Another option to create grids dinamically with cached data is following. You can remove a jqGrid with jQuery.remove() and insert a new one <table> and paging <div> element with a method like jQuery.after(). 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 <table> and paging <div> in a parent div element and you can use jQuery.empty() and jQuery.html() methods on the parent div to remove or insert a new one jqGrid.

Now about displaying of radio buttons inside of jqGrid. This is possible if you will use custom formater. See jqGrid: Editable column that always shows a select 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.

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 standard way. It have some advantages over "form editing" from the side of users comfort. The more you go away from the standard ways the more problems you could receive in the future. To demonstrate "inline editing" you can open http://trirand.com/blog/jqgrid/jqgrid.html and choose on the tree left "Row Editing" and then "Input Types". As a code example you can use jqGrid - edit only certain rows for an editable column.

UPDATED 2: 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 prmNames: { nd:null} parameter of jqGrid especially if you use Internet Explorer. If you do this the last HTTP GET results (inclusive jQuery.ajax 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 jQuery.ajax.

UPDATED 3 based on the source code posted: You have some errors in the code. Here is the fixed 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");

You can try it here http://www.ok-soft-gmbh.com/jqGrid/Clientside.htm

UPDATED 4: The same example inclusive the client side editing is here http://www.ok-soft-gmbh.com/jqGrid/ClientsideEditing.htm. It is based on the http://www.trirand.com/blog/?page_id=393/help/losing-edited-cell-data-after-paging/ and Losing edited cell data after paging.