Need to change grid row border color when hover/focus

[lahiru]

Im using kendo grid angular and want to change every row of grid border when hover/focus to it

[Kaloyan]

Hello lahiru,

To change the border of a grid row on hover you will need to apply some custom CSS that will select the first cell, the last cell and all cells in between of the targeted row. Here is the CSS I used for this:

    .k-grid tbody > tr:hover td:first-child{
        border-left: solid red;
    }     
    .k-grid tbody > tr:hover td:last-child{
        border-right: solid red;
    }    
    .k-grid tbody > tr:hover td{
        border-top: solid red;
        border-bottom: solid red;
    }

The idea is to apply top and bottom border to all cells and left and right border to the first and last cells.

Additionally, I am not entirely sure how this should behave on focus instead of hover. This is mainly because the grid component doesn't have row focus out of the box and achieving such functionality might prove cumbersome. If by focus you mean on select, then the logic is similar as above, with the only difference that you use the k-selected class:

    .k-grid tbody > tr.k-selected td:first-child{
        border-left: solid red;
    }     
    .k-grid tbody > tr.k-selected td:last-child{
        border-right: solid red;
    }    
    .k-grid tbody > tr.k-selected td{
        border-top: solid red;
        border-bottom: solid red;
    }

The working sample can be found in this stackblitz.

Please, let us know if you will require further assistance.

Regards,
Kaloyan
Progress Telerik

[lahiru]

It works.. thanks