How to show more than header row in my Blazor grid

[AFICO Filters]

Hi Syncfusion supporting team,

Please advise me how to show more than header row in my Blazor grid like the attched image

Thank you for your support

Afico

Attachment: IMG_20230906_105620_5007aa3f.zip

[Sarveswaran Palani]

Hi Afico,

Greetings from Syncfusion support.

Query: “How to show more than header row in my Blazor grid”

From your shared image, we suspect that you want a multi-level of column headers within the grid column. We suggest you achieve your requirement by nesting the GridColumn directive within another GridColumn directive. Kindly refer the attached documentation link for stacked header UG documentation.

Reference: https://blazor.syncfusion.com/documentation/datagrid/columns#stacked-column-header

If you have any further queries, please get back to us.

Regards,
Sarvesh

[AFICO Filters]

Thank you;

It helped me very well

[AFICO Filters]

Please can you advise me how to make the stacked header the same style as tb sub header like tha attached image ?

Thank you

Attachment: Styles_9b2087a5.zip

[Sarveswaran Palani]

Hi Afico,

Based on your query, it seems you want to customize the styles of stacked header columns. To achieve this, we recommend adding a CSS class to the custom attribute property of the desired column. This approach will help you overcome the reported issue on your end. Kindly refer the attached code snippet, sample and shared image for your reference.

<GridColumn HeaderText="Order Details" CustomAttributes="@(new Dictionary<string, object>(){ { "class", "e-attr" }})" TextAlign="TextAlign.Center">

    <GridColumns>

        <GridColumn Field="OrderDate" Width="130" HeaderText="Order Date" CustomAttributes="@(new Dictionary<string, object>(){ { "class", "e-attr" }})" Format="d" TextAlign="TextAlign.Right" MinWidth="10"></GridColumn>

        <GridColumn Field="Freight" Width="135" Format="C2" CustomAttributes="@(new Dictionary<string, object>(){ { "class", "e-attr" }})" TextAlign="TextAlign.Right" MinWidth="10">

        </GridColumn>

    </GridColumns>

</GridColumn>

<style>

    .e-attr.e-headercell{

        color:red;

        font-style:italic;

        font-weight:600;

     /*customize your styles here*/

    }

</style>

If you have any further queries, please get back to us.

Regards,
Sarvesh

Attachment: SfGridStackedHeader_f42524e8.zip

[AFICO Filters]

Thank you 

[AFICO Filters]

Dear support team,

Thank you for your Co-operating

Please advise if I can Vertical align the un-stacked cells in the header row (first tow columns from the left) as shown in attached file

Thank you

AFICO

[Naveen Palanivel]

Hi AFICO,

As we said early, we suggest you to use custom attribute property to add CSS class to the desired column and made customization based on your requirement. Kindly refer the attached UG documentation, code snippet and sample for your reference.

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

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

    <GridColumns>

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" CustomAttributes="@(new Dictionary<string, object>(){ { "class", "e-attrord" }})" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" IsPrimaryKey="true" Width="120"></GridColumn>

        <GridColumn HeaderText="Order Details" CustomAttributes="@(new Dictionary<string, object>(){ { "class", "e-attr" }})" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center">

            <GridColumns>

                <GridColumn Field="OrderDate" Width="130" HeaderText="Order Date" CustomAttributes="@(new Dictionary<string, object>(){ { "class", "e-attr" }})" Format="d" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" MinWidth="10"></GridColumn>

                <GridColumn Field="Freight" Width="135" Format="C2" CustomAttributes="@(new Dictionary<string, object>(){ { "class", "e-attr" }})" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" MinWidth="10">

                </GridColumn>

            </GridColumns>

        </GridColumn>

        <GridColumn HeaderText="Ship Details" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center">

            <GridColumns>

                <GridColumn Field="ShippedDate" Width="140" HeaderText="Shipped Date" Format="d" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" MinWidth="10"></GridColumn>

                <GridColumn Field="ShipCountry" Width="145" HeaderText="Ship Country" MinWidth="10"></GridColumn>

            </GridColumns>

        </GridColumn>

    </GridColumns>

</SfGrid>

 

<style>

    .e-attr.e-headercell {

        color: red;

        font-style: italic;

        font-weight: 600;

        /*customize your styles here*/

    }

 

    .e-attrord.e-headercell {

        transform: rotate(45deg);

        transform-origin: center center;

        white-space: nowrap;

    }

</style>

https://blazor.syncfusion.com/documentation/datagrid/how-to/customize-column-styles

Please let us know if you have any concerns.

Regards,

Naveen Palanivel

[AFICO Filters]

Thank you for your support,

But I want to align   header text Vertically  like all rest header cells - not to rotate it .

Like the first column in the attached file 

I tried:

. e-attrord. e-header cell {

vertical-align: central;

}

But nothing was done

Please advise

Thank you

AFICO

[AFICO Filters]

Thank you for your support,

But I want to align   header text Vertically  like all rest header cells - not to rotate it .

Like the first column in the attached file 

I tried:

. e-attrord. e-header cell {

vertical-align: central;

}

But nothing was done

Please advise

Thank you

AFICO

Attachment: Untitled_4dac1d6d.zip

[Sarveswaran Palani]

Hi Afico,

Based on your query, it appears that you are encountering an issue with rendering vertical header text using a custom attribute property. We would like to inform you that this topic is already documented in our UG documentation. For detailed information, kindly refer to the attached documentation link.

Reference: https://blazor.syncfusion.com/documentation/datagrid/columns#change-the-orientation-of-header-text

If you have any further queries, please get back to us.

Regards,
Sarvesh

[AFICO Filters]

Thank you,

But I do not want to change the orientation of the header text. As the topic explains.

My header has tow rows, I just want to vertically align text in the column which has one row not to make its orientation to be centered vertically.

Please advise on this issue.

Thank you

Afico

[Sarveswaran Palani]

Hi Afico,

From your query, we suspect that you want to render header text vertically. So that we suggest to use custom attribute property to add CSS class to the desired column and made customization based on your requirement. We have already attached sample and code snippet for your reference. Kindly refer the attached image for your reference.

<style>

    .e-attrord.e-headercell {

        transform: rotate(-90deg);

        transform-origin: center center;

        white-space: nowrap;

    }

</style>

 

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

If you have any further queries, please get back to us.

Regards,
Sarvesh