jQuery Grid Plugin - jqGridForum

Topic RSS

Edit multiple rows, submit as batch?

10/02/2010
05:09

xgote

Member

Members

Forum Posts: 13

Member Since:
09/02/2010

Offline

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?

11/02/2010
05:24

xgote

Member

Members

Forum Posts: 13

Member Since:
09/02/2010

Offline

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?

11/02/2010
05:32

xgote

Member

Members

Forum Posts: 13

Member Since:
09/02/2010

Offline

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.

25/02/2010
18:45

sternr

Member

Members

Forum Posts: 7

Member Since:
25/02/2010

Offline

Hey,

Did you make any progress?

Thanks,

--sternr

03/05/2010
18:30

dannyflores

Weston, FL

New Member

Members

Forum Posts: 1

Member Since:
03/05/2010

Offline

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?

09/09/2010
10:05

nalpolos

Member

Members

Forum Posts: 6

Member Since:
08/09/2010

Offline

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

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
95 Guest(s)

Currently Browsing this Page:
1 Guest(s)