Align Center Header Stack and Customize Header

[Phúc Mai Hoài]

Hi, 

The issue I'm having is that I want to move this text to the middle of header. I tried customizing the header with "HeadContent" but it doesn't work. How can I do that?

Here is my example:

 @using Syncfusion.Blazor.Grids
<div style="padding:20px;overflow:auto">
    <SfGrid DataSource="@Orders"
        AllowPaging="false"
        AllowResizing="true"
        AllowSelection=true
        EnableAutoFill=true  >


        <GridColumns>
            <GridColumn Field=@nameof(Order.DrawingBySheet)  Width="130">
                <HeadContent>
                    <div style="display:flex;align-items:center;justify-content:center;height:40px;width:100%;height:100%">
                        <span>Drawing By Sheet</span>
                    </div>
                </HeadContent>
            </GridColumn>
            <GridColumn Field=@nameof(Order.MiscBreakoutItems) HeaderText="Misc Breakout Items" TextAlign="TextAlign.Right" HeaderTextAlign="TextAlign.Center" Width="130"></GridColumn>
            <GridColumn Field=@nameof(Order.Category) HeaderText="Category" TextAlign="TextAlign.Right" HeaderTextAlign="TextAlign.Center" Width="130"></GridColumn>
            <GridColumn Field=@nameof(Order.Size) HeaderText="Size" TextAlign="TextAlign.Right" HeaderTextAlign="TextAlign.Center" Width="130"></GridColumn>
            <GridColumn Field=@nameof(Order.ItemDesc) HeaderText="Item Desc" TextAlign="TextAlign.Right" HeaderTextAlign="TextAlign.Center" Width="130"></GridColumn>
            <GridColumn HeaderText="Qty" HeaderTextAlign="TextAlign.Center">
                <GridColumns>
                    <GridColumn Field=@nameof(Order.Version1) HeaderText="Version 1" Format="d" Type="ColumnType.DateOnly" TextAlign="TextAlign.Right" Width="130"></GridColumn>
                    <GridColumn Field=@nameof(Order.Version2) HeaderText="Version 2" Type="ColumnType.TimeOnly" TextAlign="TextAlign.Right" Width="130"></GridColumn>
                    <GridColumn Field=@nameof(Order.Compare) HeaderText="Compare" TextAlign="TextAlign.Right" Width="120"></GridColumn>
                </GridColumns>
            </GridColumn>
            <GridColumn HeaderText="Mat Ext." HeaderTextAlign="TextAlign.Center">
                <GridColumns>
                    <GridColumn Field=@nameof(Order.Version1) HeaderText="Version 1" Format="d" Type="ColumnType.DateOnly" TextAlign="TextAlign.Right" Width="130"></GridColumn>
                    <GridColumn Field=@nameof(Order.Version2) HeaderText="Version 2" Type="ColumnType.TimeOnly" TextAlign="TextAlign.Right" Width="130"></GridColumn>
                    <GridColumn Field=@nameof(Order.Compare) HeaderText="Compare" TextAlign="TextAlign.Right" Width="120"></GridColumn>
                </GridColumns>
            </GridColumn>
            <GridColumn HeaderText="Shop Labor Rate Ext." HeaderTextAlign="TextAlign.Center">
                <GridColumns>
                    <GridColumn Field=@nameof(Order.Version1) HeaderText="Version 1" Format="d" Type="ColumnType.DateOnly" TextAlign="TextAlign.Right" Width="130"></GridColumn>
                    <GridColumn Field=@nameof(Order.Version2) HeaderText="Version 2" Type="ColumnType.TimeOnly" TextAlign="TextAlign.Right" Width="130"></GridColumn>
                    <GridColumn Field=@nameof(Order.Compare) HeaderText="Compare" TextAlign="TextAlign.Right" Width="120"></GridColumn>
                </GridColumns>
            </GridColumn>
            <GridColumn HeaderText="Field Labor Rate Ext." HeaderTextAlign="TextAlign.Center">
                <GridColumns>
                    <GridColumn Field=@nameof(Order.Version1) HeaderText="Version 1" Format="d" Type="ColumnType.DateOnly" TextAlign="TextAlign.Right" Width="130"></GridColumn>
                    <GridColumn Field=@nameof(Order.Version2) HeaderText="Version 2" Type="ColumnType.TimeOnly" TextAlign="TextAlign.Right" Width="130"></GridColumn>
                    <GridColumn Field=@nameof(Order.Compare) HeaderText="Compare" TextAlign="TextAlign.Right" Width="120"></GridColumn>
                </GridColumns>
            </GridColumn>
        </GridColumns>
    </SfGrid>


</div>


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


    protected override void OnInitialized()
    {
        Orders = new List<Order>()
    {
        new Order() { DrawingBySheet = "Drawing by Sheet 09: P2.4A_Roof Plumbing Plan - Area A", MiscBreakoutItems = "Misc Breakout Items 00: (None)", Category = 1, Size = 2, ItemDesc = 3, Version1 = 1500, Version2 = 1250 },
        new Order() { DrawingBySheet = "Drawing by Sheet 09: P2.4A_Roof Plumbing Plan - Area A", MiscBreakoutItems =  "Misc Breakout Items 00: (None)", Category = 2, Size = 3, ItemDesc = 4, Version1 = 1750, Version2 = 1350 },
        new Order() { DrawingBySheet = "Drawing by Sheet 09: P2.4A_Roof Plumbing Plan - Area A", MiscBreakoutItems =  "Misc Breakout Items 00: (None)", Category = 3, Size = 4, ItemDesc = 5, Version1 = 1900, Version2 = 1450 },
        new Order() { DrawingBySheet = "Drawing by Sheet 09: P2.4A_Roof Plumbing Plan - Area A", MiscBreakoutItems =  "Misc Breakout Items 00: (None)", Category = 4, Size = 5, ItemDesc = 6, Version1 = 2050, Version2 = 1550 },
        new Order() { DrawingBySheet = "Drawing by Sheet 09: P2.4A_Roof Plumbing Plan - Area A", MiscBreakoutItems =  "Misc Breakout Items 00: (None)", Category = 5, Size = 6, ItemDesc = 7, Version1 = 2200, Version2 = 1650 },
        new Order() { DrawingBySheet = "Drawing by Sheet 09: P2.4A_Roof Plumbing Plan - Area A", MiscBreakoutItems =  "Misc Breakout Items 00: (None)", Category = 6, Size = 7, ItemDesc = 8, Version1 = 2350, Version2 = 1750 },
        new Order() { DrawingBySheet = "Drawing by Sheet 09: P2.4A_Roof Plumbing Plan - Area A", MiscBreakoutItems =  "Misc Breakout Items 00: (None)", Category = 7, Size = 8, ItemDesc = 9, Version1 = 2500, Version2 = 1850 },
        new Order() { DrawingBySheet = "Drawing by Sheet 09: P2.4A_Roof Plumbing Plan - Area A", MiscBreakoutItems =  "Misc Breakout Items 00: (None)", Category = 8, Size = 9, ItemDesc = 10, Version1 = 2650, Version2 = 1950 },
        new Order() { DrawingBySheet = "Drawing by Sheet 09: P2.4A_Roof Plumbing Plan - Area A", MiscBreakoutItems =  "Misc Breakout Items 00: (None)", Category = 9, Size = 10, ItemDesc = 11, Version1 = 2800, Version2 = 2050 },
        new Order() { DrawingBySheet = "Drawing by Sheet 09: P2.4A_Roof Plumbing Plan - Area A", MiscBreakoutItems =  "Misc Breakout Items 00: (None)", Category = 10, Size = 11, ItemDesc = 12, Version1 = 2950, Version2 = 2150 }
    };
    }


    public class Order
    {
        public string DrawingBySheet { get; set; }
        public string MiscBreakoutItems { get; set; }
        public int Category { get; set; }
        public int Size { get; set; }
        public int ItemDesc { get; set; }
        public int Version1 { get; set; }
        public int Version2 { get; set; }
        public int Compare => Version1 - Version2;
    }
}

[Prathap Senthil]

Hi Phúc Mai Hoài,

Based on your requirements, we have utilized the Custom Attribute feature in the Gridcolumn and customized CSS to meet your needs. Please refer to the code snippet and sample below for your reference.

<div style="padding:20px;overflow:auto">

    <SfGrid DataSource="@Orders"

        AllowPaging="false"

        AllowResizing="true"

        AllowSelection=true

        EnableAutoFill=true  >

 

 

        <GridColumns>

            <GridColumn Field=@nameof(Order.DrawingBySheet) CustomAttributes="@(new Dictionary<string, object>(){ { "class", "custom-css" }})" Width="130">

            </GridColumn>

            <GridColumn Field=@nameof(Order.MiscBreakoutItems) CustomAttributes="@(new Dictionary<string, object>(){ { "class", "custom-css" }})" HeaderText="Misc Breakout Items" TextAlign="TextAlign.Right" HeaderTextAlign="TextAlign.Center" Width="130"></GridColumn>

            <GridColumn Field=@nameof(Order.Category) HeaderText="Category" CustomAttributes="@(new Dictionary<string, object>(){ { "class", "custom-css" }})" TextAlign="TextAlign.Right" HeaderTextAlign="TextAlign.Center" Width="130"></GridColumn>

            <GridColumn Field=@nameof(Order.Size) HeaderText="Size" CustomAttributes="@(new Dictionary<string, object>(){ { "class", "custom-css" }})" TextAlign="TextAlign.Right" HeaderTextAlign="TextAlign.Center" Width="130"></GridColumn>

           

        </GridColumns>

    </SfGrid>

 

 

</div>

 

 

<style>

  

 

    .custom-css .e-headercelldiv {

        height: 45px;

    }

</style>

Reference:
https://blazor.syncfusion.com/documentation/datagrid/cell#using-property

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

Regards,
Prathap Senthil