Rows in ASP.NET MVC Tree Grid Component

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

CSHTML

@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>

CustomizeRows.cs

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.

CSHTML

@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>

AlternateRows.cs

public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    return View();
}

NOTE

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.