jqGrid > datatype : "local" > get and save (at once) all edited cells of a column ?

Question

Hi,

i have a grid with a datatype = "local". The data are an array as follows :

var mydata = [{id:1,valeur:"a_value",designation:"a_designation"}, {id:2,...}, ...];

The second column (named valeur) is the only editable column of the grid (editable:true set in colModel)

In the pager of the grid, i have 2 buttons.

• One to edit all cells (at once) of the column named valeur:

  $("#mygrid").jqGrid('navButtonAdd','#pager',{caption:"Edit values",
  onClickButton:function(){ var ids = $('#mygrid').jqGrid('getDataIDs');
  for(var i=0;i<ids.length+1;i++){ $('#mygrid').jqGrid('editRow',ids[i],true);}
  }});
  

• and another one to save (at once) all the changes of the edited cells:

  $("#mygrid").jqGrid('navButtonAdd','#pager',{caption:"Save changes",
  onClickButton:function(){var ids = $('#mygrid').jqGrid('getDataIDs');
  for(var i=0;i<ids.length+1;i++){ 
     ... ??? ...
  }}});
  

when i use :

var rd = $("#mygrid").jqGrid('getRowData',ids[i]);
alert("valeur="+rd.valeur);

for each display i get something like that:

valeur=< input class="editable" role="textbox" name="valeur" id="1_valeur" style="width: 98%;" type="text"> ...

• So, when cells are in edition mode, all rd.valeur are an input text tag !
• when they are not, i get the initials values of the cells !

How to get and save all changes of this column (all cells in edition mode)?

Answer 1

The issue is that getRowData is not intended for use while a row is in edit mode. From the jqGrid Docs:

Do not use this method when you editing the row or cell. This will return the cell content and not the actuall value of the input element

As you observed, if you attempt to use this method when a row is being edited, you will get raw HTML instead of the value. You have two options here:

• As Qualliarys suggests, you could save the data first, for example using saveRow.
• Alternatively, you can parse the input tags yourself, perhaps using jQuery to assist.

Answer 2

You try to use jqGrid with his own way. Why? Switching of all rows of jqGrid at the same time in edit mode I find not as the best way.

If you really need to make the most operation with the grid locally and send the results at the end you can try the new beta version of jqGrid. It can be probably the best way for you. See http://www.trirand.com/blog/?page_id=393/releases/jqgrid-3-7-beta/#p17463 for details.

Answer 3

$ ( document).ready(function(){
var lastsel=-1;
$("#list4").jqGrid({
  data:mydata,
  datatype: "local",
  pager: '#pager14',
  height:"100%",
  autowidth: true,
  multiselect: false,
  sortable:false,
  sortname: 'id',
  sortorder: "desc",
  colNames:['Index','Label','Value','Designation','','Name'],
  colModel:[
    {name:'id',index:'id',sorttype:"int",hidden:true},    
    {name:'label',index:'label',sorttype:"text",resizable:false,width:80},
    {name:'valeur',editable:true,resizable:false,width:85},
    {name:'designation',index:'designation',sorttype:"text",resizable:false,width:200},
    {name:'unite',sortable:false,align:'center',resizable:false,width:10},
    {name:'name',index:'name',sorttype:"text",hidden:true}
  ],  
  afterInsertRow: function(rowid){    
    $("#list4").jqGrid('setCell',rowid,'label','',{'font-weight':'bold','border-top':'0px','border-left':'0px'});
    $("#list4").jqGrid('setCell',rowid,'label','','ui-state-default');
  },
  ondblClickRow: function(id, ri, ci) {
    $('#list4').jqGrid('editRow',id,true);
  },
  onSelectRow: function(id){
    if(id && id!==lastsel){
      $('#list4').jqGrid('restoreRow',lastsel);
      lastsel=id;
    }
  },
  footerrow :false,
  pgbuttons:true,
  editurl: "client_test2.php",
  caption: "Event identity : attention il faut mettre un certificat en S_SESSION !!!"
});

var mydata = [
  {id:1,label:"Buyer",valeur:"<?php echo $_SESSION["certificats"][0]["acheteur"]?>",designation:"Nom de l'acheteur de la marchandise",unite:"",name:'acheteur'},
  {id:2,label:"Contract",valeur:"<?php echo $_SESSION["certificats"][0]["contrat"]?>",designation:"Liste des contrats établis entre les vendeurs et l'acheteur",unite:"",name:'contrat'},
  {id:3,label:"Seller",valeur:"<?php echo $_SESSION["certificats"][0]["vendeur"]?>",designation:"Nom du vendeur de la marchandise",unite:"",name:'vendeur'},
  {id:4,label:"Network",valeur:"<?php echo $_SESSION["certificats"][0]["filiere"]?>",designation:"Filière complète des vendeurs",unite:"",name:'filiere'},
  {id:5,label:"Product",valeur:"<?php echo $_SESSION["certificats"][0]["produit"]?>",designation:"Nom de la marchandise",unite:"",name:'produit'},
  {id:6,label:"Variety",valeur:"<?php echo $_SESSION["certificats"][0]["variete"]?>",designation:"Nom de la variété de la marchandise",unite:"",name:'variete'},
  {id:7,label:"Weight",valeur:"<?php echo $_SESSION["certificats"][0]["poids"]?>",designation:"Nombre de tonnes contracté",unite:"<img src=\'/img/v3/aide0.png\'title=\'Metric Ton : 1000,000 mt\'/>",name:'poids'},
  {id:8,label:"Controler",valeur:"<?php echo $_SESSION["certificats"][0]["controleur"]?>",designation:"Identitées du contrôleur",unite:"",name:'controleur'},
  {id:9,label:"Start",valeur:"<?php echo $_SESSION["certificats"][0]["debut"]?>",designation:"Date et heure de début de l'événement",unite:"<img src=\'/img/v3/aide0.png\'title=\'Datetime : 2008-02-23 08:00:00\'/>",name:'debut'},
  {id:10,label:"End",valeur:"<?php echo $_SESSION["certificats"][0]["fin"]?>",designation:"Date et heure de fin de l'événement",unite:"<img src=\'/img/v3/aide0.png\'title=\'Datetime : 2008-02-23 08:00:00\'/>",name:'fin'},
];

for(var i=0;i<=mydata.length;i++){
  $("#list4").jqGrid('addRowData',i+1,mydata[i]);
}

$("#list4").jqGrid('navGrid',"#pager14",{view:false,edit:false,add:false,del:false,search:false,refresh:false,refreshtext:''});
$("#list4").jqGrid('sortableRows');

$("#list4").jqGrid('navButtonAdd','#pager14',{
  caption:"Edit values &nbsp;",buttonicon:"ui-icon-pencil",
  onClickButton:function(){
    var ids = $('#list4').jqGrid('getDataIDs');
    for(var i=0;i<ids.length+1;i++){
      $('#list4').jqGrid('editRow',ids[i],true);
    }
  }
});


$("#list4").jqGrid('navButtonAdd','#pager14',{
  caption:"Save changes &nbsp;",buttonicon:"ui-icon-disk",
  onClickButton:function(){
    var ids = $('#list4').jqGrid('getDataIDs');
    for(var i=0;i<ids.length+1;i++){
      $('#list4').jqGrid('saveRow',ids[i],false,'mydata');
    }
  }
});

$("#list4").jqGrid('navButtonAdd','#pager14',{
  caption:"",buttonicon:"ui-icon-info",
  onClickButton:function(){

  }
});


$("#list4 tr").hover(
  function(){$(this).find("td").eq(1).removeClass('ui-state-default'); $(this).addClass("ui-state-hover");},
  function(){ if(!$(this).hasClass("ui-state-active")) $(this).find("td").eq(1).addClass('ui-state-default'); }
);

$("#list4 tr").click(
    function(){$("#list4 tr").each(function() {$(this).find("td").eq(1).addClass('ui-state-default'); });
    $(".ui-state-active").removeClass("ui-state-active");
    $(".ui-state-highlight").removeClass("ui-state-highlight");
    $(this).find("td").eq(1).removeClass('ui-state-default');
    $(this).addClass("ui-state-active");
});
});

Answer 4

So here is the way to solve my problem. I tried with any id and it's works well, the change is saved :

...
onSelectRow: function(id){
  $('#list4').jqGrid('saveRow',lastsel,false,'clientArray');
  if(id && id!==lastsel){
    $('#list4').jqGrid('restoreRow',lastsel);
    lastsel=id;
  }
  $('#list4').jqGrid('editRow',id,false);
},
...

url (fourth param) : if defined, this parameter replaces the editurl parameter from the options array. If set to 'clientArray', the data is not posted to the server but rather is saved only to the grid (presumably for later manual saving). ref : http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#saverow

In fact i tried this way but i wrote 'mydata' instead of 'clientArray'...

So thank you so much Oleg and Justin, we got it !