We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

orientation of StackedColumn header text to Vertical

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


3 Replies

VS Vijayarasan Sivanandham Syncfusion Team March 14, 2023 09:46 AM UTC

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


AL ali replied to Vijayarasan Sivanandham March 15, 2023 10:15 AM UTC

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?



VS Vijayarasan Sivanandham Syncfusion Team March 15, 2023 02:05 PM UTC

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

Loader.
Live Chat Icon For mobile
Up arrow icon