OpenGrid subgrid scrollbar issue

by Michael Sobczak

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css">
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
<table id="jqGrid"></table>
<div id="jqGridPager"></div>

JavaScript

var idsOfSelectedRows = [];

/*
 * Called when the user checks/unchecks a row.
 */
updateIdsOfSelectedRows = function (gridId, idStr, isSelected) {
	var id = parseInt(idStr, 10);
    var index = $.inArray(id, idsOfSelectedRows);
    if (!isSelected && index >= 0) {
        idsOfSelectedRows.splice(index, 1); // remove id from the list
    } else if (index < 0) {
        idsOfSelectedRows.push(id);
    }
    
    updateGridRow(gridId, idStr, isSelected);
};

function updateGridRow(gid, rowId, isSelected)
{
    var checkedValue = isSelected ? '1' : '0';

    var grid = $('#' + gid);

    var rowids = grid.getDataIDs();

    var rowFound = false;

    //console.log('updateGridRow: ' + rowId);

    for (var i = 0; i < rowids.length; i++) {

        //Check the row Id's match
        if (rowId == rowids[i]) {

            var rowData = $('#' + gid).jqGrid('getRowData', rowId);

            //j$('#' + gid).jqGrid('setSelection', rowId);

            $('#' + gid).editRow(rowId);

            $('#' + gid).jqGrid('editCell', i+1, true);
            $('#' + gid).jqGrid('setCell', i+1, 'isSelected', isSelected.toString());
            $('#' + gid).jqGrid('saveCell', i+1, true);

            $('#' + gid).saveRow(rowId);

            //j$('#' + gid).jqGrid("resetSelection");

            rowData = $('#' + gid).jqGrid('getRowData', rowId);

            rowFound = true;

        }
    }

    if(rowFound == false)
    {
        alert ('rowId not found: ' + rowId);
    }

    return true;
}

		var mainGrid = {
		  "total": 1,
		  "page": 1,
		  "pageSize": 20,
		  "records": 2,
		  "rows": [{
		    "commonMbuId": 99731,
		    "productName": "Widget",
		    "isSelected": true
		  }, 
		  {
		    "commonMbuId": 99732,
		    "productName": "Gadget",
		    "isSelected": false		  }
		  ]
		};

		$(document).ready(function() {
		  $("#jqGrid").jqGrid({
		    datatype: function(postdata) {

		      $('#' + 'load_' + 'jqGrid').show();

		      var json = mainGrid;
		      
		      for...