jQuery UI Widgets Forums Grid Tabbing through jqxGrid

This topic contains 6 replies, has 3 voices, and was last updated by  chrisquintana 7 years, 5 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • Tabbing through jqxGrid #92746

    chrisquintana
    Participant

    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

    Tabbing through jqxGrid #92789

    Hristo
    Participant

    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 Hristov

    jQWidgets team
    http://www.jqwidgets.com

    Tabbing through jqxGrid #92799

    chrisquintana
    Participant

    Hi 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

    Tabbing through jqxGrid #92837

    chrisquintana
    Participant

    Hi Hristo,

    The handlekeyboardnavigationevent fixed my problem with the tabbing through cells. Now I have another question, is there a way to know the grid’s Id inside the handlekeyboardnavigation event?

    Thanks,

    Chris

    Tabbing through jqxGrid #92870

    chrisquintana
    Participant

    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 the handlekeyboardnavigation 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 the handlekeyboardnavigationof 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

    Tabbing through jqxGrid #92873

    Peter Stoev
    Keymaster

    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.

    Tabbing through jqxGrid #92901

    chrisquintana
    Participant

    Hi Peter,

    Thanks for replying.

    Inside the handlekeyboardnavigation, I’ve added a condition (see below) where grid 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

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.