Keydown.tab should scroll the flex grid

Keydown.tab should scroll the flex grid

Posted by: nnaina1997 on 20 November 2023, 12:24 am EST

• 

  nnaina1997

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 20 November 2023, 12:24 am EST - Updated 20 November 2023, 12:29 am EST

  Hi

  I have a flexgrid it has a column which has two inputs input1, input2(optional). on keydown.tab it calls tabEvent().

  [code]tabEvent(value: any, type: string, item: any): void {
  
  var index = this.slListItems.indexOf(item);
  
  // Function to find the next enabled input element
  
  const findNextEnabledItem = (startIndex: number, targetType: string): HTMLElement | null => {
  
  let nextItem: HTMLElement | null = null;

    if (targetType === 'ea') {
      nextItem = document.getElementById(`inputcs${this.slListItems[startIndex + 1]?.productId}`);
      console.log(nextItem.id,'ea')
    } else if (targetType === 'cs') {
      nextItem = document.getElementById(`inputea${this.slListItems[startIndex]?.productId}`);
      console.log(nextItem.id,'cs')
      if (nextItem == null || nextItem.hasAttribute('disabled')) {
        // If the 'cs' item is disabled or doesn't exist, check for the next 'cs' item
        nextItem = document.getElementById(`inputcs${this.slListItems[startIndex + 1]?.productId}`);
        console.log(nextItem.id,'cs')
      }
    }
  
    if (nextItem && nextItem.hasAttribute('disabled')) {
      // If the next item is disabled, recursively find the next enabled item
      return findNextEnabledItem(startIndex + 1, targetType);
    }
    console.log(nextItem.id,'out')
    return nextItem;
  };
  
  // Introduce a delay before attempting to find the next item
  setTimeout(() => {
    const nextItem = findNextEnabledItem(index, type);
    console.log(nextItem?.id)
    if (nextItem) {
      nextItem.focus();
      this.flexGrid?.scrollIntoView(index, -1);
    }
  }, 100)
  

  }[/code]

  In Html, I have
  
  <input
  
  [(ngModel)]=“cell.item.cartCaseQuantity”
  
  [disabled]=“!cell.item.orderable”
  
  #input1
  
  (keydown.tab=“tabEvent($event,input1.value, ‘cs’, cell.item)”
  
  id=“inputcs{{ cell.item.productId }}”
  
  />
  
  <input
  
  *ngIf=“cell.item.showQuantity”
  
  #input2
  
  id=“inputea{{ cell.item.productId }}”
  
  [(ngModel)]=“cell.item.cartEachQuantity”
  
  [disabled]=“!cell.item.orderable”
  
  (keydown.tab)=tabEvent($event,input2.value, ‘ea’, cell.item)"
  
  />

  I want to scroll to the flex grid while focusing on inputs while tabbing but it’s breaking. Can you Please suggest.

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 20 November 2023, 8:17 pm EST

  Hi Naina,

  We tried to implement the code you shared in a sample and found that the scrollIntoView method is causing this issue, you’ll just need to use this method at the top, of your tabEvent method and set the correct row index, like this -

  var index = this.slListItems.indexOf(item);
      this.flexGrid.scrollIntoView(index + 1, -1)

  Please refer to the following sample for the same - https://stackblitz.com/edit/angular-ivy-bkhvpi?file=src%2Fapp%2Fapp.component.ts

  In case, you still face this issue, please let us know.

  Regards

• 

  nnaina1997

  • Post Options:
  • Link
    Copy

  Posted 22 November 2023, 12:00 am EST

  Hi Vivek

  I am using grouping flex grid here’s the collection
  
  this.productsData = new wjCore.CollectionView(slListItems, {
  
  groupDescriptions: [‘classificationHierarchy’]
  
  })

  tabbing not working on grouped grid data.

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 22 November 2023, 10:30 pm EST

  Hi Naina,

  In that case, you can set the tabIndex property of the input boxes, and use the rowIndex as the value of tabIndex. You’ll still need to scroll the grid(using scrollIntoView method) by handling the keydown event so that the next row to be focussed can remain visible.

  Please refer to the following updated sample for the same - https://stackblitz.com/edit/angular-ivy-betez3?file=src%2Fapp%2Fapp.component.ts

  Regards

• 

  nnaina1997

  • Post Options:
  • Link
    Copy

  Posted 23 November 2023, 4:18 am EST - Updated 23 November 2023, 8:09 pm EST

  for Grouped grid,
  
  change css to this .wj-flexgrid {
  
  max-height: 310px;
  
  } and then use the tab key.

  It broke as it couldn’t find any editable field.

  I have added one scenario for a non-grouped grid for that tabbing breaks

• 

  nnaina1997

  • Post Options:
  • Link
    Copy

  Posted 23 November 2023, 8:02 pm EST - Updated 23 November 2023, 8:07 pm EST

  [code] <ng-template wjFlexGridCellTemplate [cellType]=“‘Cell’” let-cell=“cell”>
  
  <input
  
  [(ngModel)]=“cell.item.country”
  
  #input1
  
  (keydown)=“tabEvent(input1.value,‘cs’, cell.item)”
  
  id=“inputcs{{ cell.item.id }}”
  
  [disabled]=“cell.item.country == ‘Japan’ || cell.item.country == ‘Greece’ ||cell.item.country == ‘US’||cell.item.country == ‘Germany’”
  
  />

    <input
      #input2
      id="inputea{{ cell.item.id }}"
      [disabled]="cell.item.country == 'Japan' || cell.item.country == 'Greece' ||cell.item.country == 'US'||cell.item.country == 'Germany'"
      [(ngModel)]="cell.item.country"
      (keydown)="tabEvent(input2.value, 'ea', cell.item)"
    />
  </ng-template>[/code]
  

  try this code with simple grid also this logic breaks

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 28 November 2023, 5:28 pm EST

  Hi Naina,

  It seems that the grouped rows in the flexgrid are causing this issue. You can use the select method of the grid to select the required cell first and then focus on the input element to avoid this issue.

  Also, in the code snippet you shared, it seems there are some disabled input boxes in the grid, and you want to focus the next editable input box on the tab key press, to implement this, you can iterate over the grid rows to find the next editable input box and then focus it.
  
  Please refer to the following updated sample for the same - https://stackblitz.com/edit/angular-ivy-7frefv?file=src%2Fapp%2Fapp.component.ts

  In case, you still face any issues, please let us know.

  Regards