This is a migrated thread and some comments may be shown as answers.

Tab Index on each td of Kendo React Grid

4 Answers 115 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Ravi
Top achievements
Rank 1
Veteran
Ravi asked on 16 Sep 2020, 08:16 PM

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?

4 Answers, 1 is accepted

Sort by
0
Kiril
Telerik team
answered on 18 Sep 2020, 02:03 PM

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

0
Ravi
Top achievements
Rank 1
Veteran
answered on 18 Sep 2020, 07:22 PM

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?

0
Accepted
Vladimir Iliev
Telerik team
answered on 22 Sep 2020, 06:41 AM

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

0
Ravi
Top achievements
Rank 1
Veteran
answered on 22 Sep 2020, 02:06 PM

Hi Vladimir,

 

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

 

Ravi

Tags
General Discussions
Asked by
Ravi
Top achievements
Rank 1
Veteran
Answers by
Kiril
Telerik team
Ravi
Top achievements
Rank 1
Veteran
Vladimir Iliev
Telerik team
Share this question
or