How to set row border for TreeList on MouseHover

[John]

I'm trying to get a row of a TreeList to change appearance when the mouse is over it.

I can do this in css style for a GridView.

But there doesn't seem to be similar functionality for a tree list row.

Does anyone know if this can be done?

[Vessy]

Hi John,

In order to apply border styles to the rows in the TreeList you will need to make sure that they are applied to the td elements of the row, in order to be visible. 

For example:

.RadTreeList tr.rtlR td:hover,
.RadTreeList tr.rtlA td:hover {
    border: 1px solid red;
}

Regards,
Vessy
Progress Telerik

[John]

Hi Vessy,

   Thank you for the reply.

Your style is working, but only for the border on the individual cell being hovered over.

I need the border of the entire row to change, not just one cell

Is this possible?

[Vessy]

Hi John,

As there are some cells that need to be skipped when adding the border (the first ones which are responsible for the shifting of the data rows), you can play with the borders of the other cells when a row in the TreeList is hovered in a similar way:

.RadTreeList tr.rtlR:hover td:not(.rtlL),
.RadTreeList tr.rtlA:hover td:not(.rtlL) {
    border: 1px solid red;
    border-width: 1px 0;
}

.RadTreeList tr.rtlR:hover td.rtlCF,
.RadTreeList tr.rtlA:hover td.rtlCF {
    border-left-width: 1px;
}

.RadTreeList tr.rtlR:hover td.rtlCL,
.RadTreeList tr.rtlA:hover td.rtlCL {
    border-right-width: 1px;
}

Regards,
Vessy
Progress Telerik

[John]

Yes, that is exactly what I was trying to accomplish!

Thank you Vessy.

[Vessy]

Hi, 

You are welcome, John - I am glad my reply helped you to achieve the desired result.

Regards,
Vessy
Progress Telerik