Cell Editing

jqGrid cell edit is one large bug. Never use it. It is absolutely unfriednly to addRowData and delRowData methods. Cells just become unselectable…

I want to process new data on the server and hand back something slightly different, e.g. expanding abbreviation: 'django has an orm' becomes 'django has an object request manager'.

I tried adding a js function as afterSubmitCell where I check the return status from the server, but it only partly works. jqGrid.restoreCell works fine if there is a server failure, but calling jqGrid.setCell from inside afterSubmitCell apparently leads to some kind of recursion bug. I either get an explicit recursion error or a notification that 's' is undefined on line 206.

Any suggestions?

I have read all the documentation regarding jqGrid cell editing and I've yet to see an example making use of the cell events afterEditCell, beforeSaveCell, beforeSubmitCell. I'm using a treegrid with the adjacency model and in setting up the grid seem to be controlling what rows and cell I actually want to make editable. I have yet to figure out or stumble on an example using the above grid options that works. In my case, I change the cell data and hit enter and get error: e is undefined. I would guess e is the event but I'm not sure where this is falling apart. Any help you can provide is appreciated. Thanks

<cfimport prefix=“dcs” taglib=”../../tags”>

<table id=“section_174_exp_treegrid” class=“scroll”><tbody><tr><td></td></tr></tbody></table> <div id=“section_174_exp_treegrid_pager”></div> <br>

<script type=“text/javascript”>

  var qr_expense;
  function delete174Expense(id) {
      $("#section_174_exp_treegrid").jqGrid('setSelection',id);
      var local_acct = id;
      var subtdc_acct = $("#section_174_exp_treegrid").getCell(id, 'parent');
      alert('delete174Expense ' + id);
      $.ajax({
    	    type: 'POST',
    	        url: "<dcs:docroot/>services/qre_expense.cfc?method=deleteSection174Expense",
    	        async: false,
    	        data: {
    	            leid      : $("#leid").val(),
    	            cdrno     : $("#cdrno").val(),
    	            tax_year  : $("#tax_year").val(),
    	            bsla_code : $("#bsla_code").val(),
    	            reporting_period : $("#reporting_period").val(),
    	            filing_group : $("#filing_group").val(),
    	            scenario : $("#scenario").val(),
    	            subtdc_acct : subtdc_acct,
    	            local_acct : local_acct,
    	            user_id : "TEST"
    	        },
    	        success: function(data, textStatus, xhr) {
    	            //if (GIT.SSO.isExpired(xhr)) return;
    	            DCS.growl.ok(data);
   	        },
    	        error: function(data, textStatus, xhr) {
    	            DCS.growl.error(data.responseText);
    	        },
    	        dataType: 'text'
    	});
      //$("#section_174_exp_treegrid").trigger("reloadGrid");
  }
  
  function save174Expense(id) {
      $("#section_174_exp_treegrid").jqGrid('setSelection',id);
      var record = $("#section_174_exp_treegrid").jqGrid('getInd',id,true);
      //var record = $("#section_174_exp_treegrid").jqGrid('getRowData',id);
      alert('this record: ' + record.id);
      var node = $("#section_174_exp_treegrid").jqGrid('getNodeParent',record);
      alert('node parent: ' + node.id);
      var local_acct = id;
      var subtdc_acct = $("#section_174_exp_treegrid").getCell(id, 'parent');
  	//alert('after save174Expense - ' + id + '   subgrid_id - ' + subgrid_id);
  	var amount = document.getElementById(id+'_s174_amt').value;
      $.ajax({
    	    type: 'POST',
    	        url: "<dcs:docroot/>services/qre_expense.cfc?method=saveSection174Expense",
    	        async: false,
    	        data: {
    	            leid      : $("#leid").val(),
    	            cdrno     : $("#cdrno").val(),
    	            tax_year  : $("#tax_year").val(),
    	            bsla_code : $("#bsla_code").val(),
    	            reporting_period : $("#reporting_period").val(),
    	            scenario : $("#scenario").val(),
    	            subtdc_acct : subtdc_acct,
    	            local_acct : local_acct,
    	            amount : amount,
    	            user_id : "TEST"
    	        },
    	        success: function(data, textStatus, xhr) {
    	            //if (GIT.SSO.isExpired(xhr)) return;
    	            $("#section_174_exp_treegrid").jqGrid('delTreeNode',node);
    	            $("#section_174_exp_treegrid").jqGrid('expandNode',node);
    	            DCS.growl.ok(data);
   	        },
    	        error: function(data, textStatus, xhr) {
    	            DCS.growl.error(data.responseText);
    	        },
    	        dataType: 'text'
    	});		  					  
	//$("#section_174_exp_treegrid").trigger("reloadGrid");
  }
      
  function myfunction(elem) {
  	return false;
  	//alert('myfunction');
      //$(elem).afterEditCell : function(rowid, cellname, value, irow, icol){
      //                            alert('aftercelledit: ' + cellname);
      //                        } 
      }

     var MAX_DUMP_DEPTH = 10;
    
     function dumpObj(obj, name, indent, depth) {
            if (depth > MAX_DUMP_DEPTH) {
                   return indent + name + ": <Maximum Depth Reached>\n";
            }
            if (typeof obj == "object") {
                   var child = null;
                   var output = indent + name + "\n";
                   indent += "\t";
                   for (var item in obj)
                   {
                         try {
                                child = obj[item];
                         } catch (e) {
                                child = "<Unable to Evaluate>";
                         }
                         if (typeof child == "object") {
                                output += dumpObj(child, item, indent, depth + 1);
                         } else {
                                output += indent + item + ": " + child + "\n";
                         }
                   }
                   return output;
            } else {
                   return obj;
            }
     }

    var lastsel = -1;
    $(document).ready(function() {    	 	    	        
      var lastinstancesel;
      var cnt = 0;        
      
      $("#section_174_exp_treegrid").jqGrid({
   		postData: get174ExpenseFilter(),
          url: "<dcs:docroot/>cfcs/grid/Section_174.cfc?method=get174ExpenseTree&pagesize=25&returnFormat=plain",
          treeGrid: true,
          treeGridModel: 'adjacency',
          ExpandColumn: 'id',
          ExpandColClick: true,            
          sortname: 'id',
          sortorder: 'asc',
          datatype: "json",
          mtype: "GET",
          colNames: ['Account',
                     'Description',
                     'Book Amount',
                     '174 Expense',
                     'Perm Adj',
                     'Temp Adj',
                     'Tax Amount',
                     'Level',
                     'Parent',
                     'Is Leaf',
                     'Expanded',
                     'Actions'],
          colModel:[
              {name:'id', index:'id', width:80, editable:false, key:true},
              {name:'descrip', index:'descrip', width:72, editable:false},
              {name:'book_amt', index:'book_amt',  width:44, align:"right", editable:false, formatter:'currency', formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 0, prefix: "$ "}},
              {name:'s174_amt', index:'s174_amt',  width:44, align:"right", editable:true, edittype:'text'},
              	// formatter:'currency', formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 0, prefix: "$ "}},
              {name:'perm_adj', index:'perm_adj',  width:44, align:"right", editable:false, formatter:'currency', formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 0, prefix: "$ "}},
              {name:'temp_adj', index:'temp_adj',  width:44, align:"right", editable:false, formatter:'currency', formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 0, prefix: "$ "}},
              {name:'tax_amt', index:'tax_amt',  width:50, align:"right", editable:false, formatter:'currency', formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 0, prefix: "$ "}},
              {name:'level', index:'level', hidden:true, editable:false},
              {name:'parent', index:'parent', hidden:true, editable:false},
              {name:'isleaf', index:'isleaf', hidden:true, editable:false},
              {name:'expanded', index:'expanded', hidden:true, editable:false},
              {name:'act',index:'act', width:28, editable:false, sortable:false}
          ],
          pager: "#section_174_exp_treegrid_pager",
          height: "auto",
          //celledit: true, 	 
          //cellsubmit: "remote",
          //cellurl: "<dcs:docroot/>services/qre_expense.cfc?method=saveSection174Expense",
          beforeSubmitCell : function(rowid,cellname,value,iRow,iCol) { 
              alert('beforeSubmitCell: ' + cellname);
          },
          caption: 'Section 174 Expenses',
          gridComplete: function(){ 
            var ids = $("#section_174_exp_treegrid").jqGrid('getDataIDs');
	      for(var i=0;i < ids.length;i++){
                var cl = ids[i];	
                var ret = $("#section_174_exp_treegrid").getRowData(cl);  
                if (ret.level == 3) {
                  var delfunc = "delete174Expense(\"" + cl + "\")";
                  var savefunc = "save174Expense(\"" + cl + "\")";
                  tbl = "<table><tr>";
                  dr = "<td><span title='Delete Section 174 Expense' class='ui-icon ui-icon-trash' onclick='" + delfunc + "'>&nbsp;</span></td>";
                  //sr = "<td><span title='Save Section 174 Expense' class='ui-icon ui-icon-disk' onclick='" + savefunc + "'>&nbsp;</span></td>";
                  //tbl = tbl + dr + sr + "</tr></table>";
                  tbl = tbl + dr  + "</tr></table>";
                  $("#section_174_exp_treegrid").editRow(cl, true);
                  $("#section_174_exp_treegrid").jqGrid('setRowData',cl,{'act':tbl});
          	  } 
	      } 
		  $("#section_174_exp_treegrid").setGridWidth(945,true);
          }             
      });        

      function get174ExpenseFilter() {
          var filter = {
             leid: $("#leid").val(),
             cdr_no: $("#cdrno").val(),
             tax_year: $("#tax_year").val(),
             bsla_code: $("#bsla_code").val(),
             reporting_period: $("#reporting_period").val(),
             scenario: $("#scenario").val(),
             nodeid: '',
             parentid: '',
             n_level: 0               
          };

          return filter;
      }
                   
});   

</script>

Very subtle but important comment regarding cell editing (poached from stackoverflow [http://stackoverflow.com/questions/5311786/jqgrid-change-cell-input-to-readonly-after-grid-loaded]). This is crucial when using grid as a subgrid.

If you use cell editing jqGrid examine cells for the 'not-editable-cell' class. If you use inline editing the jqGrid rows for the 'not-editable-row', but in the inline editing mode the 'not-editable-cell' class will be ignored.

I found it useful to select automatically the contents if the input box when selecting the inline cell edit. i put this in the Grid Options:

  
 afterEditCell:function (rowid, cellname, value, iRow, iCol){
   document.getElementById(iRow+'_'+cellname).select();
   
    } 

I realizand the jqGrid with cellEdit., But when you change some data in jqGrid need not only send the information change to the controller if no additional data … as I can. thanks