Detail Template in ASP.NET MVC Tree Grid Component

21 Dec 20222 minutes to read

The detail template provides additional information about a particular row. By expanding the parent row the child rows are expanded along with their detail template. The detailTemplate property accepts either the template string or HTML element ID.

@Html.EJS().TreeGrid("DefaultFunctionalities").DataSource((IEnumerable<object>)ViewBag.datasource).Columns(col =>
    {
        col.Field("Name").HeaderText("First Name").Width(160).Add();
        col.Field("DOB").HeaderText("DOB").Width(85).Type("date").Format("yMd").TextAlign(TextAlign.Right).Add();
        col.Field("Designation").HeaderText("Designation").Width(147).Add();
        col.Field("EmpID").HeaderText("EmployeeID").Width(125).Add();
        col.Field("Country").HeaderText("Country").Width(148).Add();
    }).Height(335).ChildMapping("Children").TreeColumnIndex(0).DetailTemplate("#detailtemplate").Render()

    <script id="detailtemplate" type="text/x-template">
        <div style="position: relative; display: inline-block; float: left; font-weight: bold; width: 10%;padding:5px 4px 2px 27px;">
            <img src="../Content/images/treegrid/${FullName}.png" alt="${FullName}" />
        </div>
        <div style="padding-left: 10px; display: inline-block; width: 66%; text-wrap: normal;font-size:13px;font-family:'Segoe UI';">
            <div class="e-description" style="word-wrap: break-word;">
                <b>${Name}</b> was born on ${DOB.toLocaleDateString()}. Now lives at ${Address}, ${Country}. ${Name} holds a position of <b>${Designation}</b> in our WA department, (Seattle USA).
            </div>
            <div class="e-description" style="word-wrap: break-word;margin-top:5px;">
                <b style="margin-right:10px;">Contact:</b>${Contact}
            </div>
        </div>
    </script>
public IActionResult DetailTemplate()
        {
            ViewBag.datasource = TreeData.GetTemplateData();
            return View();
        }

NOTE

You can refer to our ASP.NET MVC Tree Grid feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET MVC Tree Grid example to knows how to present and manipulate data.