Row Height

21 Dec 20222 minutes to read

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

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

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

NOTE