ASP.NET MVC

Search results

Row in ASP.NET MVC Grid control

01 Dec 2021 / 4 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

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

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

@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();
}

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

@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();
}

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

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

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

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

<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();
}

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

@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();
}

Styling alternate rows

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.

razor

style-alt-row.cs

@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();
}

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

@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();
}

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

@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 the RowDataBound event.

Row in ASP.NET MVC Grid control

Row template

Detail template

Rendering custom component

Expand by external button

Drag and drop

Drag and drop within Grid

Customize rows

Styling alternate rows

Row height

Customize row height for particular row

See Also