Detail Template in ASP.NET CORE Tree Grid Component

21 Dec 20223 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.

<ejs-treegrid id="TreeGrid" dataSource="ViewBag.datasource" height="335" childMapping="Children" treeColumnIndex="0" detailTemplate="#detailtemplate">
    <e-treegrid-columns>
        <e-treegrid-column field="Name" headerText="First Name" width="160"></e-treegrid-column>
        <e-treegrid-column field="DOB" headerText="DOB" width="85" type="date" format="yMd" textAlign='Right'></e-treegrid-column>
        <e-treegrid-column field="Designation" headerText="Designation" width="147"></e-treegrid-column>
        <e-treegrid-column field="EmpID" headerText="EmployeeID" width="125"></e-treegrid-column>
        <e-treegrid-column field="Country" headerText="Country" width="148"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>

    <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="/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 Core Tree Grid feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET Core Tree Grid example ASP.NET Core Tree Grid example to knows how to present and manipulate data.