How to get a treeview to remain expanded

Question

Hi,

Im using Treeview within the Sidebar Component and would like the treeview to remain expanded after a refresh. I've added "expanded: true" in the dataSource, but the treeview still collapse when i refresh the page. Please assist.

Thank you.

Sowmiya Padmanaban · Answer

Hi Koh, 
 
Greetings from Syncfusion support. 
 
We have checked your reported problem with TreeView component. We were unable to reproduce it from our end with your provided information. TreeView component will remain expanded even after page refresh, when setting expanded field as true in the datasource property. 
 
Refer the below code snippet. 






 this.data = [ 
             
            { 
                nodeId: '04', nodeText: 'Components', iconCss: 'icon-th icon',expanded:true, 
                nodeChild: [ 
                    { nodeId: '04-01', nodeText: 'Calendar', iconCss: 'icon-circle-thin icon' }, 
                    { nodeId: '04-02', nodeText: 'DatePicker', iconCss: 'icon-circle-thin icon' }, 
                    { nodeId: '04-03', nodeText: 'DateTimePicker', iconCss: 'icon-circle-thin icon' }, 
                    { nodeId: '04-04', nodeText: 'DateRangePicker', iconCss: 'icon-circle-thin icon' }, 
                    { nodeId: '04-05', nodeText: 'TimePicker', iconCss: 'icon-circle-thin icon' }, 
                    { nodeId: '04-06', nodeText: 'SideBar', iconCss: 'icon-circle-thin icon' } 
                ] 
            }, 
            { 
                nodeId: '05', nodeText: 'API Reference', iconCss: 'icon-code icon', expanded: true, 
                nodeChild: [ 
                    { nodeId: '05-01', nodeText: 'Calendar', iconCss: 'icon-circle-thin icon' }, 
                    { nodeId: '05-02', nodeText: 'DatePicker', iconCss: 'icon-circle-thin icon' }          
                ] 
            }, 
        ];  
 
For your reference, we have prepared a sample for rendering the TreeView inside the Sidebar component. 
 
https://stackblitz.com/edit/react-lkbjo4?file=index.js 
 
Check the below video footage, TreeView remain expanded after page refresh. 
 
https://www.syncfusion.com/downloads/support/directtrac/general/ze/ScreenCapture_5-21-2020_11.02.55_AM.mp4140924223.zip 
 
Refer the below links to know more about the TreeView component. 
 
UG Documentation- https://ej2.syncfusion.com/react/documentation/treeview/getting-started/ 
 
Demo link- https://ej2.syncfusion.com/react/demos/#/material/treeview/default/ 
 
API Reference- https://ej2.syncfusion.com/react/documentation/api/treeview/ 
 
If the issue still persist. Could you please share the following details. It will help us to check your problem and to provide you the prompt solution. 
 
·        Have you added any custom functionality in the  nodeExpanding and nodeCollapsing event? 
 
·        Share us code sample for TreeView component definition in your application. 
 
·        If possible, please share us issue replicated sample or video footage for your issue reproducing. 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P

Koh Chee Kiong · Answer

Hi,

The problem i'm still experiencing is upon the initial load, the parent node is collapsed. But what i was expecting is to have all the nodes expanded.

Below is the code snippet for the treeview component in my application. Please advice.

Muthukrishnan Kandasamy · Answer

Hi Koh Chee, 
 
Thanks for the update. 
 
We have validated your requirements in TreeView component. We can expand the TreeView component all nodes using expandAll method. We can use this expandAll method after loading the all tree node in the DOM. In the below example, we have used created event for performing the expand functionality. Please refer to the below code block. 
 




    onCreated(){ 
      this.treeObj.expandAll(); 
    } 
 
 
 
We suspect that, you have updated tree view data source dynamically using variable chapterField, for updating the tree data source we need to redefine the tree vide fields property.  Please refer the below code block. 
 




 
onCreated(){ 
      this.data.push({ nodeId: '25', nodeText: 'Test One', iconCss: 'icon-thumbs-up-alt icon' }); 
      this.fields = { dataSource: this.data, id: 'nodeId', text: 'nodeText', child: 'nodeChild' }; 
      this.treeObj.refresh(); 
      this.treeObj.expandAll(); 
    } 
 
 
 
We have prepared sample for your convenience, in this sample we have added new tree data in the created event and redefined the tree view fields property. Please refer to the below link for the sample. 
 
https://stackblitz.com/edit/react-sidebar-tree-expand 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Muthukrishnan K

Koh Chee Kiong · Answer

Hi,Thank you, This works! Another question, How to change the font color of the treeview in the sidebar?

Sowmiya Padmanaban · Answer

Hi Koh Chee,  
 
We can change the default color of  node in TreeView component. For this requirement, we can add the custom class for TreeView control, using this custom class we can add the styles for text and icon element. please refer the below code block. 
 




 <TreeViewComponent id='main-treeview' ref={(scope) => { this.treeObj = scope; }} cssClass ={"custom"} fields={this.fields} created={this.onCreated.bind(this)} expandOn='Click'/> 
 
/*Change the TreeView text and icons */ 
.custom .e-list-icon,.custom .e-list-text,.e-custom .e-icons { 
       color:blue !important; 
} 
 
Refer the sample link below. 
 
https://stackblitz.com/edit/react-sidebar-tree-expand-ykxufj?file=index.css 
 
Refer the below link to know more about the customization of TreeView component. 
 
https://ej2.syncfusion.com/react/documentation/treeview/how-to/customize-the-tree-nodes-based-on-levels/ 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P