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.
@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();
}
NOTE
Refer to our
ASP.NET MVC Tree Grid
feature tour page for its groundbreaking feature representations. You can also explore ourASP.NET MVC Tree Grid example
to learn how to present and manipulate data.