Hi,
How do we capture/handle the keyup and keydown events on IGgrid?
Ignite UI version : 20132.2364
Virtualization : True
We cannot go to any newer version of infragistics because of strict project deadline.
Please let us know with the version of grid mentioned above and virtualization enabled, how can we capture the keyboard keyup and keydown events on grid rows?
Thanks
Kiran
Hello Kiran,
There is no out of the box solution for handling keyboard events in igGrid.
One custom solution is to add "tabindex" attribute to the TR elements of the grid and then handle the "keydown" and "keyup" events manually.
To demonstrate this approach I'm attaching a sample for your reference.
Hope this helps,Martin PavlovInfragistics, Inc.
Hi Martin,
This works when multipleSelection within the "Selection" features is set to false.
However for multiselection true we are still not able to capture the key up and key down events.
Attached is the updated sample with multiselection set as true.
Can you please look into this and let us know how to achieve the keyup event with multiselection mode?
Thanks,
We were testing the sample you sent and implemented the code in our application as well. But since virtualization is enabled, when the last record of first set of data loaded is reached the KeyUp Events stops.
In the attached sample just select first row and then continuously try moving to next row by Down arrow key, when it reaches the record with Product ID 331 the event stops and if I press the down arrow keys the scroll bar alone will move but KeyUp event is not triggered.
Can you please check the attached sample.
When you have virtualization enabled the DOM rows are recycled, so you have to also call virtualScrollTo method in order to load the next chunk of data into the grid.
I'm attaching a modified sample.
Even after specifying the virtualScrollTo method, it is not working as expected. The sample you have attached above still stops at 331 product id.
That's strange. What is the browser you're testing with? Also what are the steps that you do to reproduce this? Can you check the browser error console and see whether there is an error.
Thanks in advance,Martin PavlovInfragistics, Inc.
Hello Martin,
We are using IE11 and Chrome browser for testing.
Steps followed are straight forward just click on first row in the grid and press key down and reach to row with product id 331. after that when u press key down its not going to next row.
Same observation we have on both the browsers.
I was wondering whether my last sample resolves your issue?
Let me know if you have further questions regarding this subject.
Best regards,Martin PavlovInfragistics, Inc.
After some trial and error I saw that what you describe is observed only when the mouse is over the grid and what I was doing is to move the mouse away from the grid after I select the first row. I tuned the sample to work when mouse is over the grid. You can find it attached.
Looked at the sample and we are pressing keydown key starting from row 1 to row with Product Id 331.Immediately after reaching that row keydown will stop working and scroll bar alone moved where as row with Product Id 332 will not be selected.
As mentioned above we are using IE11 and Chrome browsers.
Did you have a chance to look at my last sample? Is it working on your side?
Try with the sample attached.