Set header row height independent of row height

Question

I have an SfGrid where I set RowHeight="70". This also makes the Header Row 70. How can I set the header row height to be a different value - for example 35px?

Rahul Narayanasamy · Accepted Answer

Hi Judi,

Greetings from Syncfusion.

Query: Set header row height independent of row height - I have an SfGrid where I set RowHeight="70". This also makes the Header Row 70. How can I set the header row height to be a different value - for example 35px?

We have validated your query and we suggest you to achieve your requirement by using below CSS. Find the below code snippets and sample for your reference.

<SfGrid DataSource="@Orders" Height="280" RowHeight="70">

<GridColumns>

<GridColumn Field=@nameof(Order.OrderID) HeaderText="OrderID" Width="110"> </GridColumn>

. . .

</GridColumns>

</SfGrid>

@code {

public List<Order> Orders { get; set; }

. . .

}

<style>

.e-grid th.e-headercell {

height: 35px !important; //for setting height for header row

}

</style>

Sample:

https://www.syncfusion.com/downloads/support/forum/162282/ze/BlazorApp1HRow-119932146

Please let us know if you have any concerns.

Regards,

Rahul

Judi Smith · Answer

Thank you. That works.

Rahul Narayanasamy · Answer

Hi Judi, 

Thanks for the update. 

We are happy to hear that the provided solution was helpful to achieve your requirement. 

Please get back to us if you need further assistance. 

Regards, 
Rahul