Overriding CSS class "e-hover" of TreeGrid

[Emil G]

Hello

I would like to modify the appearence of a row in our TreeGrid table when the mouse is hovering over it. According to your documentation, this should be possible by overriding the CSS class "e-hover" of the TreeGrid, however I am not able achieve anything by doing so. It is as if the class "e-hover" doesn't exist at all.

Please show me the correct way of styling a row on mouse hover using the CSS class "e-hover" and preferably a working example I can run. Thank you.

[Pon Selva Jeganathan]

Hi Emil de Graaf,

Thanks for contacting syncfusion forum.

Query: show me the correct way of styling a row on mouse hover using the CSS class "e-hover" and preferably a working example I can run

Based on your query, we achieve your requirement using :hover css property instead of .e-hover. Refer the below code example to customize the grid content on hovering. 

Please refer to the below code example,

<style>

    .e-treegrid .e-row:hover {

        cursor: pointer

    }

 

        .e-treegrid .e-row:hover .e-rowcell {

            font-size: 1.1rem;

        }

</style>

Please refer to the below sample,

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Hover-1691708279

Kindly get back to us for further assistance.

Regards,
Pon selva