Row Height in ASP.NET MVC Tree Grid Component

21 Dec 20222 minutes to read

You can customize the row height of treegrid rows through the RowHeight property. The RowHeight property is used to change the row height of entire treegrid rows.

In the below example, the RowHeight is set as ‘60px’.

@Html.EJS().TreeGrid("TreeGrid").RowHeight(60).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().TreeColumnIndex(1).Render()
public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    return View();
}

Customize row height for particular row

Grid row height for particular row can be customized using the RowDataBound event by setting the RowHeight in arguments for each row based on the requirement.

In the below example, the row height for the row with Task ID as 3 is set as 90px using the RowDataBound event.

@Html.EJS().TreeGrid("TreeGrid").RowDataBound("rowDataBound").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").TreeColumnIndex(1).Render()

<script>
    function rowDataBound(args) {
        if (args.data.TaskId === 3) {
            args.rowHeight = 90;
        }
    }
</script>
public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    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.