jqgrid inline saving with clientArray throws error

Question

I am new to jqGrid and have created a simple grid with local data with editurl set to clientArray. I am using inline navigation. I can edit a row and when I press the save button, the rows gets update. So far so good.

When I press on add row button, a new empty is row is inserted. When I type in there some data and click on the save button, I get the error message:

Uncaught TypeError: Cannot read property 'extraparam' of undefined jquery.jqGrid.min.js:398

The documentation only tells how the saveRow method should be called. But, apparently the inline navigator is calling it automatically. Which is perfect. But I guess I still need to set some parameters correctly so that it does not throw the error and saves the newly added row.

Hope some jqGrid guru has a good tip. Thanks.

function createTable(data,colNames,colModel,caption ){
...

$(table).jqGrid({   data:data,
                        datatype: "local", 
                        height: 'auto', 
                        colNames:colNames,
                        pager:'#'+pagerid,
                        colModel:colModel, 
                        viewrecords: true, 
                        caption:caption,
                        editurl:'clientArray',
                        });


   var nav = $(table).jqGrid('navGrid','#'+pagerid,{edit:false,add:false,del:false});
   $(table).jqGrid('inlineNav','#'+pagerid);
   $(table).jqGrid('gridResize',{minWidth:350,maxWidth:800,minHeight:80, maxHeight:350});
   $('#gbox_'+tableid).draggable();  
}

could you post which version of jqGrid you use? You need repeat the test using `jquery.jqGrid.src.js` instead of minimized version `jquery.jqGrid.min.js`. The line number in `jquery.jqGrid.src.js` can be helpful, bun not in `jquery.jqGrid.min.js`. Moreover, it would be helpful if you post parameters if `createTable` which you use to reproduce the problem. You should understand that `colModel:colModel` `data:data` is almost the same as posting the code `myProgram()`. Such "code" hold no information. — Oleg, Apr 19 '13 at 05:04
Hi Oleg, Thanks for the quick response. I will repeat the test with jquery.jqGrid.src.js as you have suggested and let you know the outcome. In the meantime, I have figured out that changing $(table).jqGrid('inlineNav','#'+pagerid); to $(table).jqGrid('inlineNav','#'+pagerid, {edit:true,add:true,editParams:{key:true},addParams:{addRowParams:{key:true}}}); works for me. Saving works even with editParams:{} and addRowParams:{}, but then of course only with the button and not by key. I wonder why it is important to pass an empty object. — user2297539, Apr 19 '13 at 05:35
@Oleg: console.log(JSON.stringify(data)) gives [{"P0":"row 0 cell 0","P1":"row 0 cell 1","P2":"row 0 cell 2"},{"P0":"row 1 cell 0","P1":"row 1 cell 1","P2":"row 1 cell 2"},{"P0":"row 2 cell 0","P1":"row 2 cell 1","P2":"row 2 cell 2"}] console.log(colNames) gives ["P0", "P1", "P2"] console.log(JSON.stringify(colModel)) gives [{"name":"P0","index":"P0","width":150,"editable":true},{"name":"P1","index":"P1","width":150,"editable":true},{"name":"P2","index":"P2","width":150,"editable":true}] caption is 'a table title' I have tested it with jquery.jqgrid.src.js. I get the same error (l. 9530). — user2297539, Apr 19 '13 at 06:14
See my answer. Small additional remark about the code which you posted in the previous comment: there are no `key: true` inline editing option. There are only `keys: true` option. So you should use `...editParams:{keys:true},addParams:{addRowParams:{keys:true}}}` instead of `...editParams:{key:true},addParams:{addRowParams:{key:true}}}` — Oleg, Apr 19 '13 at 07:14
Actually, I use an object myEditParam = {keys: true,..}. When I pasted the code I made a typo and wrote key instead of keys. In any case, many thanks for spotting this. — user2297539, Apr 19 '13 at 15:41

Oleg · Accepted Answer · 2013-04-19T07:44:57.270

You are right, It's a bug in inlineNav method. The lines

if(!o.addParams.addRowParams.extraparam) {
    o.addParams.addRowParams.extraparam = {};
}

uses o.addParams.addRowParams.extraparam, but default value of parameter of addParams (see here) defined as addParams : {} and not as addParams : {addRowParams: {}}. So the expression o.addParams.addRowParams is equal undefined and o.addParams.addRowParams.extraparam is the same as undefined.extraparam which produce null reference exception.

I posted the corresponding bug report to trirand and the problem will be fixed in the next version of jqGrid.

As a workaround you can replace the line

$(table).jqGrid('inlineNav','#'+pagerid);

with the line

$(table).jqGrid('inlineNav','#'+pagerid, {addParams: {addRowParams: {}}});

Some common additional remarks to your code:

I strictly recommend that you always use gridview: true option which will improve performance of your code without any disadvantages
I recommend you to use autoencode: true option per default. Per default jqGrid interpret input data of the grid as HTML fragments which must be well formatted. So if you would try to display the data like a < b you can have problems because < is special character in HTML. If you would use autoencode: true option the input data will be interpreted as text instead of HTML fragments.
I recommend you remove index property from your model if you assign always the same value for index and name properties.
I recommend you to provide id property with unique values for every item of the input data. You should understand that jqGrid always assign id attribute for every row of grid. The value must be unique over all HTML elements on the page. If you get the data from the server and the data have native unique id from the database it's recommended to use the value as the value of id property. If you don't specify any id property jqGrid assign values 1, 2, 3, ... as the id values of rows (rowids). If you use more as one jqGrids on the page and don't provide unique id values you will have id duplicates which is HTML error.
I recommend you to use idPrefix option of jqGrid. If you have two grids on the page and you don't fill (and don't need) any id for data items then you have have id duplicates (id="1", id="2" etc in both grids). If you would define idPrefix: "g1_" for one grid and idPrefix: "g2_" option for another grid then the rowids of the first grid will be id="g1_1", id="g1_2" etc in the first grid and id="g2_1", id="g2_2" in the second grid. Even if you fill the id from the server then you provide unique id inside one table, but the ids from two tables of database can have the same id. So the usage of different idPrefix option for every grid will solve the problem of id duplicates in very simple way.

Yeah, I was assuming a mini bug similar to that after seeing that passing an empty object and not passing it at all makes the difference. Thanks for the additional recommendations as well. I will keep them in mind when working with jqgrid. Schoene Gruesse aus Kalifornien. — user2297539, Apr 19 '13 at 15:46

score 0 · Answer 2 · answered May 10 '13 at 18:19

I'm having this same issue but my jqgrid markup is completely different (maybe newer version?)

I can use inline to edit and save a row, but adding a row will not save. I am not sure what the issue is.

<?php
ini_set("display_errors","1");
require_once 'jq-config.php';
// include the jqGrid Class
require_once ABSPATH."php/jqAutocomplete.php";
require_once ABSPATH."php/jqCalendar.php";
require_once ABSPATH."php/jqGrid.php";
// include the driver class
require_once ABSPATH."php/jqGridPdo.php";
// Connection to the server
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
// Tell the db that we use utf-8
$conn->query("SET NAMES utf8");
// Create the jqGrid instance
$grid = new jqGridRender($conn);
// Write the SQL Query
$grid->SelectCommand = 'SELECT Serial, Type, Customer, Date, Notes FROM rmas';

$resize = <<<RESIZE
jQuery(window).resize(function(){
    gridId = "grid";

    gridParentWidth = $('#gbox_' + gridId).parent().width();
    $('#' + gridId).jqGrid('setGridWidth',gridParentWidth);
})
RESIZE;
$grid->setJSCode( $resize);

// set the ouput format to json
$grid->dataType = 'json';
$grid->table ="rmas";
$grid->setPrimaryKeyId("Serial");
// Let the grid create the model
$grid->setColModel();
// Set the url from where we obtain the data
$grid->setUrl('rmaform.php');
$grid->cacheCount = true;
//$grid->toolbarfilter = true;
$grid->setGridOptions(array(
    "caption"=>"RMAs",
    "rowNum"=>50,
    "sortname"=>"Serial",
    "hoverrows"=>true,
    "rowList"=>array(50,100,200),
    "height"=>600,
    "autowidth"=>true,
    "shrinkToFit"=>false
));


$grid->callGridMethod('#grid', 'bindKeys');
// Change some property of the field(s)
$grid->setColProperty("Serial", array("align"=>"center","width"=>40));
$grid->setColProperty("Type", array("align"=>"center","width"=>40));
$grid->setColProperty("Customer", array("align"=>"center","width"=>65));
$grid->setColProperty("Date", array("align"=>"center","width"=>40));
$grid->setColProperty("Notes", array("align"=>"left","width"=>500));
// navigator first should be enabled
$grid->navigator = true;
$grid->setNavOptions('navigator', array("add"=>false,"edit"=>false,"excel"=>true));
// and just enable the inline
$grid->inlineNav = true;
$buttonoptions = array("#pager", array(
        "caption"=>"Enable Cells", 
        "onClickButton"=>"js:function(){ jQuery('#grid').jqGrid('setGridParam',{cellEdit: true});}", "title"=> "Enable Excel like editing"
   )
);
$grid->callGridMethod("#grid", "navButtonAdd", $buttonoptions);
$buttonoptions = array("#pager", array(
        "caption"=>"Disable Cells", 
        "onClickButton"=>"js:function(){ jQuery('#grid').jqGrid('setGridParam',{cellEdit: false});}" , "title"=> "Disable Excel like editing"
   )
);
$grid->callGridMethod("#grid", "navButtonAdd", $buttonoptions);
$grid->renderGrid('#grid','#pager',true, null, null, true,true);
$conn = null;
?>

jqgrid inline saving with clientArray throws error

2 Answers2