Auto hide/show expand collapse icon in EJ2 TypeScript TreeView control

28 Jan 20258 minutes to read

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

import { enableRipple } from '@syncfusion/ej2-base';
import { TreeView } from '@syncfusion/ej2-navigations';
enableRipple(true);

/**
 * TreeView Auto hide/show expand/collapse icons
 */

// List data source for TreeView control
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' }
];

// Renders TreeView
let tree1: TreeView = new TreeView({
  fields: { dataSource: countries, id: 'id', text: 'name', parentID: 'pid', hasChildren: 'hasChild' },
  created: onCreate
});
tree1.appendTo('#tree');

function onCreate() {
  let treeElement: Element = document.getElementById("tree") as HTMLElement;
  let collapse: NodeListOf<Element> = treeElement.querySelectorAll('.e-icons.e-icon-collapsible');
  let expand: NodeListOf<Element> = treeElement.querySelectorAll('.e-icons.e-icon-expandable');
  hideIcon(expand, collapse);
  treeElement.addEventListener('mouseenter', (event: any) => {
    showIcon(expand, collapse);
  })
  treeElement.addEventListener('mouseleave', (event: any) => {
    hideIcon(expand, collapse);
  })
}

// hides expand/collapse icon on hovering the mouse
function hideIcon(expand: NodeListOf<Element>, collapse: NodeListOf<Element>) {
  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: NodeListOf<Element>, collapse: NodeListOf<Element>) {
  for (let i: number = 0; i < collapse.length; i++) {
    collapse[i].setAttribute('style', "visibility: visible");
  }
  for (let j: number = 0; j < expand.length; j++) {
    expand[j].setAttribute('style', "visibility: visible");
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 for 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 TreeView UI Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.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-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='loader'>Loading....</div>
    <div id='container'>
        <div id='treeparent'>
            <div id="tree"></div>
        </div>
    </div>
    <style>
        #treeparent {
            display: block;
            max-width: 350px;
            max-height: 350px;
            margin: auto;
            overflow: auto;
            border: 1px solid #dddddd;
            border-radius: 3px;
        }
    </style>
</body>

</html>
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: 'Helvetica Neue', 'calibiri';
  font-size: 14px;
  top: 45%;
  left: 45%;
}