Row

2 Mar 20223 minutes to read

The row represents record details fetched from data source.

Row Customization

Using event

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.

<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'] < 10) {
        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();
}

Using CSS customize 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.

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