Cell Border when focusing for Kendo Grid

2 posts, 0 answers
  1. hari teja
    hari teja avatar
    1 posts
    Member since:
    Oct 2020

    Posted 04 Oct Link to this post

    Hello Team,

         In Kendo Grid, when using inline editing on row click, is there any way to change the border style when we focused on a particular cell. Can you get back with me any examples i can use?

     

    Thanks,

    Hari Padala

  2. Martin
    Admin
    Martin avatar
    253 posts

    Posted 06 Oct Link to this post

    Hi Hari,

    I am afraid that there is no built-in option to achieve the desired requirement. But with some custom CSS code, the edited cell layout can be customized.

    Technically speaking when a row enters edit mode, it receives .k-grid-edit-row class. This class can be used to target the right <td> element. Since the <td> is not the element that actually receives the focus (inner input element does), focus-within pseudo-class needs to be used. Please check the following CSS:

    .k-grid-content .k-grid-edit-row td:focus-within {
      border: solid red;
    }

    Here is an example:

    https://stackblitz.com/edit/angular-oohvbw

    I hope this helps.

    Regards,
    Martin
    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).

Back to Top