Auto hide show expand collapse icon in React TreeView component

28 Feb 202516 minutes to read

You can display the expand icon by hovering the mouse over TreeView and hide the expand icon by leaving the mouse from TreeView. Refer to the following code sample to hide/show the expand/collapse icon automatically using the mouse.

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { TreeViewComponent } from '@syncfusion/ej2-react-navigations';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
function App() {
    // Data source for TreeView component
    let countries = [
        { id: 1, name: 'India', hasChild: true },
        { id: 2, pid: 1, name: 'Assam' },
        { id: 3, pid: 1, name: 'Bihar' },
        { id: 4, pid: 1, name: 'Tamil Nadu' },
        { id: 6, pid: 1, name: 'Punjab' },
        { id: 7, name: 'Brazil', hasChild: true },
        { id: 8, pid: 7, name: 'Paraná' },
        { id: 9, pid: 7, name: 'Ceará' },
        { id: 10, pid: 7, name: 'Acre' },
        { id: 11, name: 'France', hasChild: true },
        { id: 12, pid: 11, name: 'Pays de la Loire' },
        { id: 13, pid: 11, name: 'Aquitaine' },
        { id: 14, pid: 11, name: 'Brittany' },
        { id: 15, pid: 11, name: 'Lorraine' },
        { id: 16, name: 'Australia', hasChild: true },
        { id: 17, pid: 16, name: 'New South Wales' },
        { id: 18, pid: 16, name: 'Victoria' },
        { id: 19, pid: 16, name: 'South Australia' },
        { id: 20, pid: 16, name: 'Western Australia' },
        { id: 21, name: 'China', hasChild: true },
        { id: 22, pid: 21, name: 'Guangzhou' },
        { id: 23, pid: 21, name: 'Shanghai' },
        { id: 24, pid: 21, name: 'Beijing' },
        { id: 25, pid: 21, name: 'Shantou' }
    ];
    let field = { dataSource: countries, id: 'id', text: 'name', parentID: 'pid', hasChildren: 'hasChild' };
    let treeObj;
    function onCreate() {
        let collapse = treeObj.element.querySelectorAll('.e-icons.e-icon-collapsible');
        let expand = treeObj.element.querySelectorAll('.e-icons.e-icon-expandable');
        hideIcon(expand, collapse);
        treeObj.element.addEventListener('mouseenter', (event) => {
            showIcon(expand, collapse);
        });
        treeObj.element.addEventListener('mouseleave', (event) => {
            hideIcon(expand, collapse);
        });
    }
    // hides expand/collapse icon on hovering the mouse
    function hideIcon(expand, collapse) {
        for (let i = 0; i < collapse.length; i++) {
            collapse[i].setAttribute('style', 'visibility: hidden');
        }
        for (let j = 0; j < expand.length; j++) {
            expand[j].setAttribute('style', 'visibility: hidden');
        }
    }
    // shows expand/collapse icon while leaving the mouse
    function showIcon(expand, collapse) {
        for (let i = 0; i < collapse.length; i++) {
            collapse[i].setAttribute('style', "visibility", "");
        }
        for (let j = 0; j < expand.length; j++) {
            expand[j].setAttribute('style', "visibility", "");
        }
    }
    return (<div className='control-pane'>
      <div className='control-section'>
      <div className='control_wrapper'>
          {/* Render TreeView */}
          <TreeViewComponent fields={field} ref={(treeview) => { treeObj = treeview; }} created={onCreate.bind(this)}/>
      </div>
      </div>
    </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {TreeViewComponent} from '@syncfusion/ej2-react-navigations';
import {enableRipple} from '@syncfusion/ej2-base';
enableRipple(true);

function App() {

   // Data source for TreeView component
  let countries: { [key: string]: Object }[]= [
         { id: 1, name: 'India', hasChild: true },
    { id: 2, pid: 1, name: 'Assam' },
    { id: 3, pid: 1, name: 'Bihar' },
    { id: 4, pid: 1, name: 'Tamil Nadu' },
    { id: 6, pid: 1, name: 'Punjab' },
    { id: 7, name: 'Brazil', hasChild: true },
    { id: 8, pid: 7, name: 'Paraná' },
    { id: 9, pid: 7, name: 'Ceará' },
    { id: 10, pid: 7, name: 'Acre' },
    { id: 11, name: 'France', hasChild: true },
    { id: 12, pid: 11, name: 'Pays de la Loire' },
    { id: 13, pid: 11, name: 'Aquitaine' },
    { id: 14, pid: 11, name: 'Brittany' },
    { id: 15, pid: 11, name: 'Lorraine' },
    { id: 16, name: 'Australia', hasChild: true },
    { id: 17, pid: 16, name: 'New South Wales' },
    { id: 18, pid: 16, name: 'Victoria' },
    { id: 19, pid: 16, name: 'South Australia' },
    { id: 20, pid: 16, name: 'Western Australia' },
    { id: 21, name: 'China', hasChild: true },
    { id: 22, pid: 21, name: 'Guangzhou' },
    { id: 23, pid: 21, name: 'Shanghai' },
    { id: 24, pid: 21, name: 'Beijing' },
    { id: 25, pid: 21, name: 'Shantou' }
    ];
    let field:Object ={ dataSource: countries, id: 'id', text: 'name', parentID: 'pid', hasChildren: 'hasChild' };
    let treeObj: TreeViewComponent;

     function onCreate(): void {
        let collapse: NodeListOf<Element> = treeObj.element.querySelectorAll('.e-icons.e-icon-collapsible');
        let expand: NodeListOf<Element> = treeObj.element.querySelectorAll('.e-icons.e-icon-expandable');
        hideIcon(expand, collapse);
        treeObj.element.addEventListener('mouseenter', (event:any) => {
          showIcon(expand, collapse);
        });
        treeObj.element.addEventListener('mouseleave', (event:any) => {
          hideIcon(expand, collapse);
        });
    }
    // hides expand/collapse icon on hovering the mouse
     function hideIcon(expand: any,collapse: any): void {
        for(let i: number = 0; i < collapse.length; i++ ){
          collapse[i].setAttribute('style','visibility: hidden');
        }
        for(let j: number = 0; j < expand.length; j++ ){
          expand[j].setAttribute('style','visibility: hidden');
        }
    }

  // shows expand/collapse icon while leaving the mouse
   function showIcon(expand: any, collapse: any): void {
      for(let i: number = 0; i < collapse.length; i++ ){
        collapse[i].setAttribute('style',"visibility", "");
      }
      for(let j: number = 0; j < expand.length; j++ ){
        expand[j].setAttribute('style',"visibility", "");
      }
  }
  return (
    <div className = 'control-pane'>
      <div className='control-section'>
      <div className='control_wrapper'>
          {/* Render TreeView */}
          <TreeViewComponent fields={field}  ref={(treeview) => { treeObj = treeview as TreeViewComponent; }} created={onCreate.bind(this)}/>
      </div>
      </div>
    </div>
  )
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React TreeView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="style.css" rel="stylesheet"/>
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='treeparent'>
        <div id='sample'>
            <div id='loader'>Loading....</div>
        </div>
    </div>
</body>

</html>
#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

#treeparent {
    display: block;
    max-width: 350px;
    max-height: 350px;
    margin: auto;
    overflow: auto;
    border: 1px solid #dddddd;
    border-radius: 3px;
}