working jqGrid Example

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<table id="grid"></table>
<input type="button" id="UpdateGridButton" value="Update" />

JavaScript

var mydata = [{id: 48803, thingy: "DSK1"}, {id:48769, thingy:"APPR"}, {id:12313, thingy: 'FOOBAR'}];

$("#grid").jqGrid({
    data: mydata ,
    datatype: 'local',
    gridview: true,
    height: 'auto',
    autoencode: true,
    rowNum: 3,
    colNames: ['Inv No', 'Thingy'],
    colModel: [{
        name: 'id',
        index: 'id',
        width: 60,
    },{
        name: 'thingy',
        index: 'thingy',
        width: 90,
    }],
    caption: "Stack Overflow Example",
    ondblClickRow: function(rowid) {
        var data = $(this).getRowData(rowid);
        console.log(rowid);
    }
});

$('#UpdateGridButton').click(function(){
    var p = $('#grid').getGridParam();
    console.log("found gridParamData:", p.data);
    if (p.data){
        var newData = [
            {id: 462, thingy: "abc"}
        ];
        var rowId = $.jgrid.randId();
        $("#grid").jqGrid('addRowData', rowId, newData);
        console.log(rowId);
    }    
});