Tab feature in Wijmo Grid

Tab feature in Wijmo Grid

Posted by: sdayal on 5 August 2021, 6:23 am EST

• 

  sdayal

  • Post Options:
  • Link
    Copy

  Posted 5 August 2021, 6:23 am EST

  Hi Wijmo Team,

  The way we have received a solution for tab feature we have implemenetd. But if we are on any of the dropdown cell (on 3 or 4 row) and click Shift + Tab. Back word tab feature does not work properly(it skips text box cells sometimes).
  
  Steps:

  1. Open dropdown of 4 row Subject column and keep clicking Shift + Tab. Full name and Checkbox cells gets skipped.

  Please help.
  
  https://stackblitz.com/edit/angular-tl5hab

  Thanks

• 

  sdayal

  • Post Options:
  • Link
    Copy

  Posted 5 August 2021, 7:02 am EST

  ++
  
  2) Also we have disabled cells so on tab button the, it should skip the disabled cell and directly should jump to enabled cells.

  3. Also inorder to navigate from one drop down to another dropdown we have to tab twice.

  4. Also we found that when we have a tab and click combination to open dropdowns, the dropdoen freezes.

  Snippet of Disabled cells
  
  https://stackblitz.com/edit/angular-kvewre?file=src/app/app.component.ts

• 

  sdayal

  • Post Options:
  • Link
    Copy

  Posted 6 August 2021, 6:54 am EST

  Hi Wijmo Team,

  Please provide solution for this

  Thanks

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 6 August 2021, 9:14 am EST

  Hi,

  The resolution of the query is as follows:

  1. To resolve the issue of cells getting skipped on pressing Shift + Tab, we may use the isDroppedDownChanged event of the editor control (MultiSelect, Combobox) which occurs after the drop down is shown or hidden and may bring the cell in focus.
     
     Sample: https://stackblitz.com/edit/angular-bx3sff?file=src%2Fapp%2Fapp.component.ts

  2. The requirement of skipping disabled cells have already been discussed before at the given link:
     
     https://www.grapecity.com/forums/wijmo/grid-coloring#please-refer-to-the-follow

  3. The issue of performing two Tab presses is because the first Tab press is required to remove focus from the editor control (MultiSelect, Combobox) and the second Tab press is required to change the cell selection.

  4. The issue of dropdown getting freeze on using Tab + click have already been discussed on the below thread:
     
     https://www.grapecity.com/forums/wijmo/dropdown-remains-open-in-w

  Regards,
  
  Ashwin

• 

  sdayal

  • Post Options:
  • Link
    Copy

  Posted 10 August 2021, 4:18 am EST

  Hi Ashwin,

  One help,

  For disabled cell can’t we directly skip those cells.

  Example: if I have 4 cell from which 1 and 4 are enabled and 2 and 3 are disabled. If I am on cell 1 and I click tab then it should navigate to 4 enabled cell as of now I have to keep clicking on Tab button twice to navigate to 4 enabled cell.
  
  https://stackblitz.com/edit/angular-upzgnp?file=src%2Fstyles.css

  Thanks

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 11 August 2021, 4:53 am EST

  Hi,

  We apologize for the delay. To implement the above requirement, we may perform the following:

  1. We may attach a keydown event handler to handle the Tab press action in FlexGrid.
  2. We may get the current selection by using the selection property of FlexGrid which gets or sets the current selection.
  3. We may get the element that represents the given cell by using the getCellElement() method of FlexGrid and may check if it contains the “wj-state-disabled” class or not and then update the selection accordingly.

  Please refer to the sample below:

  https://stackblitz.com/edit/angular-f1kfrf

  ~regards