Rows in ASP.NET CORE Tree Grid Component

14 Nov 20223 minutes to read

The row represents record details fetched from data source.

Customize rows

You can customize the appearance of a row by using the rowDataBound event. The rowDataBound event triggers for every row. In the event handler, you can get the args which contains details of the row.

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.datasource" height="275" enableHover="false" rowDataBound="rowDataBound" childMapping="Children" 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 field="StartDate" headerText="Start Date" textAlign="Right"
            format="yMd" 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>
    function rowDataBound(args) {
        if (args.data['Duration'] > 5) {
            args.row.style.background = '#336c12';
        } else if (args.data['Duration'] < 5) {
            args.row.style.background = '#7b2b1d';
        }
    }
</script>
public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    return View();
}

Styling alternate rows

You can change the treegrid’s alternative rows’ background color by overriding the .e-altrow class.

.e-treegrid .e-altrow {
    background-color: #ffd800;
}

Refer to the following example.

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.datasource" height="275" enableHover="false" childMapping="Children" 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 field="StartDate" headerText=" Start Date" textAlign="Right"
            format="yMd" width="90"></e-treegrid-column>
        <e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="80"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>

<style>
    .e-treegrid .e-altrow {
        background-color: #ffd800;
    }
</style>
public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    return View();
}

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 learn how to present and manipulate data.