Template in EJ2 JavaScript TreeView control

5 Mar 20258 minutes to read

The TreeView control allows you to customize the look of TreeView nodes by using the nodeTemplate property. This property accepts either a template string or an HTML element ID.

In the following sample, employee information such as employee photo, name, and designation has been included using the nodeTemplate property.

The template expression should be provided inside the ${...} interpolation syntax.

index.js
index.html
index.css
ej.base.enableRipple(true);

var employees = [
    { id: 1, name: 'Steven Buchanan', eimg: '10', job: 'CEO', hasChild: true, expanded: true },
    { id: 2, pid: 1, name: 'Laura Callahan', eimg: '2', job: 'Product Manager', hasChild: true },
    { id: 3, pid: 2, name: 'Andrew Fuller', eimg: '7', job: 'Team Lead', hasChild: true },
    { id: 4, pid: 3, name: 'Anne Dodsworth', eimg: '1', job: 'Developer' },
    { id: 5, pid: 1, name: 'Nancy Davolio', eimg: '4', job: 'Product Manager', hasChild: true },
    { id: 6, pid: 5, name: 'Michael Suyama', eimg: '9', job: 'Team Lead', hasChild: true },
    { id: 7, pid: 6, name: 'Robert King', eimg: '8', job: 'Developer ' },
    { id: 8, pid: 7, name: 'Margaret Peacock', eimg: '6', job: 'Developer' },
    { id: 9, pid: 1, name: 'Janet Leverling', eimg: '3', job: 'HR' },
];

var treeObj = new ej.navigations.TreeView({
    fields: { dataSource: employees, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' },
    cssClass: 'custom',
    nodeTemplate: '#treeTemplate'
});
treeObj.appendTo('#tree');
<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/33.2.3/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-navigations/styles/bootstrap5.3.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/33.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    <div id="container">
        <div id="treeparent">
            <div id="tree"></div>
        </div>
    </div>
    <script id="treeTemplate" type="text/x-template">
        <div>
            <img class="eimage" src= "https://ej2.syncfusion.com/demos/src/treeview/images/employees/${eimg}.png" alt="${eimg}" />
            <div class="ename">${name}</div>
            <div class="ejob">${job}</div>
        </div>
    </script>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
    <style>
        #treeparent {
            display: block;
            max-width: 450px;
            max-height: 350px;
            margin: auto;
            overflow: auto;
            border: 1px solid #dddddd;
            border-radius: 3px;
        }

        .custom .e-list-item .e-fullrow {
            height: 72px;
        }

        .custom .e-list-item .e-list-text {
            line-height: normal;
        }

        .eimage {
            float: left;
            padding: 11px 16px 11px 0;
        }

        .ename {
            font-size: 16px;
            padding: 14px 0 0;
        }

        .ejob {
            font-size: 14px;
            opacity: .87;
        }
    </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%;
}

Search docs

Ask Syncfusion AI Assistant

Search docs

Ask Syncfusion AI Assistant

How can I help you?

Template in EJ2 JavaScript TreeView control

See Also