2 lines of text in column header of SfGrid

[Bruno]

Hi

I want to show the column header text on two lines.

I have tried several possible solutions but nothing works. The line height does not increase and only shows the thirst line.

For example:

<GridColumn Field="@fieldName" Width="60px">
    <HeaderTemplate>
       <div>
          <p>1. Line</p>
          <p>2. Line</p>
       </div>
    </HeaderTemplate>
</GridColumn>

Please show me an example which works and displays the two lines.

Many thanks, Bruno

[Prathap Senthil]

Hi Bruno,

Query:”  show me an example which works and displays the two lines.”

Based on your needs, we suggest you use the below CSS customization to achieve your requirements . Kindly refer to the below code snippet and sample for your reference.

<SfGrid DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" Height="315">

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings>

    <GridColumns>

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120">

            <HeaderTemplate>

                @{

                 <div>

                        <p>Order ID</p>

                        <p>Order ID</p>

                </div>

                }

            </HeaderTemplate>

        </GridColumn>

</SfGrid>

<style>

    .e-grid .e-headercelldiv {

        height: 60px ;

        padding:5px;

    }

</style>

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

Regards,
Prathap S