jQuery Grid Plugin - jqGrid - Topic: Edit multiple rows, submit as batch?

nalpolos on Edit multiple rows, submit as batch?

Thu, 09 Sep 2010 10:05:00 +0300

xgote said:

I'll post the final solution when I get it so others can use it too.

Hi, it would be very kind if you could post your final solution. It would surely help many users.

Thanks

dannyflores on Edit multiple rows, submit as batch?

Mon, 03 May 2010 18:30:29 +0300

I have a similar requirement for my use of the jqGrid. So far I've been able to achieve what I needed by wrapping my batch-edit code around their cell-edit plugin. At the end of editing a particular grid, the changes can be retrieved using the getChangedCells() method.

My question is, however, are there any built-in jqGrid methods for posting an array of changed cell/row data to the server? I realize I can accomplish this with multiple calls to saveRow, but for large batches of changed data, the amount of overhead caused by repeatedly making round-trips to the server would be just too much.

Anyone know a solution to this problem?

sternr on Edit multiple rows, submit as batch?

Thu, 25 Feb 2010 18:45:11 +0200

Hey,

Did you make any progress?

Thanks,

--sternr

xgote on Edit multiple rows, submit as batch?

Thu, 11 Feb 2010 05:32:51 +0200

xgote said:

So I can get the grid to update from a select input but it changes back after a row is selected. Why is that?

I was calling .jqGrid('restoreRow') during a "onSelectRow". Works! In any case, using dataEvents in the column model, passing the index of the row and getting the value from the input using jQuery('#' + [last selected row] + '_' + [name of the cell]).val(), and populating a hash of changed data, it is easy to write the case that I described above.

I'll post the final solution when I get it so others can use it too.

xgote on Edit multiple rows, submit as batch?

Thu, 11 Feb 2010 05:24:55 +0200

var lastsel; jQuery("#list4").jqGrid({ datatype: "local", height: 250, colNames: ['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], colModel: [ {name:'id',index:'id', width:60, sorttype:"int"}, {name:'invdate',index:'invdate', width:90, sorttype:"date"}, {name:'name',index:'name', width:200, editable:true, edittype: "select", editoptions: { value: testvalue(),dataEvents: [ { type: 'change', data: { cell: 'name' }, fn: test } ] }, editrules: { required: true } }, {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"}, {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"}, {name:'total',index:'total', width:80,align:"right",sorttype:"float"}, {name:'note',index:'note', width:150, sortable:false} ], onSelectRow: function(id){ if(id && id !== lastsel) { jQuery('#list4').jqGrid('restoreRow',lastsel); jQuery('#list4').jqGrid('editRow',id,true); lastsel = id; } }, multiselect: true, caption: "Manipulating Array Data" }); function test(e) { console.log(e.data['cell']); var inputValue = jQuery('#' + lastsel + '_' + e.data['cell']).val(); // form input value mydata[lastsel-1]['name'] = inputValue; jQuery("#list4").setRowData(lastsel, {name: 'changed!'}); jQuery("#list4").setCell(lastsel, e.data['cell'], 'changed!'); } function testvalue() { return "1:one;2:two;3:three;4:four!!!"; } var mydata = [ {id:"123",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"} ]; for(var i=0;i<=mydata.length;i++) { jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]); } });

I'm attempting to write something that will submit changed rows in batch. So far I have a select input that will fire an event after it's changed, then attempt to update the grid . The first part of this idea seems to work. After selecting a "name" from the select element, after clickout out of the row, that cells value is updated in display.. clicking on another row however, reverts the displayed row.

So I can get the grid to update from a select input but it changes back after a row is selected. Why is that?

xgote on Edit multiple rows, submit as batch?

Wed, 10 Feb 2010 05:09:56 +0200

Is it possible to do the following:

Edit a row
Maintain update the display with the edited version, without saving the record / re-rendering grid
Change the rows class designating it "edited"
Bind a method to a button in a toolbar to update all edited rows in one batch (so you could write interfaces to true transactional backends).

I suppose this has been asked about before but I couldn't find anything from a simple search. Can this be done without writing a bunch of custom methods that arbitrarily store a subset of changes?