How to customize the ASP.NET Core TreeView selection and hover effects only for the text
[Index.cshtml]
<div class="control_wrapper">
<ejs-treeview id="treedata" fullRowNavigable="false" fullRowSelect="false" allowMultiSelection="true">
<e-treeview-fields dataSource="listdata" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded" navigateUrl="navigateUrl"></e-treeview-fields>
</ejs-treeview>
</div>
<style>
/* Active and Hover styles for selected treeview item */
#treedata.e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active > .e-text-content .e-list-text,
#treedata.e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-hover > .e-text-content .e-list-text {
background-color: #0d6efd;
border-color: #0d6efd;
}
/* Hover style for treeview item */
#treedata.e-treeview:not(.e-fullrow-wrap) .e-list-item.e-hover > .e-text-content .e-list-text {
background-color: #e9ecef;
border-color: #e9ecef;
}
/* Icon color for collapsible and expandable tree nodes */
#treedata.e-treeview .e-icon-collapsible::before, .e-treeview .e-icon-expandable::before {
color: #6c757d;
}
/* Active, Focus and Hover styles for treeview items */
#treedata.e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-node-focus > .e-text-content,
#treedata.e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-hover > .e-text-content,
#treedata.e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active > .e-text-content,
#treedata.e-treeview:not(.e-fullrow-wrap) .e-list-item.e-hover > .e-text-content,
#treedata.e-treeview:not(.e-fullrow-wrap) .e-list-item.e-node-focus > .e-text-content {
background-color:inherit;
border: none;
}
</style>
Screenshot:
|
