JqGrid, getRowData and Cells in Edit Mode

Today I was fighting with a very specific problem.  I was working with jqGrid’s getRowData method.  I was implementing batch save feature, where a user can edit some data in the grid, then hit Save button to send the data to the server.  I set up a column (SortOrder) to be always editable to be more user friendly.  Here is what the column definition looks like for that column:

{ name: 'SortOrder', width: 100, index: 'SortOrder', align: 'left', search: false,

editable: true, formattype: 'integer', formatoptions: { disabled: false } },

Now, in my button click, I am calling getRowData, but instead of actual sort order value in the column, I get the html that defines the input field for SortOrder column.  There is no way around this, according to my research, so I had to manually parse the data out of the input field’s html.  Here is how I did that:

getGridData: function () { 
  var gridData = $('#myGrid').jqGrid('getRowData');    
  for (var i = 0; i < gridData.length; i++) {     
    $('#myGrid').jqGrid('saveRow', gridData[i]['id'], false, 'clientArray');    
  }    
  gridData = $('#myGrid').jqGrid('getRowData');    
  var pattern = /(id=".+_SortOrder")/ig;    
  for (var j = 0; j < gridData.length; j++) { 
     var sortOrder = gridData[j]['SortOrder'];     
     if (sortOrder.toLowerCase().indexOf('<input') >= 0) { 
         var matched = sortOrder.match(pattern)[0];         
         var numberOfInput = matched.toUpperCase().replace("ID="", "").replace("_SORTORDER"", "");         
         sortOrder = $('#' + numberOfInput + '_SortOrder').val();     
     }     
     gridData[j] = {         
       Name: gridData[j]['Name'],         
       SortOrder: sortOrder     
     };    
  }    
  return gridData; 
}, 

Let’s walk through code.  First of all, I am calling saveRow for each row in the grid to save data to memory.  Then I am running through all the rows again, looking at my SortOrder column.  The other column, Name, is read-only.  I am using regular expressions to find HTML  Once this is found, I am parsing out input id.  The reason for that is because if you have more then one row in the grid, any row can have this input control, and it’s id corresponds to the row’s index in the grid.  Once this is done, I am getting the actual value by calling val() function.  Lastly, I am updating the value in the row.  Once this is done, I can use ajax function of jQuery to send the data to the server.  I use JSON.stringify(getGridData()) and then parse it back out on the server side in my controller’s method responsible for saving this data.

That’s all there is to it.

Thanks.

3 Comments

  1. Pingback: More on jqGrid and getRowData function in edit mode « Sergey Barskiy's Blog

Leave a Reply to Srinath Cancel reply

Your email address will not be published. Required fields are marked *