How to show the images in treeview on expand and collapse nodes in react.js? Important

[testuser]

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.

Attachment: tree_new_53bc5103.zip

[Keerthana Rajendran]

Hi Customer, 

 

Thanks for contacting Syncfusion support. 

 

We checked your query and understood that you would like to show images in expand/collapse icon of TreeView. Based on the shared details(code, screenshot), we noticed that Syncfusion TreeView is not used in your end.  

 

So, we request you to follow the general blogs for general queries. 

 

https://stackoverflow.com/questions/59819211/how-to-change-the-collapse-expand-icon-to-right-side-of-treeview-of-material 

 

We also suggest you to have a look on our demo and UG links below to know about Syncfusion React TreeView component.  

 

https://ej2.syncfusion.com/react/demos/#/bootstrap5/treeview/default 

 

https://ej2.syncfusion.com/react/documentation/treeview/how-to/customize-the-expand-and-collapse-icons/ 

 

Please get back to us if you need further assistance with Syncfusion components. 

 

Regards, 

Keerthana R. 

[testuser]

Thanks Keerthana. 

I looked the links and demo that you provided. I am still not sure how to make the changes in my react code.

Please modify the code I provided. Its unordered list. In place of unordered list, I want plus, minus and paper images.

plus image for collapse, minus for expand and paper is for the last node .

Thanks

[Keerthana Rajendran]

Hi Customer, 

 

As mentioned earlier, we couldn’t find any Syncfusion TreeView code in your attached file. However, we have prepared a React sample for including “plus” and “minus” icons for Syncfusion TreeView. 

 

Refer to the following code. 

 

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> 

    ); 

  } 

} 

 

CSS: 

 

.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; 

} 

 

Refer to the sample link for Syncfusion React TreeView. 

 

https://stackblitz.com/edit/react-treeview-icons?file=index.css 

 

Using nodeTemplate option, the required icons(paper icon) or HTML element can be added within TreeView node. 

 

https://ej2.syncfusion.com/react/documentation/treeview/template/ 

 

https://ej2.syncfusion.com/react/demos/#/bootstrap5/treeview/template 

 

Refer to the following UG link for icons library available with Syncfusion. 

 

https://ej2.syncfusion.com/react/documentation/appearance/icons/#material 

 

Note: We have shared the response based on Syncfusion components. Please revert if you encounter any issues with Syncfusion components. 

 

Regards, 

Keerthana R.