TreeViewComponent is not rendering properly with nodeTemplate

[Porfirio Hernandez]

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]

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

    } 

 

 

Sample link: https://stackblitz.com/edit/react-anxon2?file=index.js 

 

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. 

https://stackblitz.com/edit/react-anxon2-smis8z?file=index.js 

 

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; 

    } 

 

 

Refer the sample link: https://stackblitz.com/edit/react-anxon2?file=index.js 

 

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]

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(prevProps, prevState) {

   if (this.props.column && !_.isEqual(this.props.column, prevProps.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]

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.