Search results

Row

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.

tagHelper
row-template.cs
<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.

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.

tagHelper
detail-temp.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource  detailTemplate="#detailtemplate"> 
    <e-grid-columns> 
        <e-grid-column field="FirstName" headerText="First Name" width="110"></e-grid-column> 
        <e-grid-column field="LastName" headerText="Last Name" width="110"></e-grid-column> 
        <e-grid-column field="Title" headerText="Title" width="150"></e-grid-column> 
        <e-grid-column field="Country" headerText="Country" width="110"></e-grid-column> 
    </e-grid-columns> 
</ejs-grid>

<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>
                <td>
                    <span style="font-weight: 500;">Postal Code: </span> ${PostalCode}
                </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;">Title: </span> ${Title}
                </td>
                <td>
                    <span style="font-weight: 500;">Phone: </span> ${HomePhone}
                </td>
            </tr>
            <tr>
                <td>
                    <span style="font-weight: 500;">Address: </span> ${Address}
                </td>
                <td>
                    <span style="font-weight: 500;">HireDate: </span> ${HireDate.toLocaleDateString()}
                </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.

tagHelper
custom-component.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource detailTemplate="#detailtemplate" detailDataBound="detailDataBound">
        <e-grid-columns>
            <e-grid-column field="FirstName" headerText="First Name" width="110"></e-grid-column>
            <e-grid-column field="LastName" headerText="Last Name" width="110"></e-grid-column>
            <e-grid-column field="Title" headerText="Title" width="150"></e-grid-column>
            <e-grid-column field="Country" headerText="Country" width="110"></e-grid-column>
        </e-grid-columns>
    </ejs-grid>
    
    <script id='detailtemplate' type="text/x-template">
        <div class='custom-grid'></div>
    </script>
    
    <script>
        function detailDataBound(e) {
           var data = @Json.Serialize(ViewBag.ChildDataSource);
            var detail = new ej.grids.Grid({
                dataSource: data.filter((item) => item['EmployeeID'] === e.data['EmployeeID']).slice(0, 3),
                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.

tagHelper
expand-external.cs
<input type="text" value="1" class="rowindex" />
    <ejs-button id="expand" content="Expand"></ejs-button>
    <ejs-grid id="Grid" dataSource=@ViewBag.foreign detailTemplate="#detailtemplate">
        <e-grid-columns>
            <e-grid-column field="FirstName" headerText="First Name" width="110"></e-grid-column>
            <e-grid-column field="LastName" headerText="Last Name" width="110"></e-grid-column>
            <e-grid-column field="Title" headerText="Title" width="150"></e-grid-column>
            <e-grid-column field="Country" headerText="Country" width="110"></e-grid-column>
        </e-grid-columns>
    </ejs-grid>

    <script>
        document.getElementById('expand').addEventListener('click', () => {
            var grid = document.getElementById("Grid").ej2_instances[0];
            var inputElem = (document.getElementsByClassName('rowindex')[0]);
            var 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>
                <td>
                    <span style="font-weight: 500;">Postal Code: </span> ${PostalCode}
                </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;">Title: </span> ${Title}
                </td>
                <td>
                    <span style="font-weight: 500;">Phone: </span> ${HomePhone}
                </td>
            </tr>
            <tr>
                <td>
                    <span style="font-weight: 500;">Address: </span> ${Address}
                </td>
                <td>
                    <span style="font-weight: 500;">HireDate: </span> ${HireDate.toLocaleDateString()}
                </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.

tagHelper
drag-drop.cs
<div class="col-lg-6">
        <ejs-grid id="Grid" dataSource=@ViewBag.DataSource  allowRowDragAndDrop="true" allowSelection="true" allowPaging="true">
            <e-grid-selectionsettings type="Multiple"></e-grid-selectionsettings>
            <e-grid-pagesettings pageCount="1" pageSize="12"></e-grid-pagesettings>
            <e-grid-rowdropsettings targetID="DestGrid"></e-grid-rowdropsettings>
            <e-grid-columns>
                <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" width="120"></e-grid-column>
                <e-grid-column field="CustomerID" headerText="Customer ID" width="135"></e-grid-column>
                <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width="130"></e-grid-column>
            </e-grid-columns>
        </ejs-grid>
    </div>
    <div class="col-lg-6">
        <ejs-grid id="DestGrid"  allowRowDragAndDrop="true" allowSelection="true" allowPaging="true">
            <e-grid-selectionsettings type="Multiple"></e-grid-selectionsettings>
            <e-grid-pagesettings pageCount="1" ></e-grid-pagesettings>
            <e-grid-rowdropsettings targetID="Grid"></e-grid-rowdropsettings>
            <e-grid-columns>
                <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" width="120"></e-grid-column>
                <e-grid-column field="CustomerID" headerText="Customer ID" width="135"></e-grid-column>
                <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width="130"></e-grid-column>
            </e-grid-columns>
        </ejs-grid>
        </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 must be set to Multiple.

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.

tagHelper
custom-rows.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource enableHover="false" allowSelection="false"  rowDataBound="rowBound"> 
    <e-grid-pagesettings pageSize="6"></e-grid-pagesettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="100"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="120"></e-grid-column>
        <e-grid-column field="ShipCity" headerText="Ship City" width="100"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight"  width="100" format='C2'></e-grid-column>
        <e-grid-column field="ShipName" headerText="Ship Name" width="100"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script>
function rowBound(args) {
    if (args.data['Freight'] < 30) {
        args.row.classList.add('below-30');
    } else if (args.data['Freight'] < 80) {
        args.row.classList.add('below-80');
    } else {
        args.row.classList.add('above-80');
    }
}
<script>
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.

tagHelper
style-alt-row.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource > 
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="140"></e-grid-column>       
        <e-grid-column field="Freight" headerText="Freight"  width="120" format='C2'></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width="140"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

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

tagHelper
row-height.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource rowHeight="60" > 
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="140"></e-grid-column>       
        <e-grid-column field="Freight" headerText="Freight"  width="120" format='C2'></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width="140"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
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.

tagHelper
rowheight-particular.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource rowDataBound="rowDataBound" > 
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="140"></e-grid-column>       
        <e-grid-column field="Freight" headerText="Freight"  width="120" format='C2'></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width="140"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script>
 function rowDataBound(args) {
    if (args.data.OrderID === 10249) {
        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.

Troubleshoot: Grid render rows without data

In ASP.NET Core, by default the JSON results are returned in camelCase format. So grid field names are also changed in camelCase.

To avoid this problem, you need to add DefaultContractResolver in Startup.cs file.

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc().AddJsonOptions(options =>
    {
        options.SerializerSettings.ContractResolver = new Newtonsoft.Json.Serialization.DefaultContractResolver();
    });
}