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

How to set row border for TreeList on MouseHover

5 Answers 17 Views
TreeList
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 06 Jun 2019, 05:02 PM

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?

5 Answers, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 11 Jun 2019, 01:02 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
John
Top achievements
Rank 1
answered on 11 Jun 2019, 05:46 PM

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?

0
Vessy
Telerik team
answered on 14 Jun 2019, 11:56 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
John
Top achievements
Rank 1
answered on 14 Jun 2019, 12:12 PM

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

Thank you Vessy.

0
Accepted
Vessy
Telerik team
answered on 17 Jun 2019, 10:10 AM
Hi, 

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

Regards,
Vessy
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
TreeList
Asked by
John
Top achievements
Rank 1
Answers by
Vessy
Telerik team
John
Top achievements
Rank 1
Share this question
or