Question

I am using the Basic Grid example from jqGrid Demos:

jQuery("#rowed1").jqGrid(
        {
            url : 'clientArray',
            datatype : "local",
            colNames : [ 'Inv No', 'Date', 'Client', 'Amount', 'Tax',
                    'Total', 'Notes' ],
            colModel : [ {
                name : 'id',
                index : 'id',
                width : 55,
                editable : true,
                key: true
            }, {
                name : 'invdate',
                index : 'invdate',
                width : 90,
                editable : true
            }, {
                name : 'name',
                index : 'name',
                width : 100,
                editable : true
            }, {
                name : 'amount',
                index : 'amount',
                width : 80,
                align : "right",
                editable : true
            }, {
                name : 'tax',
                index : 'tax',
                width : 80,
                align : "right",
                editable : true
            }, {
                name : 'total',
                index : 'total',
                width : 80,
                align : "right",
                editable : true
            }, {
                name : 'note',
                index : 'note',
                width : 150,
                sortable : false,
                editable : true
            } ],
            rowNum : 10,
            rowList : [ 10, 20, 30 ],
            pager : '#prowed1',
            sortname : 'id',
            viewrecords : true,
            sortorder : "desc",
            editurl : "clientArray",
            caption : "Basic Example"
        });
jQuery("#rowed1").jqGrid('navGrid', "#prowed1", {
    edit : false,
    add : false,
    del : false
});

The following events to handle the user clicks on edit, save, and cancel buttons:

jQuery("#ed1").click(function() {
    var id = jQuery('#rowed1').jqGrid('getGridParam','selrow');
    jQuery("#rowed1").jqGrid('editRow', id);
    this.disabled = 'true';
    jQuery("#sved1,#cned1").attr("disabled", false);
});
jQuery("#sved1").click(function() {

    var rowid = jQuery('#rowed1').jqGrid('getGridParam','selrow');
    alert('id: ' + rowid);
    jQuery("#rowed1").jqGrid('saveRow', rowid , false );
    jQuery("#sved1,#cned1").attr("disabled", true);
    jQuery("#ed1").attr("disabled", false);
    jQuery("#aded1").attr("disabled", false);
    
});
jQuery("#cned1").click(function() {
    var id = jQuery('#rowed1').jqGrid('getGridParam','selrow');
    jQuery("#rowed1").jqGrid('restoreRow', id);
    jQuery("#sved1,#cned1").attr("disabled", true);
    jQuery("#ed1").attr("disabled", false);
    jQuery("#aded1").attr("disabled", false);
});

jQuery("#aded1").click(function() {
    jQuery("#rowed1").jqGrid('addRow',  'new');
    this.disabled = 'true';
    jQuery("#sved1,#cned1").attr("disabled", false);
});

And the html of the buttons:

 <input type="BUTTON" id="aded1"  value="Add Row" />
 <input type="BUTTON" id="ed1" value="Edit row 3" /> 
 <input type="BUTTON" id="sved1" disabled='true' value="Save row 3" /> 
 <input type="BUTTON" id="cned1" disabled='true' value="Cancel Save" />

But the grid is not working properly because:

• After saving a new row it keeps selected and I can’t select others.
• When I cancel the editing of a row, it deletes a few other rows.
• When I click for second time
  the add new row button, google chrome debugger console displays the error: Uncaught TypeError: Cannot read property ‘name’ of undefined

I am almost sure that it has something to do with the new row id, but after 2 days of trying I would appreciate a little help, thanks in advance

Answer 1

You are passing the wrong parameters to addRow. From the jqGrid documentation for addRow:

Calling convention:

jQuery("#grid_id").jqGrid('addRow',parameters);

where parameters is a object and has the following default values:

parameters =
{
  rowID : "new_row",
  initdata : {},
  position :"first",
  useDefValues : false,
  useFormatter : false,
  addRowParams : {extraparam:{}}
}

Also, you will want to set rowID equal to a new value each time. You can either do this explicitly or you can set it to undefined to let jqGrid assign a random ID to each new row.

---

For example:

jQuery("#aded1").click(function() { 
    var parameters = { 
          rowid : undefined, 
          initdata : {}, 
          position :"first", 
          useDefValues : false, 
          useFormatter : false, 
          addRowParams : {extraparam:{}} 
    };

    jQuery("#rowed1").jqGrid('addRow', parameters); 
});