How to show the images in treeview on expand and collapse nodes in react.js?
1 Reply
SIGN IN To post a reply.
Hi, I am new to react.js. Please help me. I create a treeview control using react.js from XML file. On page load, its showing two main parent nodes only (Collapse plus image). Clicking on + or node click expand node. Parent node will have minus image. All the nodes having children who are expanded will have minus image.
Collapse nodes plus image
expand nodes having child will have minus image.
last node will have paper image.
Please find the code in the attachment with the images and tree.gif displays how tree looks like.
Please modify the code, how to use images. Currently it's showing unordered list.
Thanks for all the help.
|
export class Default extends SampleBase {
constructor() {
super(...arguments);
this.data = dataSource;
this.fields = {
dataSource: this.data.defaultData,
id: "id",
text: "name",
child: "subChild"
};
this.style = "custom";
}
render() {
return (
<div className="control-pane">
<div className="control-section">
<div className="tree-control_wrapper">
<TreeViewComponent fields={this.fields} cssClass={this.style} />
</div>
</div>
</div>
);
}
} |
|
.custom.e-treeview .e-list-item .e-icon-expandable::before {
content: '\e556';
font-size: 13px;
}
.custom.e-treeview .e-list-item .e-icon-collapsible::before {
content: '\e554';
font-size: 13px;
} |
