Wie aktiviert man die Tab-Navigation zur nächsten editierbaren Zelle in einer anderen Zeilengruppe?

Question

Ich bin eine Anwendung mit ag-Grid Enterprise 4.0.7, die Zeilengruppen verwendet und hat editierbare Felder, Tastaturnavigation zwischen bearbeitbaren Zellen ist von wesentlicher Bedeutung.

Integrierte Tab-Navigation funktioniert gut, aber nur innerhalb einer Zeilengruppe. Sobald die letzte bearbeitbare Zelle in einer Gruppe erreicht ist, springt die Tabulatortaste NICHT zur nächsten bearbeitbaren Zelle in der nächsten Gruppe, sondern zu einem nicht verwandten Element auf der Seite.

Hier ist ein Beispiel auf der Basis einer ag-grid Dokumentation Probe, die Namen editierbar sind Athleten, auf den nächsten Athleten navigiert Tab, aber nur innerhalb eines Landes: https://jsfiddle.net/pfhkf3bm/

field: "athlete", 
editable: true 

Ist dies das gewünschte Verhalten? Was ist der sauberste Weg, die Tab-Navigation zu erweitern, um zum nächsten editierbaren Element in einer anderen Gruppe zu springen?

Danke!

Answer 1

Diese Methode hat für mich gearbeitet:

myTabToNextCell(params) { 
    const previousCell = params.previousCellDef; 
    const lastRowIndex = previousCell.rowIndex; 
    let nextRowIndex = lastRowIndex + 1; 
    // TODO renderedRowCount must contain the row count. 
    const renderedRowCount = this.state.rowCount; 

    // if (nextRowIndex >= renderedRowCount) { nextRowIndex = 0; } 
    if (nextRowIndex < renderedRowCount) { nextRowIndex = lastRowIndex + 1; }  else { 
     nextRowIndex = 0; 
    } 

    const result = { 
     rowIndex: nextRowIndex, 
     column: previousCell.column, 
     floating: previousCell.floating 
    }; 

    return result; 
}