How to do inline edit with JqGrid subgrids?

Question

I know how to do the inline edit with the main grid but is there a way to do it for the sub grids?

Here is my JS file:

$(function(){
    var lastsel;
$("#list").jqGrid({
url:'example.php',
postData:{q:1},
datatype: 'json',
mtype: 'GET',
colNames:['Anchor','Description','Email','Url','In Today','Out Today','In Total','Out Total','Credits','Ratio','Status'],
colModel :[
    {name : 'anchor' , index : 'anchor', width : 55, 'editable':true, 'editoptions':{'size':30}},
    {'name' : 'description' , 'index' : 'description', 'width' : 55, 'editable':true, 'edittype':'textarea', 'editoptions':{'rows':'3','cols':'30'}},
    {'name' : 'email' , 'index' : 'email', 'width' : 55, 'editable':true, 'editoptions':{'size':30}},
    {'name' : 'url' , 'index' : 'url', 'width' : 55, 'editable':true, 'editoptions':{'size':30}},
    {'name' : 'in_today' , 'index' : 'in_today', 'width' : 55, 'align' : 'right'},
    {'name' : 'out_today' , 'index' : 'out_today', 'width' : 55, 'align' : 'right'},
    {'name' : 'in_total' , 'index' : 'in_total', 'width' : 55, 'align' : 'right'},
    {'name' : 'out_total' , 'index' : 'out_total', 'width' : 55, 'align' : 'right'},
    {'name' : 'credits' , 'index' : 'credits', 'width' : 55, 'align' : 'right', 'editable':true, 'editoptions':{'size':30}},
    {'name' : 'ratio' , 'index' : 'ratio', 'width' : 55, 'align' : 'right', 'editable':true, 'editoptions':{'size':30}},
    {'name' : 'status' , 'index' : 'status', 'width' : 55,'align' : 'center', 'editable':true, 'edittype':'checkbox', 'editoptions':{'value':"On:Off"}}
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'anchor',
sortorder: 'desc',
viewrecords: true,
caption: 'My first grid',
subGrid: true,
subGridUrl: 'example.php?q=2',
subGridModel: [{ name  : ['Game','URL'],width : [200,300] }],
onSelectRow: function(id){
    if(id && id!=lastsel){
        jQuery('#list').jqGrid('restoreRow',lastsel);
        jQuery('#list').jqGrid('editRow',id, true, '', '', '', {'q':3,'oper':'trades-edit'});
        lastsel=id;
    }
},
editurl: "example.php"

});
});

Answer 1

You can use grid the subgrid as grid option as detailed on the jqgrid wiki here:

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:subgrid_as_grid

I've used this on a current project and it works well. The advantage is you can use any grid feature because the subgrid is just another grid. So you don't need any of the subGrid style options. Instead you'd have something like:

    subGrid: true,
    subGridRowExpanded: function(subgrid_id, row_id) {
    // we pass two parameters
    // subgrid_id is a id of the div tag created within a table
    // the row_id is the id of the row
    // If we want to pass additional parameters to the url we can use
    // the method getRowData(row_id) - which returns associative array in type name-value
    // here we can easy construct the following
       var subgrid_table_id;
       subgrid_table_id = subgrid_id+"_t";
       jQuery("#"+subgrid_table_id).jqGrid({
          url:"subgrid.php?q=2&id="+row_id,
          datatype: "json",
          colNames: ['Game','Url'],
          colModel: [
            {name:"game",index:"num",width:80,key:true},
            {name:"url",index:"item",width:130},
          ],
          height: 100%,
          rowNum:20,
          sortname: 'num',
          sortorder: "asc"
       });
   }
  }); 

Answer 2

Ed Gibbs is on the right track above. True, when you create the grid as a subgrid you have access to all the options you would on a regular grid. It is critical that you have these two options defined in your subgrid. Omitting these options will not allow you to perform inline editing.

  subGridRowExpanded: function(subgrid_id, row_id) {
      ...
      cellEdit: true,
      cellsubmit: 'clientarray'
      ...
      ..
   });