jQWidgets Grid Delection and Indexing Test

HTML

<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.fresh.css">
<div id="myApp"></div>

CSS

body {
    background-color: #ffe;
}
#myApp {
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
}

JavaScript

var myTable = $('<div id="myTable"></div>')
$('#myApp').append(myTable);

$('#myApp').append($('<button>Show Selection Info</button>').on('click', function () {
    var selection = myTable.jqxGrid('getselectedrowindexes');
    var boundIndex = myTable.jqxGrid('getrowboundindex', selection[0]);
    var index = selection[0];
    var rows = myTable.jqxGrid('getrows');
    var dispRows = myTable.jqxGrid('getdisplayrows');
    var boundRows = myTable.jqxGrid('getboundrows');
    var rowsInfo = rows[index].Company;
    var dispInfo = dispRows[index].Company;
    var boundInfo = boundRows[index].Company;
    var info = 'selection: ' + selection + ', boundIndex: ' + boundIndex + ', rows:' + rowsInfo + ', disp:' + dispInfo + ', bound:' + boundInfo;
    $('#myApp').append('<div>'+info+'</div>');
}));
// prepare the data
var source = {
    localdata: [
        ["Futterkiste", "Maria Anders", "Germany"],
        ["Emparedados y helados", "Ana Trujillo", "Mexico"],
        ["Trujillo Emparedados", "Ana Trujillo", "Mexico"],
        ["Eten bij Michel", "Michel", "Netherlands"],
        ["One & Only", "Marcel Groen", "Germany"],
        ["Bellini", "Pedrazzetti", "Switzerland"]
    ],
    datafields: [{
        name: 'Companys',
        map: '0',
    },{
        name: 'Company',
        map: '1',
    }, {
        name: 'Contact',
        map: '2',
    }],
    datatype: "array"
};
// create the grid
myTable.jqxGrid({
    source: new $.jqx.dataAdapter(source),
    width: 500,
    height: 300,
    sortable: true,
    filterable: true,
    columns: [{
        text: 'Company Names',
        datafield: 'Companys'
        cellsrenderer: renderer
    },{
        text: 'Company Name',
        datafield: 'Company'
    }, {
        text: 'Contact Name',
        datafield: 'Contact'
    }]
});

var renderer = function (id) {
	return '<input type="button" onClick="buttonclick(event)" class="gridButton" id="btn' + id + '" value="Delete Row"/>'
}

var buttonclick = function (event) {
		var id...