Unexpected behavior in jqGrid when trying to setRowData

Question

I am working on a task where I need to update entire row data in jqgrid.

Here is a sample fiddler: https://jsfiddle.net/99x50s2s/47/

In the above fiddler, please update a row and then try to scroll to the right.

Code:

var $thisGrid = jQuery("#sg1");
$thisGrid.jqGrid({
    datatype: "local",
    gridview: true,
    loadonce: true,
    shrinkToFit: false,
    autoencode: true,
    height: 'auto',
    width: 400,
    viewrecords: true,
    sortorder: "desc",
    scrollrows: true,
    loadui: 'disable',
    colNames:["", 'Inv No', 'Client', 'Amount','Tax','Total','Notes'],
    colModel:[
        {
            name: "Symbol", index: "Symbol", width: 70, align: 'center', frozen: true,
                formatter: function (cellValue, options, rowObject) {
                    return '<button class="btn btn-info btn-xs update" type="button" title="Update" >' +
                            '<span class="glyphicon glyphicon-remove-circle"></span> Update</button>';
                }
            },
        {name:'id',width:60, sorttype:"int"},   
        {name:'name', width:100},
        {name:'amount', width:80, align:"right",sorttype:"float"},
        {name:'tax', width:80, align:"right",sorttype:"float"},     
        {name:'total', width:80,align:"right",sorttype:"float"},        
        {name:'note', width:150}        
    ],
    caption: "Test Data",
        onCellSelect: function (rowid,
        iCol,
        cellcontent,
        e) {
            if (iCol == 0) {
                var newdata = [
                {id:"1",name:"new test1 name for testing purpose",note:"new note1",amount:"500.00",tax:"50.00",total:"510.00"},    
                ];
                $thisGrid.jqGrid('setRowData', rowid, newdata[0]);
            }               
        }
}).jqGrid('setFrozenColumns');

var mydata = [
    {id:"1",name:"test1",note:"note1",amount:"200.00",tax:"10.00",total:"210.00"},
    {id:"2",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
    {id:"3",name:"test3",note:"note3",amount:"400.00",tax:"25.00",total:"360.00"},
    {id:"4",name:"test4",note:"note4",amount:"500.00",tax:"60.00",total:"350.00"},
    {id:"5",name:"test5",note:"note5",amount:"600.00",tax:"70.00",total:"340.00"}
        ];

for(var i=0;i<=mydata.length;i++)
    $thisGrid.jqGrid('addRowData',i+1,mydata[i]);

I am wondering how I can fix this behavior? Any help is appreciated.

Note:

jqGrid version: 4.6.0 Applied: Frozen column and cell text wrap.

EDIT:

snapshot taken from the fiddler with solution:

Answer 1

I wrote you already in the past that the version 4.6.0 don't support editing of grids with frozen columns.

To make the code working one have to do many things after every change of the grid content. One have to adjust position of frozen divs and to set explicitly the height and the width of every row in the frozen div. You can find examples from the code which one have to use here and here.

There are exist more easy solution now. If you just replace the version jqGrid 4.6 to the current one code of free jqGrid from github

<link href="https://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css" rel="stylesheet"/>
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/i18n/grid.locale-en.js"></script>
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>

then your code start working as expected: https://jsfiddle.net/OlegKi/99x50s2s/48/

So you can either to do many things yourself or to get the code which already do this.