Hi Issam,
Thanks for contacting Syncfusion support.
We can achieve your requirement (“apply custom CSS to all nodes that have children’s”) in TreeView control from application level by using cssClass property. It sets the root CSS class for TreeView which allows to customize the appearance.
We can apply custom CSS to all nodes that have children based on the “.e-icon” class. This class is present in sibling element of a node which have children. We can also apply the custom CSS to nodes by level based on the li element “.e-item” class. Please refer to the below code example,
|
[Script]
$("#customtree").ejTreeView({
fields: { id: "id", parentId: "pid", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" },
cssClass: "mytree", //apply custom css class to TreeView
});
[CSS]
<style>
/*apply custom css to all nodes that have children's*/
.mytree .e-text-wrap .e-icon + .e-text {
font-weight: bold;
}
/*apply custom css to first level*/
.mytree > ul > .e-item > .e-text-wrap .e-text {
color: brown;
}
/*apply custom css to second level*/
.mytree > ul > .e-item > ul > .e-item > .e-text-wrap .e-text {
color: darkmagenta;
}
</style>
|
Please let us know whether the provided sample is helpful in achieving your requirement. If not, get back to us with more information.
Regards,
Piramanayagam R
