We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

TreeViewComponent is not rendering properly with nodeTemplate

Thread ID:

Created:

Updated:

Platform:

Replies:

149884 Dec 13,2019 12:19 AM UTC Dec 16,2019 05:19 AM UTC React - EJ 2 3
loading
Tags: Treeview
Porfirio Hernandez
Asked On December 13, 2019 12:19 AM UTC

I'm using the TreeView react component to load N columns (each column is a TreeViewComponent ) each column has a list of cards that we are gonna use with drag and drop functionality between lists.

Below is the main example about how we have the implementation:

getCardTemplate(data){        
        return (<ItemCard cardInfo={data} />);        
    }
render() {
     return (
          <TreeViewComponent ref="refTreeView" id={'tree-column-'+this.state.column.id}
                                                fields={this.state.fields}                                                
                                                nodeTemplate={this.getCardTemplate}
                                                 />
          )
}

We found severals issues:
1.- When is loaded the treeView, the item is rendering with the default template, not with the custom template (ItemCard), so I found the following fix, but not always works:
var tree = document.getElementById("tree-column-"+this.state.column.id).ej2_instances[0];
tree.refresh();

2.- When I tried to add a new Node adding a new card info in this.state.fields.dataSource (where is storage the data list as array), the treview list is updated but is displaying the default again, so I have to execute again tree.refresh() but with this case not always works.

Please could you help me to fix it or give me any suggestion, please?

The component looks awesone, but I have those issues.

Regards



Keerthana Rajendran [Syncfusion]
Replied On December 13, 2019 12:28 PM UTC

Hi Porfirio, 
 
Thanks for contacting Syncfusion support. 
 
 
Query 1 – Component is not rendered with template. 
 
We have prepared a sample based on your requirement to render the template inside the treeview component. Refer the below code snippet. 
 
 <TreeViewComponent ref={(scope) => { this.treeviewObj = scope; }} fields={this.state.fields} nodeTemplate={this.nodeTemplate} cssClass={this.cssClass}/> 
 
 
  nodeTemplate(data) { 
      return (<div> 
          <div className='ename'>{data.name}</div> 
         <ButtonComponent>{data.job}</ButtonComponent> 
      </div>); 
    } 
 
 
 
Query 2 – Render the custom component inside the template of treeview. 
 
Yes, it is possible to render the custom component inside the template. Refer the below code snippet. 
 
    nodeTemplate(data) { 
      return (<div> 
          <div className='ename'>{data.name}</div> 
            <CustomComponent /> 
      </div>); 
    } 
 
 
For your convenience, we have prepared a sample. Refer the below sample link. 
 
Query 3 – Datasource is not updated properly. 
 
In treeview component, fields property does not support two-way binding. When you update the dataSource using state, it will not be updated in treeview dataSource. In that case, you can update the dataSource of the treeview element using fields property.  
 
Refer to the below code snippet. 
<ButtonComponent onClick={this.UpdateDatasource.bind(this)} cssClass="e-primary">Update Datasource</ButtonComponent> 
 
 UpdateDatasource() { 
      this.treeviewObj.fields.dataSource = this.employees1; 
    } 
 
 
 
If we misunderstand your requirement, please share the additional details regarding your requirement. This will helpful for us to resolve your issue earlier. 
 
 
Regards, 
Keerthana.  


Porfirio Hernandez
Replied On December 13, 2019 05:30 PM UTC

Hi Keerthana, thank you for your response.

I have implemented the following based in the Query 3:

- The data is storage in a parent component, the child (TreeViewComponentColumn) is receiving the data by props using the componentDidUpdate event, I'm using the state only to fill the datasource the first time, this way works for me now.

componentDidUpdate(prevPropsprevState) {
   if (this.props.column && !_.isEqual(this.props.columnprevProps.column)){
      //Only is required to update the TreeView datasource (not the state)
      this.treeviewObj.fields.dataSource = this.getDataSource(this.props);                    
   }
}

Thank you soo much.
Have a great day!

Keerthana Rajendran [Syncfusion]
Replied On December 16, 2019 05:19 AM UTC

Hi Porfirio, 
 
Most welcome. We are glad to hear that the provided solution helped you to achieve your requirement. Please get back to us if you need any further assistance on this 
 
Regards, 
Keerthana. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon