Row Template

2 Mar 20228 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.

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="335" width="auto" rowTemplate="#rowtemplate">
    <e-grid-columns>
        <e-grid-column headerText="Employee Image" width="150" textAlign="Center"> </e-grid-column>
        <e-grid-column headerText="Employee Details" width="300" field="EmployeeID" textAlign="Left"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<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">
                            Title
                        </td>

                        <td>
                            ${Title}
                        </td>
                    </tr>
                    <tr>
                        <td class="CardHeader">
                            Birth Date
                        </td>
                        <td>
                            ${BirthDate.toLocaleDateString()}
                        </td>
                    </tr>
                    <tr>
                        <td class="CardHeader">
                            Hire Date
                        </td>
                        <td>
                            ${HireDate.toLocaleDateString()}
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</script>
public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();
}

The rowTemplate property accepts only the TR element.