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

Cell Border when focusing for Kendo Grid

1 Answer 1473 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Hari
Top achievements
Rank 1
Hari asked on 04 Oct 2020, 03:15 PM

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

1 Answer, 1 is accepted

Sort by
0
Martin Bechev
Telerik team
answered on 06 Oct 2020, 06:31 AM

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

Tags
General Discussions
Asked by
Hari
Top achievements
Rank 1
Answers by
Martin Bechev
Telerik team
Share this question
or