Tab Index on each td of Kendo React Grid

[Ravi]

Hi,

 

I'm working on a Kendo React Grid in my application and I'm trying to figure out how to navigate each 'td' (cell) of the grid using tab key. I was able to navigate where i have buttons rendered in a cell (using cell option).

I have followed below example which uses rowRender but it was selecting whole row.

https://stackblitz.com/edit/react-njk8q2-qlvomy?file=app/main.jsx

 

Is there a way to navigate to each cell of the grid when using tab key?

[Kiril]

Hello Ravi,

In order to allow the cells to be tab-able, one must set the `tabIndex` to `0`. This will allow the browser to focus the element when the `tab` key is pressed.

This can be achieved by utilizing the cellRender property of the Grid. I have prepared the following stackblitz example which demonstrated how to apply the `tabIndex` of each individual cell.

https://stackblitz.com/edit/react-7srkcq?file=app/main.jsx

Please let me know if i can assist you further.

Regards,
Kiril
Progress Telerik

[Ravi]

Kiril,

 

Thank you for your response. I was able to use tab key for grid cells.

But, I have added locked property for first column and after using cellRender the locked feature isn't working as expected. The header of the column was locked but not the cells of the columns, the columns are still horizontally scrolling. 

 

Here is the link for updated code that uses locked column

https://stackblitz.com/edit/react-7srkcq-wpog86?file=app/main.jsx

 

Is there a way to fix this issue?

[Vladimir Iliev]

Hello Ravi,

To support locked columns you need to spread the style prop of the original cell as well:

  render() {
    return (
      <td
        {...this.props}
        style={{
          background: this.state.focused ? "lightgray" : undefined,
          ...this.props.style
        }}
        tabIndex={0}
        onFocus={this.handleFocus}
        onBlur={this.handleBlur}
      />
    );
  }
}

Regards,
Vladimir Iliev
Progress Telerik

[Ravi]

Hi Vladimir,

 

Spreading the style prop worked for me. Thanks for your help.

 

Ravi