Forum
Log In
Home
Topic RSS
Related Topics
19:50
07/07/2010
Offline
Hi,
Great product! Getting some really great results - so thanks to the devs! Having a few "newbie" issues that I hope someone can help me with.
I'm trying to build a grid 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
15:41
27/04/2010
Offline
Hello,
1) If you are already retrieving the data from the server using AJAX call and storing the gathered data into a js object in order to use it to populate jqgrids afterwards, it is possible to obtain what you are looking for. Since you already have a js object that contains all the data you are needing, you can configure the jqgrids to work on local data and point out the js object containing the previously loaded data from the server. You will then be able to use sorting and pagination on the localdata.
Please refer to the jqgrid version 3.7 demos here in "New in version 3.7″ then "Load array data at once":
http://www.trirand.com/blog/jq.....qgrid.html
If you want to load it from the server using jqgrid's inbeded AJAX support, you can also obtain what you desire.
Please refer to the jqgrid version 3.7 demos here in "New in version 3.7″ then "Load at once from server":
http://www.trirand.com/blog/jq.....qgrid.html
2) You can use custom formatter to define how your data should appear in the grid (couple of radio buttons, etc.). It is also possible to permit the user to click on the radio buttons directly without entering editmode. But you won't be able to use any automated way to save the data in the grid and in the cache object. You will have to specify yourself how the data should be saved in the grid and cache object.
For instance, here is an example of a custom checkbox formatter enabling the user to click directly on the checkboxes in order to save the new data in the grid. (Here I am not working on local data but with the server so you will have to adapt the solution to your needs):
val = $('#grille_columns').getCell(rowid, colid);
newValue = "N";
if (val == "N") newValue = "O";
$("#grille_columns").setCell(rowid, colid, newValue);
val = $('#grille_columns').getCell(rowid, colid);
$.ajax({
type:"POST",
url:"./handlers/ColumnsJqGridEdit.ashx",
data: {"oper": "edit", "col_aff": val,"id": rowid},
success: function() {
},
error: function() {
alert('An error has occured.');
}
});
}
jQuery.extend($.fn.fmatter , {
checkboxcustomColumns : function(cellvalue, options, rowobject) {
var checked = cellvalue != 'N' ? "checked='checked' " : "";
rtn = "<input type='checkbox' onclick=\"ajaxSaveColumns('" + options.rowId + "','" + options.colModel.name + "');\" " + checked + " value='"+ cellvalue+ "' />";
return rtn;
}
});
jQuery.extend($.fn.fmatter.checkboxcustomColumns , {
unformat : function(cellvalue, options, cellobject) {
var checked = ($(cellobject).html().indexOf("checked",0) != -1 || $(cellobject).html().indexOf("CHECKED",0) != -1) ? "O" : "N";
return checked;
}
});
16:26
07/07/2010
Offline
Hi,
Thanks for the info. The "Load array data at once" example works by specifying "mydata" as the data source for the grid as part of the definition but really I need to add the data is add later - after the grid has been defined.
In my case, the way I invetigated using addDataRow or addJSONData. The addJSONData seemed faster but I couldn't make it work using named columns. My method is:
var arr= {};
arr.rows = new Array();
function InitGridTestBulkLoad() {
arr.total = 100;
arr.page = 1;
arr.records = 100;
for (var i = 0; i < 100; i++) {
arr.rows[i] = {};
arr.rows[i].id = i;
arr.rows[i].cell = [i.toString(), "col2 data", "col3 data"];
}
var mg = $("#myGrid");
mg[0].addJSONData(arr);
}
Note the assignment of "arr.rows[i].cell" - is there a way to build this structure so I can name the columns? Something like:
arr.rows[i].cell = {"id":i.toString(), "col2":"col2 data", "col3":"col3 data"};
I couldn't get that to work.
The grid is as simple as I can make it:
jQuery(document).ready(function() {
jQuery("#mygrid").jqGrid({
dataType: "clientSide",
data: {},
colNames: ['col1','col2','col3'],
colModel: [
{ name: 'col1', label: 'col1', index: 'col1', width: 100, editable: false },
{ name: 'col2', label: 'col2', index: 'col2', width: 300, editable: false },
{ name: 'col3', label: 'col3', index: 'col3', width: 100, editable: false }
],
pager: '#pagerJRAA',
rowNum: 10,
rowList: [10, 20, 500],
viewrecords: true,
//caption: 'My grid',
loadonce: true,
autowidth: true,
cellsubmit: 'clientArray',
sortname: 'col1',
sortorder: 'desc'
});
Thanks!
13:19
10/08/2009
Offline
Hi!
There are at least two errors in your code. In the code example which define jqGrid you use "#mygrid", but why you use var mg = $("#myGrid"); instead of var mg = $("#mygrid");?
Next problem: addJSONData is a method of jqGrid and not of the DOM element. So mg[0].addJSONData(arr); should be replaced to mg.addJSONData(arr);
Moreover, if you use 3.7.x version of jqGrid you can use setGridParam to change the value of 'data' parameter. You can read that this way work more quickly: /jqgridwiki/doku.php?id=wiki:options
Regards
Oleg
P.S. Look at http://stackoverflow.com/questions/3197065/jqgrid-on-clientside-paging-editing-sorting-queries/3197307#3197307 in the part UPDATED 3 for the fiexed code which use setGridParam with 'data'.
22:18
10/07/2010
Offline
Thanks OlegK for Update 3.
It worked, but to the extend that editing is not performing.
I added Edit to your example.
result:
-Submit is working
-When paging, saved data is lost.
my editing code is somethig like this (as addition to yours):
...
codpager: '#mypager',
rowNum: 10,
rowList: [10, 20, 500],
viewrecords: true,
autowidth: true,
sortname: 'AID',
sortorder: 'desc',
editurl: 'server.php' //added for editing to your code. this is dummy existing url
});
myGrid.jqGrid('navGrid','#mypager',{edit:true,add:false,del:false,search:false}); //I modified "edit:true" here.
var mydata = []; e here
...
Another interesting problem is when I ran the same page in IIS application.( using same code)
-On Submit (of edit form): error, 'Method is not allowed'
Any idea for this two problems?
Thanks,
OKL
Most Users Ever Online: 715
Currently Online:
24 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
