Cell Editing Without Scrolling

by mkdizajn

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>
<div id="grid-pager"></div>

JavaScript

var data = [
    [48803, "DSK1", "", "02200220", "OPEN"],
    [48761, "APPR", "", "77733337", "ENTERED"],
    [48804, "DSK1", "", "02200220", "OPEN"],
    [48762, "APPR", "", "77733337", "ENTERED"],
    [48805, "DSK1", "", "02200220", "OPEN"],
    [48763, "APPR", "", "77733337", "ENTERED"],
    [48806, "DSK1", "", "02200220", "OPEN"],
    [48764, "APPR", "", "77733337", "ENTERED"],
    [48807, "DSK1", "", "02200220", "OPEN"],
    [48765, "APPR", "", "77733337", "ENTERED"],
    [48809, "DSK1", "", "02200220", "OPEN"],
    [48766, "APPR", "", "77733337", "ENTERED"]
    ];

var grid = $("#grid");
grid.jqGrid({
    datatype: "local",
    height: 250,
    colNames: ['Inv No', 'Thingy', 'Blank', 'Number', 'Status'],
    colModel: [{
        name: 'id',
        index: 'id',
        width: 60,
        sorttype: "int"},
    {
        name: 'thingy',
        index: 'thingy',
        width: 90,
        editable: true,
        sorttype: "date"},
    {
        name: 'blank',
        index: 'blank',
        width: 30},
    {
        name: 'number',
        index: 'number',
        width: 80,
        sorttype: "float"},
    {
        name: 'status',
        index: 'status',
        width: 80,
        sorttype: "float"}
                                    ],
    pager: 'grid-pager',
    gridView: true,
    height: 200,
    scrollrows: true,
    cellEdit: true,
    caption: "Stack Overflow Example",
    afterEditCell: function(rowid, cellname, value, iRow, iCol) {
        var $input = $("#" + iRow + "_" + cellname);
        $input.select();

        $input.unbind("keydown");
        $input.keydown(function(e) {
            var key = e.charCode || e.keyCode;

            switch (key) {
            case 37:
                // left
            case 39:
                // right
                e.stopPropagation();
                e.stopImmediatePropagation();
                break; //
            }
        });
    }
});

var names = ["id", "thingy", "blank", "number", "status"];
var...