How to customize the size of the rows in the grid

[Duong Quoc]

question: ​

How to customize the size of the rows in the grid according to the below figure requirements?

code:

[Monisha Saravanan]

Hi Duong,

Greetings from Syncfusion.

Before proceeding further we need some more requirement about your requirement. Kindly share the below details to proceed further at our end.

1. Share us whether you are expecting to set Column Width/ Row Height at your end.
2. Share us whether you are expecting to set different width for Header and Content.
3. We have prepared a simple sample by setting column width as 15px. Kindly check the below attached sample for your reference and get back to us with additional requirement if we misunderstood your query.

Sample: https://blazorplayground.syncfusion.com/embed/VjLJtlCkpbWlfQwU?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

The above requested details will be very helpful for us to validate the reported issue at our end.

Regards,

Monisha

[Duong Quoc]

No, I mean I want to set the height of the row to 15px, not the width of the column

[Prathap Senthil]

Hi Duong Quoc,

Based on your requirement, if you want to set the row height to 15px, we suggest using the grid's built-in RowHeight property to achieve this. We have already documented this topic. Kindly refer to the documentation below for your reference.

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

    <GridColumns>

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

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

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

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

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText="Order Date" Format="d" Width="110" Type="Syncfusion.Blazor.Grids.ColumnType.Date"></GridColumn>

    </GridColumns>

</SfGrid>

Reference:

https://blazor.syncfusion.com/documentation/datagrid/row-height

If you want to change the grid header height, we suggest using the following CSS modification to achieve this. Please refer to the code snippet below for reference.

 

<style>

    .e-grid .e-gridheader .e-headercontent .e-columnheader .e-headercell .e-headercelldiv {

   

        height:50px;

    }

 

 

</style>

Sample: https://blazorplayground.syncfusion.com/embed/BDBzZPhLzJTIqpIc?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Regards,
Prathap Senthil