DataGridTextColumn Header Text Wrapping

[urja]

I want to wrap truncate text of header if goes outside of header width area. How to Wrap Text in Column Header?

If header is too long then it should display

1. "Long Header Te.." (No wrapping and text trimming support.) 

2. "Long Header

     Text" (Wrapping and setting into next line)

Below is the Xaml code for column mentioned:

<telerikGrid:DataGridTextColumn PropertyName="Country" Header="Long Header Text" SizeMode="Fixed" Width="100" />

I tried another solution mentioned below, but while dragging this column to Grouping Panel it throws exception - "System.Runtime.InteropServices.COMException: No installed components were detected."

<telerikGrid:DataGridTextColumn PropertyName="Country">

        <telerikGrid:DataGridTextColumn.Header>

            <TextBlock>

                <TextBlock.Inlines>

                      <Run Text="Access"/>

                      <LineBreak/>

                      <Run Text="cat."/>

                </TextBlock.Inlines>

            </TextBlock>

        </telerikGrid:DataGridTextColumn.Header>

</telerikGrid:DataGridTextColumn>

[Lance | Manager Technical Support]

Hi Urja,

Your second approach is the correct one for this scenario. I'm not sure why you're seeing that exception, but it's not due to the header. See the attached demo's Name column to confirm it works as expected when grouping:

<grid:DataGridTextColumn PropertyName="Name" SizeMode="Fixed" Width="100">
    <grid:DataGridTextColumn.Header>
        <TextBlock>
            <TextBlock.Inlines>
                <Run Text="Access" />
                <LineBreak />
                <Run Text="cat." />
            </TextBlock.Inlines>
        </TextBlock>
    </grid:DataGridTextColumn.Header>
</grid:DataGridTextColumn>

Here's the result at runtime:

Normal



Grouped




Control Template

For ultimate control over the content of the header, you can use a custom ControlTemplate. See my attached demo's Age column, it references a static resource defined in App.xaml. In the ControlTemplate, you'll find a ContentPresenter that renders the Header. 

Important: Don't forget to edit both copies of the ControlTemplate (in the Default theme and Light theme dictionaries). I did not make any changes other than the code comment.




This resource is used by the Age column:

<grid:DataGridTextColumn PropertyName="Age" Header="Age">
    <grid:DataGridTextColumn.HeaderStyle>
        <Style TargetType="primitives:DataGridColumnHeader">
            <Setter Property="Template" Value="{StaticResource CustomHeaderControlTemplate}" />
        </Style>
    </grid:DataGridTextColumn.HeaderStyle>
</grid:DataGridTextColumn>

Side Note:

Because this question was asked on the Telerik forums instead of StackOverflow or GitHub, the project is referencing the commercial version of UI for UWP. If you are using the open source version, you'll want to update the project references before building it.

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

[urja]

<grid:DataGridTextColumn PropertyName="Name" SizeMode="Fixed" Width="100">
    <grid:DataGridTextColumn.Header>
        <TextBlock>
            <TextBlock.Inlines>
                <Run Text="Access" />
                <LineBreak />
                <Run Text="cat." />
            </TextBlock.Inlines>
        </TextBlock>

This Approach works, but on grouping same column more than one time, it throws exception.
    </grid:DataGridTextColumn.Header>
</grid:DataGridTextColumn>

 

 

[Lance | Manager Technical Support]

Hello Urja,

Thank you for the additional information on how to make the exception occur. I was able able to replicate it, both with and without grouping.

I worked with the developers this morning to identify the underlying issue, which has been logged in this GitHub Issue: Dragging Column Header with UIElement Content Throws Exception

The issue was fixed and was submitted in this pending Pull Request: Set the Content of the DataGrid's DragVisual to null in order to prev…


Workaround

While you wait for the fix to be merged and included in the next release, you can prevent this from occurring by replacing the Header's ContentPresenter with your cusotm content:



Then, for the Access column, set the Template property of the HeaderStyle

<grid:DataGridTextColumn PropertyName="Name" SizeMode="Fixed" Width="100">
    <grid:DataGridTextColumn.HeaderStyle>
        <Style TargetType="primitives:DataGridColumnHeader">
            <Setter Property="Template" Value="{StaticResource AccessColumnHeaderControlTemplate}" />
        </Style>
    </grid:DataGridTextColumn.HeaderStyle>
</grid:DataGridTextColumn>

Demo

I've attached the updated version of the app with this implemented. Important note: There is a side effect of doing this, when you're dragging the column header, you will see a different visual, the property name. At this time, that cannot be prevented.

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik