Wrap header text?

[Rick Glos]

Some of the column headers in my application are fairly long, i.e. 'Current Period Distinct Customer Count'.

Is there a way to allow the text to wrap to reduce the width of the column while still keeping the default styling and functionality (i.e. filtering, sorting, etc)?

[Stefan Dobrev]

Hello Rick,

You need to redefine HeaderCellTemplate in order to enable header text wrapping. I'm attaching a sample solution which illustrates how to achieve this. Note that this requires functionality that we have added in the recently released service pack.

Hope this helps.

Regards,
Stefan Dobrev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Rick Glos]

Thank you.  I have this working now as per your sample.

A few comments/observations.

1. This is not trivial as I needed to add 165 lines of code to App.xaml
2. I needed this applied to 30 columns so I moved the Style into the Resources of the Grid so that I could just set the HeaderCellStyle on each of the columns.
3. I am concerned about keeping pace with your future releases.  If you decide to change the style/animation of your HeaderCell, I am going to have to figure out how to update those 165 lines of code in the App.xaml file.  How you came up with this I can only guess... I assume I'd have to look into your source code for your GridView to find all these XAML declarations.

[Stefan Dobrev]

Hello Rick,

Thanks for your feedback. Please find my answers in order:

1. We are aware that this task is not an easy one and we are going to provide a property on the column that will do the work.
2. This is the correct way to apply a style on multiple elements.
3. We will provide a sample projects with all themes'  XAML files, so that you can use it as a reference in the future.

Again thanks for your feedback. It is greatly appreciated.
Greetings,
Stefan Dobrev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[BlogReader]

Hello Rick,

Can you comment on when 1 (property on the column) will be implemented and when will it be available?

[BlogReader]

To Telerik Admin,

How can I use this solution if I am not adding columns declaratively in XAML but rather programmatically from the code behind?

[Stefan Dobrev]

Hi Arjun,

We have decided that it is best to introduce a Header property that will allow you to specify a TextBlock with enabled text wrapping. This property will be available in the next internal preview.

If you are creating the columns from code you should get the style from application's resources (if the style is declared there). Here is an example code:

var column = new GridViewDataColumn();
column.HeaderCellStyle = (Style) Application.Current.Resources["WrappedHeaderCellStyle"];

Regards,
Stefan Dobrev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Andrew]

Could you provide a the simplest possible example of how this is done while retaining the sorting and filtering.  I've looked at the various examples and it looks like it takes over a hundred lines of XAML code to wrap the header text.  Wrapping the content text is as simple as "WrapText=true".  Just curious as to why the header has to be so much more complicated?

As BlogReader requested, I'm trying to create the columns dynamically in the code so that I can use metadata to control how the grid is configured and re-use the grid for multiple instances based on the data set (data binding).  It would be nice if it were as simple as saying "WrapHeaderText=true" when the columns are configured.

[Stefan Dobrev]

Hello Andrew,

You can use the new GridViewColumn property Header that we have introduce in Q2 release. Here is a XAML snippet which illustrates how to wrap a long header text:

<telerik:RadGridView AutoGenerateColumns="False">
    <telerik:RadGridView.Columns>
        <telerik:GridViewDataColumn DataMemberBinding="{Binding Name}">
            <telerik:GridViewDataColumn.Header>
                <telerikGrid:AlignmentContentPresenter TextWrapping="Wrap" Content="My long header text" />
            </telerik:GridViewDataColumn.Header>
        </telerik:GridViewDataColumn>
        <telerik:GridViewDataColumn Header="Number" DataMemberBinding="{Binding Number}">
        ...
    </telerik:RadGridView.Columns>
</telerik:RadGridView>

Kind regards,
Stefan Dobrev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Kevin]

Hello Stefan,

I tried to use the new Header property in code, but I got some errors.

code:

void

 

SetColHeader(ObservableCollection<Launcher2ColHeader> l2h)

 

{

 

 

foreach (LfSysInfoService.Launcher2ColHeader item in l2h)

 

{

 

GridViewDataColumn col = new GridViewDataColumn();

 

 

switch (item.FieldType)

 

{

 

case 1:

 

col.DataType =

Type.GetType("System.Boolean");

 

 

break;

 

 

case 3: // custom

 

 

ComboBoxEditorSettings cs = new ComboBoxEditorSettings();

 

cs.ItemsSource = _viewModel.CmdTypeList;

cs.SelectedValuePath =

"Name";

 

cs.DisplayMemberPath =

"Name";

 

 

col.EditorSettings = cs;

 

break;

 

 

case 4:

 

col.DataType =

Type.GetType("System.DateTime");

 

 

break;

 

 

default:

 

col.DataType =

Type.GetType("System.String");

 

 

break;

 

}

 

 

if (item.FieldKey == "TEST_LOG")

 

{

 

if (cboSasFitSite.SelectedIndex == 0)

 

col.CellTemplate = Resources[

"CellLogHyperLinkTemplate"] as DataTemplate;

 

 

else

 

col.CellTemplate = Resources[

"CellMyLogHyperLinkTemplate"] as DataTemplate;

 

}

 

else if (item.FieldKey == "ITR_NO")

 

col.CellTemplate = Resources[

"CellItrHyperLinkTemplate"] as DataTemplate;

 

 

else if (item.FieldKey == "IP")

 

{

col.CellTemplate = Resources[

"CellIpHyperLinkTemplate"] as DataTemplate;

 

}

 

else if (item.FieldKey == "SELECTED")

 

col.CellTemplate = Resources[

"CellCheckBoxTemplate"] as DataTemplate;

 

 

col.CellStyle = Resources[

"CellRegularStyle"] as Style;

 

 

AlignmentContentPresenter alg = new AlignmentContentPresenter();

 

alg.TextWrapping =

TextWrapping.Wrap;

 

alg.Content = item.FieldName;

col.Header = alg;

 

col.TextWrapping =

TextWrapping.Wrap;

 

col.DataMemberBinding =

new System.Windows.Data.Binding(item.FieldKey);

 

col.UniqueName = item.FieldKey;

col.Width =

new GridLength(item.FieldWidth);

 

col.IsReadOnly = !item.FieldUpdate;

 

if (col.IsReadOnly != true)

 

col.DataMemberBinding.Mode = System.Windows.Data.

BindingMode.TwoWay;

 

 

col.IsVisible = item.FieldShow;

 

switch (item.FieldAlign)

 

{

 

case 1:

 

col.HeaderTextAlignment =

TextAlignment.Left;

 

col.TextAlignment =

TextAlignment.Left;

 

 

break;

 

 

case 2:

 

col.HeaderTextAlignment =

TextAlignment.Right;

 

col.TextAlignment =

TextAlignment.Right;

 

 

break;

 

 

 

default:

 

col.HeaderTextAlignment =

TextAlignment.Center;

 

col.TextAlignment =

TextAlignment.Center;

 

 

break;

 

}

col.IsFilterable = item.FieldFilterable;

col.IsGroupable =

true;

 

 

LauncherDataGrid.Columns.Add(col);

 

}

LauncherDataGrid.FrozenColumnCount = 5;

 

}

*************************************************************************************************
And here is the error/trace stack I got:

{System.InvalidOperationException: Element is already the child of another element.
   at MS.Internal.XcpImports.CheckHResult(UInt32 hr)
   at MS.Internal.XcpImports.SetValue(INativeCoreTypeWrapper obj, DependencyProperty property, DependencyObject doh)
   at MS.Internal.XcpImports.SetValue(INativeCoreTypeWrapper doh, DependencyProperty property, Object obj)
   at System.Windows.DependencyObject.SetObjectValueToCore(DependencyProperty dp, Object value)
   at System.Windows.DependencyObject.SetValueInternal(DependencyProperty dp, Object value, Boolean allowReadOnlySet, Boolean isSetByStyle, Boolean isSetByBuiltInStyle, PropertyInvalidationReason reason)
   at System.Windows.DependencyObject.SetValueInternal(DependencyProperty dp, Object value)
   at System.Windows.DependencyObject.SetValue(DependencyProperty dp, Object value)
   at System.Windows.Controls.ContentControl.set_Content(Object value)
   at Telerik.Windows.Controls.GridView.GridViewHeaderCell.SetHeaderText()
   at Telerik.Windows.Controls.GridView.GridViewHeaderCell.OnApplyTemplate()
   at System.Windows.FrameworkElement.OnApplyTemplate(IntPtr nativeTarget)}

*********************************************************************************************************************

Basically, for each column, I create a new AlignmentContentPresenter and set the column's Header to it. Wonder if there is anything else that I have to do?

thanks,

Kevin

[Stefan Dobrev]

Hi Kevin,

I have just tried to add a column in the code behind and set its Header to new AlignmentContentPresnter and everything works fine locally. Are you using the latest version of RadControls for Silverlight - 2009 Q2? If so can you send us a sample project so we can debug your solution?

Best wishes,
Stefan Dobrev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Simon Chan]

I'm using RadControls for Silverlight Q2 2009 and Silvelight 3. When I added the code to wrap header text, it works but introduced a bug.

When I set IsGroupable to true, I got error when I drag the header to group by the column.

When I set IsGroupable to false, I am still able to drag the header but with error.

My objective is to keep the column groupable while set the header to wrap.

Nevertheless, if this cannot be achieved, I'd like to set the column to be not groupable and expect that the header cannot be dragged.

Simon

[Pavel Pavlov]

Hello Simon Chan,

Just a quick note  - We had some known issues when modifying header contents. These were fixed. To check if this has solved your problem you may download the latest internal build. It should be available in your Client.Net account.

All the best,
Pavel Pavlov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Simon Chan]

I've just downloaded Telerik Silverlight RadControls Q2 2009 2 0925 Dev and the issue was fixed.

Thanks,
Simon

[Sajjad Shah]

This does not work for me. I have got the exact same code but it does not wrap at all...

[Sajjad Shah]

Hi Stefan,

Your post from August 6 does not work for me.

[Vlad]

Hi,

 Can you post more info about your grid version? Why not define custom Header for desired column and arrange/style the controls in desired way? You can check the third column in this demo for example:
http://demos.telerik.com/silverlight/#GridView/ColumnTypes

All the best,
Vlad
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Stephen]

When using the new GridViewColumn property Header is there a way to keep the Filter control that pops open the filter dropdown? When I wrap the text in the Header the Filter control is no longer there. It's a PART_DropDownButton if that helps any. 

I would like to wrap the text (or have a fully customised Header) and keep the default Filter button that shows when you set the IsFilterable to true.
thanks,
Stephen

[Vanya Pavlova]

Hi Stephen,

 

In such case you have to predefine the template of GridViewHeaderCell and modify it in an appropriate manner. 

Kind regards,
Vanya Pavlova
the Telerik team

[Yonghan]

hi,
the example (http://demos.telerik.com/silverlight/#GridView/ColumnTypes) can multi-lined header.
but text foreground doesn't work when Grouped.
How to multi-lined with themed foreground text?

Regards,
Yonghan Yoon

[Dimitrina]

Hello,

Indeed, this would be the default behaviour when you have predefined the Header. You can check this forum thread on the same topic. 

Kind regards,
Didie
the Telerik team

[Jeff]

I'm finding that the suggested implementation of specifying a TextBlock as the content of the Header property of a column counter to the implementation of the typical GridViewCustomPropertyProvider which is suggested for persistence of RadGridView user settings. Firstly column.Header.ToString() reduces the header down to it's full type name System.Windows.Controls.TextBlock upon serialization and this value is set back as the content of the header once again upon deserialization. Any advice on how to achieve both effectively without the unwanted side effects.

[Dimitrina]

Hello,

Indeed, you are right. The code column.Header.ToString() reduces the header down to it's full type name System.Windows.Controls.TextBlock as the Header is an object and it is of type TextBlock. If you execute this code: block.ToString(), then the result would be the same. 

You will need to persist the entire TextBlock and then assign it back. Another way would be to just persist the Text of the TextBlock and on restoring the values, set a new TextBlock with the restored settings as a Header.

I hope this helps.

Regards,
Didie
Telerik