Stacked headers with HeaderTemplate

[Jean Daniel Gasser]

Hello,

Is it possible to create a SfGrid with stacked headers and set different background colors and/or fonts for the header?

My goal is to be able to imitate this kind of header (taken from an Excel file):

[Prathap Senthil]

Hi Jean,

Yes, it's possible, based on your requirements, we already have support for grid with stackedheaders and headertemplate. Additionally, we offer support for cell customization through customattributes, allowing you to customize the cells according to your needs. Furthermore, we have prepared a simple sample for your reference.

<SfGrid DataSource="@Orders" AllowPaging="true">

    <GridColumns>

-----------

            <GridColumns>

              

                 <GridColumn Field="OrderDate" Width="130" HeaderText="Order Date" Format="d" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" MinWidth="10"></GridColumn>

                <GridColumn Field="Freight" HeaderText="Freight ($)" Width="135" Format="C2" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" MinWidth="10">

                </GridColumn>

            </GridColumns>

        </GridColumn>

        <GridColumn HeaderText="Ship Details" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" CustomAttributes="@(new Dictionary<string, object>(){ { "id", "custom-css" }})">

            <ChildContent>

             

                <GridColumns>

                    <GridColumn Field="ShippedDate" Width="140" HeaderText="Shipped Date" Format="d" CustomAttributes="@(new Dictionary<string, object>(){ { "id", "custom-css" }})" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" MinWidth="10"></GridColumn>

                    <GridColumn Field="ShipCountry" Width="140" HeaderText="Ship Country" Format="d" CustomAttributes="@(new Dictionary<string, object>(){ { "id", "cssshipcountry" }})" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" MinWidth="10"></GridColumn>

                </GridColumns>

            </ChildContent>

 

            <HeaderTemplate>

              

                    Ship Details <span>(<i class="fa fa-truck"></i>)</span>

            </HeaderTemplate>

          

        </GridColumn>

    </GridColumns>

</SfGrid>

 

<style>

    #custom-css {

        background-color:green;

        font-style: italic;

        color: navy

    }

 

    th#cssshipcountry {

        background-color: yellow;

    }

 

    td#cssshipcountry {

        background-color: palevioletred;

    }

</style>

 

Regards,

Prathap S

[Jean Daniel Gasser]

Thank you very much !

As usual, great support

[Prathap Senthil]

Thanks for the update,

We are happy to hear that the provided solution was helpful. We are closing the thread now.