Tab Index on each td of Kendo React Grid

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

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?

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

Hi Vladimir,

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

Ravi