Column Template in ASP.NET Core Tree Grid Component

21 Dec 20229 minutes to read

The column template has options to display custom element instead of a field value in the column.

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.dataSource" rowDataBound="rowDataBound" height="359" childMapping="Children" treeColumnIndex="0" rowHeight="83" width="auto">
    <e-treegrid-columns>
        <e-treegrid-column field="EmpID" headerText="Employee ID" width="95"></e-treegrid-column>
        <e-treegrid-column field="Name" headerText="Name" width="120"></e-treegrid-column>
        <e-treegrid-column field="DOB" headerText=" DOB" textAlign="Right" format="yMd" type="date" width="90"></e-treegrid-column>
        <e-treegrid-column headerText="Year GR" textAlign="Center" width="120" template="#columnTemplate"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>

    <script type="text/x-template" id="columnTemplate">
        <div id="spkwl${EmployeeID}"></div>
    </script>
<script>
     var lineData = [
            [0, 6, 4, 1, 3, 2, 5],
            [5, 4, 6, 3, 1, 2, 0],
            [6, 4, 0, 3, 2, 5, 1],
            [4, 6, 3, 0, 1, 2, 5],
            [3, 5, 6, 4, 0, 1, 2],
            [1, 3, 4, 2, 5, 0, 6],
            [2, 4, 0, 3, 5, 6, 1],
            [5, 4, 6, 3, 1, 2, 0],
            [0, 6, 4, 1, 3, 2, 5],
            [6, 4, 0, 3, 2, 5, 1],
            [4, 6, 3, 0, 1, 2, 5],
            [3, 5, 6, 4, 0, 1, 2],
            [1, 3, 4, 2, 5, 0, 6],
            [2, 4, 0, 3, 5, 6, 1],
            [5, 4, 6, 3, 1, 2, 0],
            [0, 6, 4, 1, 3, 2, 5],
            [6, 4, 0, 3, 2, 5, 1],
            [4, 6, 3, 0, 1, 2, 5],
            [2, 4, 0, 3, 5, 6, 1],
            [3, 5, 6, 4, 0, 1, 2],
            [1, 3, 4, 2, 5, 0, 6]   
                ];
        var columnData = [
            [0, 6, -4, 1, -3, 2, 5],
            [5, -4, 6, 3, -1, 2, 0],
            [6, 4, 0, 3, -2, 5, 1],
            [4, -6, 3, 0, 1, -2, 5],
            [3, 5, -6, -4, 0, 1, 2],
            [1, -3, 4, -2, 5, 0, 6],
            [2, 4, 0, -3, 5, -6, 1],
            [5, 4, -6, 3, 1, -2, 0],
            [0, -6, 4, 1, -3, 2, 5],
            [6, 4, 0, -3, 2, -5, 1],
            [4, 6, -3, 0, 1, 2, 5],
            [3, -5, -6, 4, 0, 1, 2],
            [1, 3, -4, -2, 5, 0, 6],
            [2, -4, 0, -3, 5, 6, 1],
            [5, 4, -6, 3, 1, -2, 0],
            [0, 6, 4, -1, -3, 2, 5],
            [6, -4, 0, -3, 2, 5, 1],
            [4, 6, -3, 0, -1, 2, 5],
            [6, 4, 0, -3, 2, -5, 1],
            [3, 5, 6, -4, 0, 1, 2],
            [1, 3, -4, 2, -5, 0, 6]
        ];

        function rowDataBound(args) {
            let winloss = new ej.charts.Sparkline({
                height: '50px',
                width: '150px', 
                type: 'WinLoss',
                valueType: 'Numeric',
                fill: '#3C78EF',
                tiePointColor: 'darkgray',
                negativePointColor: '#f7a816',
                dataSource: columnData[args.data.EmployeeID]
            });
            winloss.appendTo(args.row.querySelector('#spkwl' + args.data.EmployeeID));
        }
</script>
public IActionResult Index()
{
    var tree = TreeData.GetTemplateData();
    ViewBag.dataSource = tree;
    return View();
}

NOTE

TreeGrid actions such as editing, filtering and sorting etc. will depend upon the column field. If the field is not specified in the template column, the treegrid actions cannot be performed.

Using condition template

You can render the template elements based on condition.

In the following code, checkbox is rendered based on Approved field value.

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.data" childMapping="Children" height="315" treeColumnIndex="1">
    <e-treegrid-columns>
        <e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="90"></e-treegrid-column>
        <e-treegrid-column field="TaskName" headerText="Task Name" width="180"></e-treegrid-column>
        <e-treegrid-column headerText="Approved" template="#template" textAlign="Right" width="90"></e-treegrid-column>
        <e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="80"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>

<script id="template" type="text/x-template">
    <div class="template_checkbox">
        ${if(Approved)}
        <input type="checkbox" checked>
        ${else}
        <input type="checkbox"> ${/if}
    </div>
</script>
public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.data = tree;
    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.