Print Page - intercept keystroke in datagrid

Title: intercept keystroke in datagrid
Post by: wymak on May 14, 2016, 11:03:46 PM

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);
});

Title: Re: intercept keystroke in datagrid
Post by: korenanzo on May 17, 2016, 01:04:01 AM

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

Title: Re: intercept keystroke in datagrid
Post by: wymak on May 17, 2016, 05:00:23 AM

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

Title: Re: intercept keystroke in datagrid
Post by: wymak on May 17, 2016, 05:11:04 AM

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;

Title: Re: intercept keystroke in datagrid
Post by: korenanzo on May 17, 2016, 06:54:56 AM

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;

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: wymak on May 14, 2016, 11:03:46 PM