Search results

Row

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.

razor
CustomizeRows.cs
@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;
}

Please refer to the following example.

razor
alternateRows.cs
@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();
}

Row height

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’.

razor
rowHeight.cs
@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.

razor
customizeRowHeight.cs
@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();
}

Row template

The RowTemplate has an option to customise the look and behavior of the treegrid rows. The RowTemplate property accepts either the Template string or HTML element ID.

razor
row-template.cs
@Html.EJS().TreeGrid("DefaultFunctionalities").DataSource((IEnumerable<object>)ViewBag.datasource).Columns(col =>
       {
           col.Field("EmpID").HeaderText("Employee ID").Width(150).TextAlign(TextAlign.Right).Add();
           col.Field("Name").HeaderText("Employee Name").Width(150).Add();
           col.Field("Address").HeaderText("Employee Details").Width(350).Add();
       }).Height(250).ChildMapping("Children").TreeColumnIndex(0).RowHeight(83).RowTemplate("#rowtemplate").Render()

    <script id="rowtemplate" type="text/x-template">
        <tr>
            <td class="border" style='padding-left:18px;'>
                <div>${EmpID}</div>
            </td>
            <td class="border" style='padding: 10px 0px 0px 20px;'>
                <div style="font-size:14px;">
                    ${Name}
                    <p style="font-size:9px;">${Designation}</p>
                </div>
            </td>
            <td class="border">
                <div>
                    <div style="position:relative;display:inline-block;">
                        <img src="../Content/images/treegrid/${FullName}.png" alt="${FullName}" />
                    </div>
                    <div style="display:inline-block;">
                        <div style="padding:5px;">${Address}</div>
                        <div style="padding:5px;">${Country}</div>
                        <div style="padding:5px;font-size:12px;">${Contact}</div>
                    </div>
                </div>
            </td>
        </tr>
    </script>
    <style type="text/css">

        .border {
            border-color: #e0e0e0;
            border: 1px solid #e0e0e0;
            border-width: 1px 0 0 0;
        }

        img {
            width: 60px;
            height: 60px;
            vertical-align: baseline;
            border-radius: 50px;
            margin-left: 20px;
            background-repeat: no-repeat;
        }
    </style>
public IActionResult RowTemplate()
        {
            ViewBag.datasource = TreeData.GetTemplateData();
            return View();
        }

The RowTemplate property accepts only the TR element.

Row template with formatting

If the RowTemplate is used, the value cannot be formatted inside the template using the Columns.Format property. In that case, a function should be defined globally to format the value and invoke it inside the template.

razor
rowtemplate-formatting.cs
@Html.EJS().TreeGrid("DefaultFunctionalities").DataSource((IEnumerable<object>)ViewBag.datasource).Columns(col =>
       {
           col.Field("EmpID").HeaderText("Employee ID").Width(150).Add();
           col.Field("Address").HeaderText("Employee Details").Width(350).Add();
           col.Field("DOB").HeaderText("DOB").Width(150).Add();
       }).Height(250).ChildMapping("Children").TreeColumnIndex(0).RowHeight(83).RowTemplate("#rowtemplate").Render()

    <script id="rowtemplate" type="text/x-template">
        <tr>
            <td class="border" style='padding-left:18px;'>
                <div>${EmpID}</div>
            </td>
            <td class="border">
                <div>
                    <div style="position:relative;display:inline-block;">
                        <img src="../Content/images/treegrid/${FullName}.png" alt="${FullName}" />
                    </div>
                    <div style="display:inline-block;">
                        <div style="padding:5px;">${Address}</div>
                        <div style="padding:5px;">${Country}</div>
                        <div style="padding:5px;font-size:12px;">${Contact}</div>
                    </div>
                </div>
            </td>
            <td class="border" style='padding-left: 20px;'>
                <div>${DOB.toLocaleDateString()}</div>
            </td>
        </tr>
    </script>
    <style type="text/css">

        .border {
            border-color: #e0e0e0;
            border: 1px solid #e0e0e0;
            border-width: 1px 0 0 0;
        }

        img {
            width: 60px;
            height: 60px;
            vertical-align: baseline;
            border-radius: 50px;
            margin-left: 20px;
            background-repeat: no-repeat;
        }
    </style>
public IActionResult RowTemplate()
        {
            ViewBag.datasource = TreeData.GetTemplateData();
            return View();
        }

Limitations

Row template feature is not compatible with all the features which are available in treegrid and it has limited features support. Here we have listed out the features which are compatible with row template feature.

  • Filtering
  • Paging
  • Sorting
  • Scrolling
  • Searching
  • Rtl
  • Context Menu
  • State Persistence