jQuery UI Widgets › Forums › Grid › Tabbing through jqxGrid
Tagged: #jqwidgets-grid, cellbeginedit, grid, javascript grid, jquery grid
This topic contains 6 replies, has 3 voices, and was last updated by chrisquintana 7 years, 5 months ago.
-
AuthorTabbing through jqxGrid Posts
-
Hi,
I need to tab through the cells of the jqxGrid, but the grid will have a mix of editable and uneditable cells. So, the problem I’m facing now is when I tab through cells that are editable, it works. But when I try tabbing from editable to uneditable cells, the tabbing stops and it won’t tab to the next cells.
Is there a way to fix this?
Thanks,
Chris
Hello Chris,
You could use
handlekeyboardnavigation
to override the built-in keyboard navigation.
Otherwise, I tested this case (with not editable column) and when ‘tab’ from editable to a uneditable column the last was skipped and go to next.Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.comHi Hristo,
Thanks for the reply. Well, I can use the
handlekeyboardnavigation
event, but is there any easier way to fix this, because I have other grids that had the same dynamic editable capabilities? One thing I noticed when I tab through the cells from editable to uneditable, the cursor is getting lost and ended up at the address bar.Thanks,
Chris
Hi Hristo,
The
handlekeyboardnavigation
event fixed my problem with the tabbing through cells. Now I have another question, is there a way to know the grid’s Id inside thehandlekeyboardnavigation
event?Thanks,
Chris
Hi,
I got my
handlekeyboardnavigation
up and running. Although, there is another issue that I’m encountering. Let’s say, I am using jqxWindow, I have 2 windows: 1) Has a grid (w/c it has thehandlekeyboardnavigation
event) 2) Has a simple form (first name, last name fields). I opened the 1st window, do some stuff on the grid, then close the window. And now I opened the 2nd window, do some stuff again, but when I press the ‘tab’ key, it triggers thehandlekeyboardnavigation
of the 1st window.Need help on how to resolve this issue. By the way, the I’m using a SPA. so the 1st and 2nd windows are in the same instance.
Thanks,
Chris
By using the event.target you can identify which is the target HTML Element that raised the key event. That will help you to identify which one of these Grids has raised the event.
Hi Peter,
Thanks for replying.
Inside the
handlekeyboardnavigation
, I’ve added a condition (see below) wheregrid
is the jqxGrid element.var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0; var grid = $('#jqxGrid'); if($(event.target).closest(grid).length === 0) return false; if (key == 9) { // TODO: handlekey logic }
This works fine when all of the cells are editable. But I’m having an issue, from an editable to non-editable and to an editable cell and you ‘tab’ to an editable cell, the cursor will jump to the address bar instead of that next cell. I debug it, and saw that the event.target and it is holding the DOM of <body> instead of the grid. So, I’m not sure why the ‘tab’ event is raised by the <body> instead of the grid, when you start tabbing from an editable to non-editable and to an editable cell? And there is also an issue where I pressed ‘tab’ key once, it raised the event multiple times.
Thanks,
Chris
-
AuthorPosts
You must be logged in to reply to this topic.