Column Template in ASP.NET MVC Tree Grid Component

6 Dec 20249 minutes to read

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

@using Syncfusion.EJ2.Grids

@(Html.EJS().TreeGrid("ColumnTemplate").DataSource((IEnumerable<object>)ViewBag.datasource)
            .Columns(col =>
             {
               col.Field("EmployeeID").HeaderText("Employee ID").Width(95).Add();
               col.Field("Name").HeaderText("Name").Width(110).Add();
               col.Field("DOB").HeaderText("DOB").Format("yMd").TextAlign(TextAlign.Right).Width(90).Add();
               col.HeaderText("Year GR").Template("#columnTemplate3").Width(120).TextAlign(TextAlign.Center).Add();

             }).Height(260).Width("auto").ChildMapping("Children").RowHeight(83).RowDataBound("rowDataBound")
               .TreeColumnIndex(0).Render()
)

<script type="text/x-template" id="columnTemplate3">
    <div id="spkwl${EmployeeID}"></div>
</script>

<script>

    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) {

        var 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 ActionResult ColumnTemplate()
{
    var treeData = TreeGridItems.GetTemplateData();
    ViewBag.datasource = treeData;
    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.

  <script id="template" type="text/x-template">
            <div class="template_checkbox">
                ${if(approved)}
                <input type="checkbox" checked> ${else}
                <input type="checkbox"> ${/if}
            </div>
        </script>
@using Syncfusion.EJ2.Grids

@(Html.EJS().TreeGrid("Condition").AllowResizing()
            .DataSource((IEnumerable<object>)ViewBag.datasource)
            .Columns(col =>
             {
               col.Field("TaskId").HeaderText("Task ID").Width(90).TextAlign(TextAlign.Right).Add();
               col.Field("TaskName").HeaderText("Task Name").Width(180).Add();
               col.HeaderText("Approved").Template("#template").TextAlign(TextAlign.Center).Width(120).Add();
               col.Field("Progress").HeaderText("Progress").Width(80).TextAlign(TextAlign.Right).Add();

             }).Height(315).ChildMapping("Children").TreeColumnIndex(1).Render()
)

<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 ActionResult Condition()
{
    var treeData = TreeGridItems.GetTreeData();
    ViewBag.datasource = treeData;
    return View();    
}

Render other components in a column

Tree Grid allows you to render any component in a Column using the Template property. This provides the ability to create custom components or use existing ones from Syncfusion® or third-party libraries.

To render other components in the Tree Grid, ensure the following steps:

Step 1: Provide the HTML content for your custom component using Template property.

     
     col.Field("Priority").HeaderText("Priority").Template("<input type='text' tabindex='1' id='ddlelement' />").Width(100).Add();

Step 2: Use QueryCellInfo event to render the DropDown component on the HTML element placed in Template with the following code.

    function dropdown(args) {
        var ele = args.cell.querySelector("#ddlelement");
        var drop = new ej.dropdowns.DropDownList({ dataSource: dropData, popupHeight: 100, popupWidth: 100, value: args.data["Priority"]});
        drop.appendTo(ele);
    }

Refer to the below complete code example about how to render dropdown component in Tree Grid column.

@(Html.EJS().TreeGrid("TreeGrid").DataSource((IEnumerable<object>)ViewBag.datasource)
      .Columns(col =>
       {
        col.Field("TaskId").HeaderText("Task ID").Width(90).TextAlign(TextAlign.Right).Add();
        col.Field("TaskName").HeaderText("Task Name").Width(180).Add();
        col.Field("StartDate").HeaderText("Start Date").Format("yMd").TextAlign(TextAlign.Right).Width(90).Add();
        col.Field("Duration").HeaderText("Duration").Width(80).TextAlign(TextAlign.Right).Add();
        col.Field("Priority").HeaderText("Priority").Template("<input type='text' tabindex='1' id='ddlelement' />").Width(100).Add();
      }).Height(315).ChildMapping("Children").TreeColumnIndex(1).QueryCellInfo("dropdown").Render()
)

<script>
    let dropData = ["Normal", "Low", "High", "Critical", "Breaker"]; 
    function dropdown(args) {
        var ele = args.cell.querySelector("#ddlelement");
        var drop = new ej.dropdowns.DropDownList({ dataSource: dropData, popupHeight: 100, popupWidth: 100, value: args.data["Priority"]});
        drop.appendTo(ele);
    }
</script>
public ActionResult Index()
{
    var treeData = TreeGridItems.GetTreeData();
    ViewBag.datasource = treeData;
    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.