Cell Border when focusing for Kendo Grid

[Hari]

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

[Martin Bechev]

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