CODEWITHSUNDEEP
ag-grid
martind
martind

Reputation: 51

How to enable tab navigation to the next editable cell in a different row group?

I'm building an application using ag-grid enterprise 4.0.7, which uses row groups and has editable fields, keyboard navigation between editable cells is essential.

Built-in tab navigation works well, but only within a row group. Once the last editable cell in a group is reached, pressing tab does NOT jump to the next editable cell in the next group but rather to some unrelated element on the page.

Here's an example based on an ag-grid documentation sample, the athletes' names are editable, tab navigates to the next athlete, but only within one country: https://jsfiddle.net/pfhkf3bm/

field: "athlete",
editable: true

Is this the intended behavior? What's the cleanest way to extend the tab navigation to jump to the next editable item in another group?

Thanks!

Upvotes: 2

Views: 5479

Answers (1)

Shashank
Shashank

Reputation: 31

This method has worked for me: 

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;
}

Upvotes: 1

Related Questions