How to keep header-row height fixed after this.rowHeight is changed

[Owen Smith]

Hi, I would like to build a data grid which contains a tool bar that changes the heights of all the rows (except for the header row). Similar to the example here: 

https://ej2.syncfusion.com/aspnetcore/Grid/RowHeight#/material

However, as you can see, it seems like the header row is also being affected by calling `this.RowHeight`. Is there anyway that I can change the non-header row's heights? My goal is to keep the header-row the same height. 

If there is anything I can do to clarify the situation, please 

Thanks!

Owen

[Praveenkumar Gajendiran]

Hi Owen, 

Thanks for contacting Syncfusion support. 

We checked your query, based on that, we could see that you want to persist the default row height value for the header row while changing Grid’s row height using rowHeight property. For this, we suggest you to use the below CSS to achieve your requirement. 

Code Example:  

<div class="content"> 

    <ejs-grid id="Grid1" height="400" dataSource="ViewBag.Datasource" rowHeight="50" allowPaging="true"> 

        <e-grid-columns> 

            <e-grid-column field="OrderID" headerText="Order ID" width="180" isPrimaryKey="true"></e-grid-column> 

            <e-grid-column field="Freight" headerText="Freight" format="C2" width="200"></e-grid-column> 

            <e-grid-column field="CustomerID" headerText="Customer ID" width="180"></e-grid-column> 

            <e-grid-column field="ShipCity" headerText="Ship City" width="180"></e-grid-column> 

        </e-grid-columns> 

    </ejs-grid> 

</div> 

 

<script> 

    

</script> 

<style> 

    .e-gridheader .e-headercontent tr { 

        height: 32px !important; // it persist the default row height value for the header row 

    } 

</style> 

Please get back to us if you need further assistance.  

   

Regards  

Praveenkumar G