jqGrid 4.0 bindKeys method move the whole grid with up and down arrow keys

2
votes

i am using jqGrid 4.0 and having a problem with it.

here is my JavaScript code:

$grid.jqGrid({
    url:'parties-process.php?action=SELECT',
    datatype: "json",
    colNames:['Party ID', 'Party Name', 'Balance', 'Opening Balance', 'Opening Debit', 'Options'],
    colModel:[
        {name:'partyID',index:'partyID', width:55},
        {name:'partyName',index:'partyName', width:150},
        {name:'balance',index:'balance', width:50, align:'right'},
        {name:'opening',index:'opening', hidden:true},
        {name:'openingdr',index:'openingdr', hidden:true},
        {name:'act',index:'act', width:150, sortable:false, align:'center', hidden:true}
    ],
    scroll: true,
    autowidth: true,
    height: myLayout.panes.center.outerHeight()-183,
    pager: jQuery('#pager'),
    rowNum:999,
    rowList:[10,20,30],
    sortname: 'partyID',
    viewrecords: true,
    sortorder: "desc",
    caption: "Parties",
    gridComplete: function(){
        var data = $grid.jqGrid('getDataIDs');
        for(var i=0;i < data.length;i++){
            var id = data[i];
            editbtn = "<small><a class=\"editbtn\" onclick=\"edit('"+id+"');\">Edit</a></small> ";
            deletebtn = "<small><a class=\"deletebtn\" onclick=\"del('"+id+"');\">Delete</a></small>";
            $grid.jqGrid('setRowData',data[i],{act:editbtn+deletebtn});
        }
        $(".editbtn").button({
            icons: { primary: "ui-icon-pencil" },
            text: false
        });
        $(".deletebtn").button({
            icons: { primary: "ui-icon-close" },
            text: false
        });
    }
}).jqGrid('bindKeys');

the problem is that when i press up and down arrow keys, the respective row is selected, bt it also scrolls the whole grid.

1
javascriptjqueryjqgrid

1 Answers

2
votes

I did this to solve the problem:

$(grid).bind('keydown', function (e) {
  if (e.keyCode == 38 || e.keyCode == 40) e.preventDefault();
});