Proper way to right align grid header text?

[Roger]

I have a column which has its values aligned to the right (it is a currency field). I'd like the header text to also be right-aligned for that column. I have found a few references to how to align the cell text (and have done that successfully), but I cannot find anywhere where adjusting the header text alignment is documented. Can someone help me out?

This is what I've got now - note that the column data is successfully right aligned, however the header text stays left aligned regardless of what HorizontalContentAlignment or HorizontalAlignment are set to:

::DOES NOT WORK::

<telerikGrid:DataGridTextColumn Header="Rate"
                                PropertyName="ORDnPrice">
  <telerikGrid:DataGridTextColumn.HeaderStyle>
    <Style TargetType="gridPrimitives:DataGridColumnHeader">
      <Setter Property="Background" Value="#DD622D" />
      <Setter Property="HorizontalContentAlignment"
              Value="Right" />
      <Setter Property="HorizontalAlignment"
              Value="Right" />
    </Style>
  </telerikGrid:DataGridTextColumn.HeaderStyle>
  <telerikGrid:DataGridTextColumn.CellContentStyle>
    <Style TargetType="TextBlock">
      <Setter Property="HorizontalAlignment"
              Value="Right" />
      <Setter Property="VerticalAlignment"
              Value="Center" />
    </Style>
  </telerikGrid:DataGridTextColumn.CellContentStyle>

I've tired several other routes as well, but no luck. Thanks in advance!

[Ivaylo Gergov]

Hi Roger,

Thank you for contacting us.

At this moment, in order to change the alignment of the DataGridColumnHeader, you need to redefine its control template. For you convenience, I have attached a sample project that shows this scenario.

I admit, this is not straightforward, and we will extend the current template to depend on the HorizontalContentAlignment and VerticalContentAlignment properties. The fix will be available in our Q2 2013 BETA release, expected within 3 weeks.

I hope this helps. I have also updated your Telerik points as a token of gratitude for your valuable feedback. Do not hesitate to write us back should you have any other question/issue with our tools.

Kind regards,
Ivaylo Gergov
the Telerik team

[Roger]

Thanks for the help, I'll give it a whirl!

[Roger]

Is there an update to this by chance? Unfortunately using the provided sample hasn't worked for me. The example would cause all columns to be right-aligned. I tried to use this style within my column, but it causes a run-time exception. Here is that code:

            <telerikGrid:DataGridTemplateColumn Header="Rate">
              <telerikGrid:DataGridTemplateColumn.HeaderStyle>
                <Style TargetType="gridPrimitives:DataGridColumnHeader">
                  <Setter Property="Foreground"
                          Value="{StaticResource TelerikGridHeaderForegroundBrush}" />
                  <Setter Property="Background"
                          Value="{StaticResource TelerikGridHeaderBackgroundBrush}" />
                  <Setter Property="MinWidth"
                          Value="6" />
                  <Setter Property="MinHeight"
                          Value="6" />
                  <Setter Property="Template">
                    <Setter.Value>
                      <ControlTemplate TargetType="gridPrimitives:DataGridColumnHeader">
                        <Grid Background="{TemplateBinding Background}"
                              Margin="{TemplateBinding Padding}">
                          <StackPanel Orientation="Horizontal"
                                      VerticalAlignment="Center"
                                      HorizontalAlignment="Right">
                            <ContentPresenter Content="{TemplateBinding Content}"
                                              Margin="8" />
                            <TextBlock Text="{Binding SortDirection, Converter={StaticResource SortDirectionConverter}}"
                                       FontFamily="{StaticResource SymbolThemeFontFamily}"
                                       FontSize="10"
                                       Margin="2,0,4,2"
                                       VerticalAlignment="Center" />
                          </StackPanel>
                          <Rectangle Fill="{StaticResource TelerikGridInnerShadowBrush}"
                                     Height="1"
                                     VerticalAlignment="Bottom"
                                     Margin="0,1,0,3" />
                          <Rectangle Fill="{StaticResource TelerikGridShadowBrush}"
                                     Height="3"
                                     VerticalAlignment="Bottom"
                                     Margin="0,3,0,0" />
                        </Grid>
                      </ControlTemplate>
                    </Setter.Value>
                  </Setter>
                </Style>
              </telerikGrid:DataGridTemplateColumn.HeaderStyle>
              <telerikGrid:DataGridTemplateColumn.CellContentTemplate>
                <DataTemplate>
                  <TextBlock HorizontalAlignment="Right"
                             Margin="8,0"
                             Text="{Binding ORDnPrice, Converter={StaticResource currencyCvt}}"                             
                             VerticalAlignment="Center" />
                </DataTemplate>
              </telerikGrid:DataGridTemplateColumn.CellContentTemplate>      

And here is that crash:
Telerik.UI.Xaml.Controls.MissingTemplatePartException
   at Telerik.UI.Xaml.Controls.RadControl.GetTemplatePartField[T](String name)
   at Telerik.UI.Xaml.Controls.Grid.Primitives.DataGridColumnHeader.ApplyTemplateCore()
   at Telerik.UI.Xaml.Controls.RadControl.OnApplyTemplate()
   at Windows.UI.Xaml.UIElement.Measure(Size availableSize)
   at Telerik.UI.Xaml.Controls.Grid.DataGridColumn.MeasureCellContainer(Double availableWidth, UIElement container)
   at Telerik.UI.Xaml.Controls.Grid.DataGridColumn.MeasureCell(GridCellModel cell, Double availableWidth)
   at Telerik.UI.Xaml.Controls.Grid.RadDataGrid.MeasureHeaderCell(GridHeaderCellModel cell)
   at Telerik.UI.Xaml.Controls.Grid.RadDataGrid.Telerik.Core.IElementPresenter.MeasureContent(Object owner, Object content)
   at Telerik.UI.Xaml.Controls.Grid.GridModel.Telerik.UI.Xaml.Controls.Grid.ITable.Measure(Node node)
   at Telerik.UI.Xaml.Controls.Grid.NodePool`2.GenerateContainer(IList`1 itemInfos)
   at Telerik.UI.Xaml.Controls.Grid.NodePool`2.OnMeasure(RadSize availableSize, Double offset)
   at Telerik.UI.Xaml.Controls.Grid.GridModel.MeasureHeaderRow(RadSize newAvailableSize)
   at Telerik.UI.Xaml.Controls.Grid.RadDataGrid.OnHeaderRowMeasure(RadSize newAvailableSize)
   at Telerik.UI.Xaml.Controls.Grid.Primitives.DataGridColumnHeaderPanel.MeasureOverride(Size availableSize)
   at Windows.UI.Xaml.UIElement.Measure(Size availableSize)
   at Telerik.UI.Xaml.Controls.Grid.Primitives.DataGridRootPanel.MeasureOverride(Size availableSize)   at Windows.UI.Xaml.FrameworkElement.MeasureOverride(Size availableSize)
   at Telerik.UI.Xaml.Controls.RadControl.MeasureOverride(Size availableSize)

Also the resources 'TelerikGridInnerShadowBrush and 'TelerikGridShadowBrush' aren't defined (removing them doesn't fix the above crash).

I'm hoping that maybe column header alignment has been added in an update since May?

Thanks!

[Roger]

[ignore this post - duplicate post after forum error]

[Rosy Topchiyska]

Hi Roger,

Thank you for your question.

In the latest version of the controls you can use the HorizontalContentAlignment property of the HeaderStyle to control the alignment of the header. You can define a Style in the resources of the page and bind the HeaderStyle property of all columns you wish to customize to this Style. Here is an example that shows all properties that can be customized:

<Style TargetType="telerikGridPrimitives:DataGridColumnHeader" x:Key="RightAlignedHeader">
    <Setter Property="Foreground" Value="{StaticResource TelerikGridHeaderForegroundBrush}"/>
    <Setter Property="Background" Value="{StaticResource TelerikGridHeaderBackgroundBrush}"/>
    <Setter Property="HorizontalContentAlignment" Value="Right"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="MinWidth" Value="6"/>
    <Setter Property="MinHeight" Value="6"/>
</Style>

Where:

xmlns:telerikGridPrimitives="using:Telerik.UI.Xaml.Controls.Grid.Primitives"

And this is how you use the style:

<telerikGrid:DataGridTemplateColumn Header="Rate" HeaderStyle="{StaticResource RightAlignedHeader}"/>

You can get the latest version of the controls using the Telerik Visual Studio Extensions, or from this link when you are logged in on the site: http://www.telerik.com/account/your-products/internal-builds.aspx

I hope this was useful. Please, let us know if you need further assistance.

Regards,
Rositsa Topchiyska
Telerik