intercept keystroke in datagrid

[wymak]

I have a datagrid and use 2 separate methods to intercept keystroke in it, as shown below. But both fail to work, please enlighten me what was wrong in the code:

<table id="dg"  class="easyui-datagrid" style="width:800px;height:350px"  toolbar="#summtoolbar" pagination="true" idField="id"  multiSort='false'  autoRowHeight="false" rownumbers="true" fitColumns="true" singleSelect="true"  striped="true" showFooter="true" pageList="[10,20,30,40]" data-options="method: 'get', onDblClickCell: onDblClickCell,  onClickCell: onClickCell, onEndEdit: onEndEdit" > 

......

</table>


// method 1 to alert keystroke
$('#dg').datagrid('getPanel').panel('panel').attr('tabindex',1).bind('keydown',function(e){
    alert(e.keyCode);
});

// method 2 to alert keystroke
$('#dg').datagrid('getPanel').bind('keydown',function(e){
    alert(e.keyCode);
});

[korenanzo]

what kind of fail ? do you have an error or it does not fires?

I use the same procedure, even if with a different syntax:

Code:

$('#dg').datagrid('getPanel').bind({'keydown' :
 function (e) {   
alert(e.keyCode); } 
});

Anyway there could be some hurdle:
 in my case, I use cell-editing  extension and when in edit mode, the keystroke is captured by the extension and not bubbled. so I have to  bind the keydown ALSO into the cell editor textbox

may be it's also your case...
HTH

RIc

[wymak]

Hi Korenanzo;

Please try the following:

With the keybinding in effect, suppose there are 10 rows displayed in the datagrid (NB with row editing enabled) and your selection was at row 10. Try hit down arrow. The selection disappear. Then try click a row, say row 10, with your mouse. You cannot get row 10 into editing mode again.

In other words, we need to write some code to guard against selection moving out of the page boundary.

mak

[wymak]

Sorry, forget to post the intercepting code.
I think this is related to the code imperfection.

            switch(e.keyCode){
               case 38:   // up
                  var selected = $('#dg').datagrid('getSelected');

                  if (selected){
                     var index = $('#dg').datagrid('getRowIndex', selected);
                     $('#dg').datagrid('selectRow', index-1);
                  } else {
                     $('#dg').datagrid('selectRow', 0);
                  }
                  break;
               case 40:   // down
                  var selected = $('#dg').datagrid('getSelected');
                  if (selected){
                     var index = $('#dg').datagrid('getRowIndex', selected);
                     $('#dg').datagrid('selectRow', index+1);
                  } else {
                     $('#dg').datagrid('selectRow', 0);
                  }
                  break;

[korenanzo]

it seems you check the selected, that is the current, row
but  I think your code should be something like:

Code:

  switch(e.keyCode){
               case 38:   // up
                  var selected = $('#dg').datagrid('getSelected');

                     var index = $('#dg').datagrid('getRowIndex', selected);
                     if(index > 0)
                     $('#dg').datagrid('selectRow', index-1);
                       else                      
                        $('#dg').datagrid('selectRow', 0);
                  }
                  break;
               case 40:   // down
                  var selected = $('#dg').datagrid('getSelected');
                  if (selected){
                     var index = $('#dg').datagrid('getRowIndex', selected);
                      var max =  $('#dg').datagrid('getRows).length
                      if (index < max)
                     $('#dg').datagrid('selectRow', index+1);
                    else  
                          $('#dg').datagrid('selectRow', 0);
                  }
                  break;