Rows in ASP.NET MVC TreeGrid

11 Aug 20262 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.

@Html.EJS().TreeGrid("TreeGrid").RowDataBound("rowDataBound").DataSource((IEnumerable<object>)ViewBag.datasource).Columns(col =>
{
   col.Field("TaskId").HeaderText("Task ID").Width(110).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("TaskName").HeaderText("Task Name").Width(210).Add();
   col.Field("StartDate").HeaderText("Start Date").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Width(210).Add();
   col.Field("Duration").HeaderText("Duration").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(190).Add();

}).ChildMapping("Children").TreeColumnIndex(1).AllowPaging().Render()

<script>
    function rowDataBound(args) {
        if (args.data['Duration'] == 5) {
            args.row.style.background = '#336c12';
        } else if (args.data['Duration'] > 6) {
            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: #fafafa;
}

Refer to the following example.

@Html.EJS().TreeGrid("TreeGrid").Height(275).EnableHover(false).DataSource((IEnumerable<object>)ViewBag.datasource).Columns(col =>
{
   col.Field("TaskId").HeaderText("Task ID").Width(110).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("TaskName").HeaderText("Task Name").Width(210).Add();
   col.Field("StartDate").HeaderText("Start Date").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Width(210).Add();
   col.Field("Duration").HeaderText("Duration").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(190).Add();

}).ChildMapping("Children").AllowPaging(true).TreeColumnIndex(1).Render()

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

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