ASP.NET MVC
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Row in ASP.NET MVC Grid control

04 Aug 2021 / 3 minutes to read

The row represents record details fetched from data source.

Row template

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.

razor
row-template.cs
Copied to clipboard
@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>
Copied to clipboard
public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();
}

The RowTemplate property accepts only the TR element.

Detail template

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.

razor
detail-temp.cs
Copied to clipboard
@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>
Copied to clipboard
public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();
}

Rendering custom component

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.

razor
custom-component.cs
Copied to clipboard
@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>
Copied to clipboard
public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    ViewBag.ChildDataSource = ChildDetails.GetRecords();
    return View();
}

Expand by external button

By default, detail rows render in collapsed state. You can expand a detail row by invoking the expand method using the external button.

razor
expand-external.cs
Copied to clipboard
<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>
Copied to clipboard
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.

Drag and drop

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.

razor
drag-drop.cs
Copied to clipboard
<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>
Copied to clipboard
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 of SelectionSettings must be set to Multiple.

Drag and drop within Grid

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.

razor
drag-drop-same-grid.cs
Copied to clipboard
<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>
Copied to clipboard
public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();
}

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 RowDataBoundEventArgs that contains details of the row.

razor
custom-rows.cs
Copied to clipboard
@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>
Copied to clipboard
public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();
}

Styling alternate rows

You can change the grid’s alternative rows’ background color by overriding the .e-altrow class.

Copied to clipboard
.e-grid .e-altrow {
    background-color: #fafafa;
}

Please refer to the following example.

razor
style-alt-row.cs
Copied to clipboard
@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>
Copied to clipboard
public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();
}

Row height

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.

razor
row-height.cs
Copied to clipboard
@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()
Copied to clipboard
public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    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 OrderID as ‘10249’ is set as ‘90px’ using the RowDataBound event.

razor
rowheight-particular.cs
Copied to clipboard
@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>
Copied to clipboard
public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();
}

In virtual scrolling mode, it is not applicable to set the RowHeight using the RowDataBound event.

Previous
Next