How to do inline editing with JqGrid subgrids?

Question

I know how to do inline editing using the main grid, but is there a way to do this for auxiliary 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 the grid as a grid option, as described in the jqgrid wiki:

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

I used this in the current project and it works well. The advantage is that you can use any function of the grid, because subsega is just another grid. Therefore, you do not need any subGrid style options. Instead, you will 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

. , , , . , , . .

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