Search results

Template

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

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

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

tagHelper
template-core.cs
template-mvc.cs
templatemodel.cs
@section ControlsSection{
    <div class="control-section">
            <div class="control_wrapper">
                <ejs-treeview id="treedata" cssClass="custom" nodeTemplate="@Html.Raw("<div><img class=\"eimage\" src=\"https://ej2.syncfusion.com/demos/src/images/employees/${eimg}.png\" alt=\"employee\"/><div class=\"ename\"> ${name} </div><div class=\"ejob\"> ${designation} </div></div>")">
                    <e-treeview-fields dataSource="ViewBag.data" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"></e-treeview-fields>
                </ejs-treeview>

            </div>
        </div>
}
<style>
    .custom.e-treeview .e-fullrow {
        height: 72px;
    }

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

    .eimage {
        float: left;
        padding: 11px 16px 11px 0;
        height: 48px;
        width: 48px;
        box-sizing: content-box;
    }

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

    .ejob {
        font-size: 14px;
        opacity: .87;
    }
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2CoreSampleBrowser.Models;

namespace EJ2CoreSampleBrowser.Controllers.TreeView
{
    public partial class TreeViewController : Controller
    {

        public IActionResult Template()
        {
            ViewBag.data = new treeviewTemplates().employeesData();
            return View();
        }
    }
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2CoreSampleBrowser.Models;
using Syncfusion.EJ2.Navigations;

namespace EJ2CoreSampleBrowser.Controllers.TreeView
{
    public partial class TreeViewController : Controller
    {

        public IActionResult Template()
        {
           TreeViewFieldsSettings templateFields = new TreeViewFieldsSettings();
            TreeviewTemplate treeviewTemplate = new TreeviewTemplate();
            templateFields.DataSource = treeviewTemplate.getTreeviewTemplate();
            templateFields.HasChildren = "HasChild";
            templateFields.Expanded = "Expanded";
            templateFields.Selected = "Selected";
            templateFields.Id = "id";
            templateFields.ParentID = "pid";
            templateFields.Text = "name";
            ViewBag.templateFields = templateFields;
            return View();
        }
    }
}
public class TreeviewTemplate
        {
            public string name { get; set; }
            public string count { get; set; }
            public int id { get; set; }

            public int pid { get; set; }
            public bool HasChild { get; set; }
            public bool Expanded { get; set; }

            public bool Selected { get; set; }
            public List<TreeviewTemplate> getTreeviewTemplate()
            {
                List<TreeviewTemplate> localData = new List<TreeviewTemplate>();
                localData.Add(new TreeviewTemplate { id = 1, name = "Favorites", HasChild = true });
                localData.Add(new TreeviewTemplate { id = 2, pid = 1, name = "Sales Reports", count = "4" });
                localData.Add(new TreeviewTemplate { id = 3, pid = 1, name = "Sent Items" });
                localData.Add(new TreeviewTemplate { id = 4, pid = 1, name = "Marketing Reports ", count = "6" });
                localData.Add(new TreeviewTemplate { id = 5, name = "My Folder", HasChild = true, Expanded = true });
                localData.Add(new TreeviewTemplate { id = 6, pid = 5, name = "Inbox", Selected = true, count = "20" });
                localData.Add(new TreeviewTemplate { id = 7, pid = 5, name = "Drafts", count = "5" });
                localData.Add(new TreeviewTemplate { id = 8, pid = 5, name = "Deleted Items" });
                localData.Add(new TreeviewTemplate { id = 9, pid = 5, name = "Sent Items" });
                localData.Add(new TreeviewTemplate { id = 10, pid = 5, name = "Sales Reports", count = "4" });
                localData.Add(new TreeviewTemplate { id = 11, pid = 5, name = "Marketing Reports", count = "6" });
                localData.Add(new TreeviewTemplate { id = 12, pid = 5, name = "Outbox" });
                return localData;
            }
        }

Output be like the below.

TreeView Sample

See Also