Text alignment

[Unknown]

I´ve seen that in the documentation exists the `HeaderTextAlign` property that allows aligning the text on the header, and the `TextAlign` that aligns both the header's and row's text, is there a way to align the header to left and the row text to the right without using templates?

[Vignesh Natarajan]

Hi Christopher,  

Thanks for contacting Syncfusion support.  

Query: “is there a way to align the header to left and the row text to the right without using templates?” 

We have analyzed your query and we have achieved your requirement to move the HeaderText to left using CustomAttributes property of GridColumn. Using CustomAttributes, we have added a class name to that particular column. Using the class name, we have applied specific style to particular column header to align in left side.  

Refer the below code example.  

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

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" CustomAttributes="@(new Dictionary<string, object>(){ { "class", "e-attr" }})" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

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

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn> 

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

    </GridColumns> 

</SfGrid> 

<style> 

    .e-grid .e-gridheader .e-headercell.e-attr .e-headercelldiv 

    { 

        text-align: left !important; 

    } 

</style> 

Refer the below screenshot for the output of above code example.  

 

Refer our ug documentation for your reference 

https://blazor.syncfusion.com/documentation/datagrid/cell/#custom-attributes  

Please get back to us if you have further queries.  

Regards, 

Vignesh Natarajan