orientation of StackedColumn header text to Vertical

[ali]

hi

How to change the text of some StackedColumns to vertical?

In the Attachment , the text of the middle two columns is horizontal and the others are vertical

Attachment: p_e68df88c.zip

[Vijayarasan Sivanandham]

Hi Ali,

Your requirement to change the text of StackedHeaderRow to vertical in SfDataGrid can be achieved by applying RotateTransform and customizing the style GridStackedHeaderCellControl. Refer to the below code snippet,

<Style  TargetType="{x:Type syncfusion:GridStackedHeaderCellControl}">

     <Setter Property="Background" Value="LightSkyBlue" />

     <Setter Property="BorderBrush" Value="Gray" />

     <Setter Property="BorderThickness" Value="0,0,1,1" />

     <Setter Property="HorizontalContentAlignment" Value="Center" />

     <Setter Property="VerticalContentAlignment" Value="Center" />

     <Setter Property="Padding" Value="10,3,2,3" />

     <Setter Property="Foreground" Value="Black" />

     <Setter Property="FontSize" Value="14" />

     <Setter Property="FontWeight" Value="Normal" />

     <Setter Property="IsTabStop" Value="False" />

     <Setter Property="Template">

         <Setter.Value>

             <ControlTemplate TargetType="{x:Type syncfusion:GridStackedHeaderCellControl}">

                 <Border x:Name="PART_StackedHeaderBorder"

                     Background="{TemplateBinding Background}"

                     BorderBrush="{TemplateBinding BorderBrush}"

                     BorderThickness="{TemplateBinding BorderThickness}">

                     <Grid Margin="{TemplateBinding Padding}">

                         <Grid.LayoutTransform>

                             <RotateTransform Angle="90"/>

                         </Grid.LayoutTransform>

                         <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

                     </Grid>

                 </Border>

             </ControlTemplate>

         </Setter.Value>

     </Setter>

</Style>

UG Link: https://help.syncfusion.com/wpf/datagrid/styles-and-templates#styling-stacked-headers

https://help.syncfusion.com/wpf/datagrid/styles-and-templates?cs-save-lang=1&cs-lang=csharp#setting-different-styles-to-stackedheader

The screenshot below shows the header-related information and provides a link to the user guide documentation for the control structure of SfDataGrid.,


UG Link: https://help.syncfusion.com/wpf/datagrid/styles-and-templates?cs-save-lang=1&cs-lang=csharp#control-structure-of-sfdatagrid


We regret to let you know that it is not possible to find the exact cause for the reported issue "the text of the middle two columns is horizontal" without reproducing it on our end and only with the provided details. Please find the tested sample in the attachment.

If you are still facing the issue, could you please provide more information related to your query?

1. Code snippet related to XAML and Code behind customization in SfDataGrid 
2. If possible, kindly modify the attached sample based on your scenario

Kindly revert to us with the above requested details. It will be more helpful for us to check the possibilities for resolving the reported problem.

Regards,
Vijayarasan S

Attachment: SfDataGridDemo_7509b009.zip

[ali]

Thank you

I mean that some columns be vertical and others be horizontal

This style shows all columns vertically

Can this style be applied to a specific column?

[Vijayarasan Sivanandham]

Ali,

By default, the column’s header text is displayed horizontal in SfDataGrid. If you want to change the specific column header text into vertical can be achieved by setting the customized header style into the HeaderStyle property of the specific GridColumn. Refer to the below code snippet,

<syncfusion:GridTextColumn MappingName="EmployeeGender" HeaderText="Gender" HeaderStyle="{StaticResource headerVerticalStyle}"  />

<syncfusion:GridTextColumn MappingName="ManagerID" HeaderText="Sample"  HeaderStyle="{StaticResource headerStyle}" />

<syncfusion:GridTextColumn MappingName="EmployeeDesignation" HeaderText="Sample Text"  HeaderStyle="{StaticResource headerStyle}" />

<syncfusion:GridCurrencyColumn MappingName="EmployeeSalary" HeaderText="Salary"  HeaderStyle="{StaticResource headerVerticalStyle}" />

The screenshot show the column style applied for a specific column,



UG Link: https://help.syncfusion.com/wpf/datagrid/styles-and-templates?cs-save-lang=1&cs-lang=csharp#styling-header-cell

Also, if you need to achieve this for the stacked header it will be achievable by overriding the default renderer of StackedHeader. Refer to the below code snippet,

//Customize the GridStackedHeaderCellRenderer style

public class GridCustomStackedRenderer : GridStackedHeaderCellRenderer

{

    public GridCustomStackedRenderer()

    {

 

    }

 

    public override void OnInitializeEditElement(DataColumnBase dataColumn, GridStackedHeaderCellControl uiElement, object dataContext)

    {

        var stackedColumn = dataContext as StackedColumn;

 

        //Here cutomize based on your scenario

        if (stackedColumn != null)

        {

            if (stackedColumn.MappingName == "Header")

                uiElement.Style = App.Current.MainWindow.Resources["stackedHeaderVerticalStyle"] as Style;

 

            else if (stackedColumn.MappingName == "CustomerDetails")

                uiElement.Style = App.Current.MainWindow.Resources["stackedHeaderStyle"] as Style;

        }

        base.OnInitializeEditElement(dataColumn, uiElement, dataContext);

    }

}

The screenshot show the different style applied for different stacked header,


UG Link: https://help.syncfusion.com/wpf/datagrid/styles-and-templates?cs-save-lang=1&cs-lang=csharp#setting-different-styles-to-stackedheader

Find the sample demo in the attachment.

Regards,

Vijayarasan S

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Attachment: SfDataGridDemo_c2c4cb89.zip