Tab Index on each td of Kendo React Grid

5 posts, 1 answers
  1. Ravi
    Ravi avatar
    10 posts
    Member since:
    Jun 2020

    Posted 16 Sep 2020 Link to this post

    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?

  2.
  3. Kiril
    Admin
    Kiril avatar
    24 posts

    Posted 18 Sep 2020 Link to this post

    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).

  5. Ravi
    Ravi avatar
    10 posts
    Member since:
    Jun 2020

    Posted 18 Sep 2020 in reply to Kiril Link to this post

    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?

  7. Answer
    Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2206 posts

    Posted 22 Sep 2020 Link to this post

    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).

  8.
  9. Ravi
    Ravi avatar
    10 posts
    Member since:
    Jun 2020

    Posted 22 Sep 2020 in reply to Vladimir Iliev Link to this post

    Hi Vladimir,

     

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

     

    Ravi

Back to Top