Search results

Auto show/hide expand/collapse icons in JavaScript (ES5) TreeView control

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.

Source
Preview
index.js
index.html
index.css
/**
 * TreeView Auto hide/show expand/collapse icons
 */

// Hierarchical data source for TreeView component
 var 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' }
    
];

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

function onCreate(){
  var treeElement = document.getElementById("tree");
  var collapse = treeElement.querySelectorAll('.e-icons.e-icon-collapsible');
  var expand = treeElement.querySelectorAll('.e-icons.e-icon-expandable');
  hideIcon(expand, collapse);
  document.getElementById("tree").addEventListener('mouseenter',function(e) {
    showIcon(expand, collapse);
  })
  document.getElementById("tree").addEventListener('mouseleave',function(e) { 
   hideIcon(expand, collapse);
  })
}

// hides expand/collapse icon on hovering the mouse
function hideIcon(expand, collapse) {
for(var i = 0; i < collapse.length; i++ ){
    collapse[i].setAttribute('style','visibility: hidden');
  }
  for(var 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(var i = 0; i < collapse.length; i++ ){
    collapse[i].setAttribute('style',"visibility", "");
  }
  for(var j= 0; j < expand.length; j++ ){
    expand[j].setAttribute('style',"visibility", "");
  }
}
<!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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="treeparent">
            <div id="tree"></div>
        </div>
    </div>



<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</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%;
}

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