Row Template

2 Mar 20226 minutes to read

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

@Html.EJS().Grid("RowTemplate").DataSource((IEnumerable<object>)ViewBag.dataSource).Height("335").Width("auto").RowTemplate("#rowtemplate").Columns(col =>
{
   col.HeaderText("Employee Image").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Width("150").Add();
   col.HeaderText("Employee Details").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Left).Width("300").Field("EmployeeID").Add();

}).Render()


<style type="text/css" class="cssStyles">
    .photo img {
        width: 100px;
        height: 100px;
        border-radius: 50px;
        box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0, 0, 0, 0.2);
    }

    .photo,
    .details {
        border-color: #e0e0e0;
        border-style: solid;
    }

    .photo {
        border-width: 1px 0px 0px 0px;
        text-align: center;
    }

    .details {
        border-width: 1px 0px 0px 0px;
        padding-left: 18px;
    }

    .e-bigger .details {
        padding-left: 25px;
    }

    .e-device .details {
        padding-left: 8px;
    }

    .details > table {
        width: 100%;
    }

    .CardHeader {
        font-weight: 600;
    }

    td {
        padding: 2px 2px 3px 4px;
    }
</style>

<script id="rowtemplate" type="text/x-template">
    <tr>
        <td class="photo">
            <img src="/Content/images/Employees/${EmployeeID}.png" alt="${EmployeeID}" />
        </td>
        <td class="details">
            <table class="CardTable" cellpadding="3" cellspacing="2">
                <colgroup>
                    <col width="50%">
                    <col width="50%">
                </colgroup>
                <tbody>
                    <tr>
                        <td class="CardHeader">First Name </td>
                        <td>${FirstName} </td>
                    </tr>
                    <tr>
                        <td class="CardHeader">Last Name</td>
                        <td>${LastName} </td>
                    </tr>
                    <tr>
                        <td class="CardHeader">
                            City
                        </td>

                        <td>
                            ${City}
                        </td>
                    </tr>
                    <tr>
                        <td class="CardHeader">
                            Country
                        </td>

                        <td>
                            ${Country}
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</script>
public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();
}

The RowTemplate property accepts only the TR element.