The row represents record details fetched from data source.
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.
The detail template provides additional information about a particular row by expanding or collapsing detail content. The DetailTemplate
property accepts either
the template string or HTML element ID.
@Html.EJS().Grid("DetailTemplate").DataSource((IEnumerable<object>)ViewBag.dataSource).DetailTemplate("#detailtemplate").Width("auto").Columns(col =>
{
col.Field("EmployeeID").HeaderText("Employee ID").Width("110").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("FirstName").HeaderText("Name").Width("110").Add();
col.Field("City").HeaderText("City").Width("150").Add();
col.Field("Country").HeaderText("Country").Width("110").Add();
}).Render()
<style type="text/css" class="cssStyles">
.detailtable td {
font-size: 13px;
padding: 4px;
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.photo {
width: 100px;
height: 100px;
border-radius: 50px;
box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0, 0, 0, 0.2);
}
</style>
<script type="text/x-template" id="detailtemplate">
<table class="detailtable" width="100%">
<colgroup>
<col width="35%" />
<col width="35%" />
<col width="30%" />
</colgroup>
<tbody>
<tr>
<td rowspan="4" style="text-align: center;">
<img class="photo" src="/scripts/Images/Employees/${EmployeeID}.png" alt="${EmployeeID}" />
</td>
<td>
<span style="font-weight: 500;">First Name: </span> ${FirstName}
</td>
</tr>
<tr>
<td>
<span style="font-weight: 500;">Last Name: </span> ${LastName}
</td>
<td>
<span style="font-weight: 500;">City: </span> ${City}
</td>
</tr>
<tr>
<td>
<span style="font-weight: 500;">Country: </span> ${Country}
</td>
</tr>
</tbody>
</table>
</script>
public IActionResult Index()
{
ViewBag.DataSource = OrderDetails.GetAllRecords();
return View();
}
To render the custom component inside the detail row, define the template in the DetailTemplate
and render the
component in the DetailDataBound
event.
For example, to render grid inside the detail row, place an HTML div element as the DetailTemplate
and render the DIV element as grid component in the DetailDataBound
event.
@Html.EJS().Grid("DetailTemplate").DataSource((IEnumerable<object>)ViewBag.DataSource).DetailTemplate("#detailtemplate").Width("auto").Columns(col =>
{
col.Field("EmployeeID").HeaderText("Employee ID").Width("110").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("FirstName").HeaderText("Name").Width("110").Add();
col.Field("City").HeaderText("City").Width("150").Add();
col.Field("Country").HeaderText("Country").Width("110").Add();
}).DetailDataBound("detailDataBound").Render()
<script id='detailtemplate' type="text/x-template">
<div class='custom-grid'></div>
</script>
<script>
function detailDataBound (e) {
var data = @Html.Raw(Json.Encode(ViewBag.ChildDataSource));
data = data.filter(function (item) {
return item['EmployeeID'] === e.data['EmployeeID'];
}).slice(0, 3);
var detail = new ej.grids.Grid({
dataSource: data,
columns: [
{ field: 'OrderID', headerText: 'Order ID', width: 110 },
{ field: 'CustomerID', headerText: 'Customer Name', width: 140 },
{ field: 'ShipCountry', headerText: 'Ship Country', width: 150 }
]
});
detail.appendTo(e.detailElement.querySelector('.custom-grid'));
}
</script>
public IActionResult Index()
{
ViewBag.DataSource = OrderDetails.GetAllRecords();
ViewBag.ChildDataSource = ChildDetails.GetRecords();
return View();
}
By default, detail rows render in collapsed state. You can expand a detail row by invoking the expand method using the external button.
<input type="text" value="1" class="rowindex" />
@Html.EJS().Button("expand").Content("Expand").Render()
@Html.EJS().Grid("DetailTemplate").DataSource((IEnumerable<object>)ViewBag.dataSource).DetailTemplate("#detailtemplate").Width("auto").Columns(col =>
{
col.Field("EmployeeID").HeaderText("Employee ID").Width("110").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("FirstName").HeaderText("Name").Width("110").Add();
col.Field("City").HeaderText("City").Width("150").Add();
col.Field("Country").HeaderText("Country").Width("110").Add();
}).Render()
<script>
document.getElementById('expand').addEventListener('click', () => {
var grid = document.getElementById('DetailTemplate').ej2_instances[0];
let inputElem = document.getElementsByClassName('rowindex')[0];
let rowIndex = parseInt(inputElem.value, 10);
grid.detailRowModule.expand(rowIndex);
});
</script>
<style type="text/css" class="cssStyles">
.detailtable td {
font-size: 13px;
padding: 4px;
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.photo {
width: 100px;
height: 100px;
border-radius: 50px;
box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0, 0, 0, 0.2);
}
</style>
<script type="text/x-template" id="detailtemplate">
<table class="detailtable" width="100%">
<colgroup>
<col width="35%" />
<col width="35%" />
<col width="30%" />
</colgroup>
<tbody>
<tr>
<td rowspan="4" style="text-align: center;">
<img class="photo" src="/scripts/Images/Employees/${EmployeeID}.png" alt="${EmployeeID}" />
</td>
<td>
<span style="font-weight: 500;">First Name: </span> ${FirstName}
</td>
</tr>
<tr>
<td>
<span style="font-weight: 500;">Last Name: </span> ${LastName}
</td>
<td>
<span style="font-weight: 500;">City: </span> ${City}
</td>
</tr>
<tr>
<td>
<span style="font-weight: 500;">Country: </span> ${Country}
</td>
</tr>
</tbody>
</table>
</script>
public IActionResult Index()
{
ViewBag.DataSource = OrderDetails.GetAllRecords();
return View();
}
You can expand all the rows by using expandAll method. If you want to expand all the rows at initial Grid rendering, then use expandAll method in
DataBound
event of the Grid.
The grid row drag and drop allows you to drag and drop grid rows to another grid or custom component. To enable row drag and drop, set the AllowRowDragAndDrop
to true.
The target component where the grid rows are to be dropped can be set by using
the TargetID.
<div class="col-lg-6">
@Html.EJS().Grid("RowDragDrop").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowSelection().AllowRowDragAndDrop(true).Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").ShowInColumnChooser(false).Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
}).AllowPaging().SelectionSettings(select=>select.Type( Syncfusion.EJ2.Grids.SelectionType.Multiple)).PageSettings(page => page.PageCount(1).PageSize(10)).RowDropSettings(new Syncfusion.EJ2.Grids.GridRowDropSettings() { TargetID = "DestGrid" }).Render()
</div>
<div class="col-lg-6">
@Html.EJS().Grid("DestGrid").AllowSelection().AllowRowDragAndDrop(true).Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").ShowInColumnChooser(false).Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
}).AllowPaging().SelectionSettings(select=>select.Type( Syncfusion.EJ2.Grids.SelectionType.Multiple)).PageSettings(page => page.PageCount(1).PageSize(5)).RowDropSettings(new Syncfusion.EJ2.Grids.GridRowDropSettings() { TargetID = "RowDragDrop" }).Render()
</div>
public IActionResult Index()
{
ViewBag.DataSource = OrderDetails.GetAllRecords();
return View();
}
Selection feature must be enabled for row drag and drop. Multiple rows can be selected by clicking and dragging inside the grid. For multiple row selection, the
Type
property ofSelectionSettings
must be set to Multiple.
The grid row drag and drop allows you to drag and drop grid rows on the same grid using drag icon. To enable row drag and drop, set the AllowRowDragAndDrop
to true.
<div class="col-lg-6">
@Html.EJS().Grid("RowDragDrop").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowRowDragAndDrop(true).Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").ShowInColumnChooser(false).Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
}).AllowPaging().AllowSelection().SelectionSettings(select=>select.Type( Syncfusion.EJ2.Grids.SelectionType.Multiple)).Render()
</div>
public IActionResult Index()
{
ViewBag.DataSource = OrderDetails.GetAllRecords();
return View();
}
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 RowDataBoundEventArgs that contains details of the row.
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
}).RowDataBound("rowBound").AllowSelection(false).PageSettings(p => { p.PageSize(6); }).EnableHover(false).Render()
<script>
function rowBound(args) {
if (args.data['Freight'] < 10) {
args.row.classList.add('below-10');
} else if (args.data['Freight'] < 80) {
args.row.classList.add('below-80');
} else {
args.row.classList.add('above-80');
}
}
</script>
<style>
.below-10 {
background-color:aqua;
}
.below-80 {
background-color: aquamarine;
}
.above-80 {
background-color: orange;
}
</style>
public IActionResult Index()
{
ViewBag.DataSource = OrderDetails.GetAllRecords();
return View();
}
You can change the grid’s alternative rows’ background color by overriding the .e-altrow class.
.e-grid .e-altrow {
background-color: #fafafa;
}
Please refer to the following example.
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
}).Render()
<style>
.e-grid .e-altrow {
background-color: #fafafa;
}
</style>
public IActionResult Index()
{
ViewBag.DataSource = OrderDetails.GetAllRecords();
return View();
}
You can customize the row height of grid rows through the RowHeight
property. The RowHeight
property
is used to change the row height of entire grid rows.
In the below example, the RowHeight
is set as 60px.
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
}).RowHeight(60).Render()
public IActionResult Index()
{
ViewBag.DataSource = OrderDetails.GetAllRecords();
return View();
}
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 OrderID as ‘10249’ is set as ‘90px’ using the RowDataBound
event.
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
}).RowDataBound("rowDataBound").Render()
<script>
function rowDataBound(args) {
if (args.data.OrderID === 10005) {
args.rowHeight = 90;
}
}
</script>
public IActionResult Index()
{
ViewBag.DataSource = OrderDetails.GetAllRecords();
return View();
}
In virtual scrolling mode, it is not applicable to set the
RowHeight
using theRowDataBound
event.