CODEWITHSUNDEEP
javascriptangularrxjsag-grid
steveblue
steveblue

Reputation: 490

How to focus next cell in ag-grid Angular from context of AgEditorComponent

I have a custom overlay (OverlayModule from '@angular/cdk/overlay') that opens when editing a cell in Ag-Grid for Angular.

The user can focus on a MatInput just fine in the overlay. But now the focus is on an input that is outside the flow of the grid cells, so when user hits 'tab' the default behavior will focus the address bar.

I can prevent this behavior by with the following.

fromEvent(this.tabOutInput.nativeElement, 'keydown')
      .pipe(
            takeUntil(this._destroy)
           )
      .subscribe((event: KeyboardEvent) => {
        if(event.keyCode === TAB) {
          event.preventDefault();
          // TODO: figure out how to focus the next cell
        }
      });

But how do I get the next cell to focus? I looked at the docs and tabToNextCell and navigateToNextCell seem like options but I don't want users of this cell to have to configure their template, where these methods are bound.

Is there a way with ICellEditorParams to navigate to the next cell with the GridApi? 

agInit(params: ICellEditorParams): void {}

Please help!

Upvotes: 1

Views: 3391

Answers (1)

steveblue
steveblue

Reputation: 490

DOH! I figured out what the problem was. There were elements hijacking the tab index. There are multiple grids on this page and this.params.api was referencing the last grid as opposed to the one I was working with. I tried this.params.api.tabToNextCell() earlier in the day but it didn't work, it was tabbing irregularly between another grid, the first input on the page. I just need to figure out how to properly pass in the context to get multiple grids working. 

fromEvent(this.tabOutInput.nativeElement, 'keydown')
      .pipe(
            takeUntil(this._destroy)
           )
      .subscribe((event: KeyboardEvent) => {
        if(event.keyCode === TAB) {
          event.preventDefault();
          this.params.api.tabToNextCell(); <-- this does work with 1 grid on the page
        }
      });

Upvotes: 3

Related Questions