Wrap header text?

23 posts, 1 answers
  1. Rick Glos
    Rick Glos avatar
    70 posts
    Member since:
    Mar 2009

    Posted 14 Apr 2009 Link to this post

    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)?
  2. Answer
    Stefan Dobrev
    Admin
    Stefan Dobrev avatar
    790 posts

    Posted 15 Apr 2009 Link to this post

    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.
  3. DevCraft banner
  4. Rick Glos
    Rick Glos avatar
    70 posts
    Member since:
    Mar 2009

    Posted 20 Apr 2009 Link to this post

    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.

  5. Stefan Dobrev
    Admin
    Stefan Dobrev avatar
    790 posts

    Posted 21 Apr 2009 Link to this post

    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.
  6. BlogReader
    BlogReader avatar
    27 posts
    Member since:
    Apr 2009

    Posted 04 May 2009 Link to this post

    Hello Rick,
    Can you comment on when 1 (property on the column) will be implemented and when will it be available?
  7. BlogReader
    BlogReader avatar
    27 posts
    Member since:
    Apr 2009

    Posted 04 May 2009 Link to this post

    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?
  8. Stefan Dobrev
    Admin
    Stefan Dobrev avatar
    790 posts

    Posted 07 May 2009 Link to this post

    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.
  9. Andrew
    Andrew avatar
    1 posts
    Member since:
    Jul 2009

    Posted 05 Aug 2009 Link to this post

    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.
  10. Stefan Dobrev
    Admin
    Stefan Dobrev avatar
    790 posts

    Posted 06 Aug 2009 Link to this post

    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.
  11. Kevin
    Kevin avatar
    2 posts
    Member since:
    Jun 2009

    Posted 17 Aug 2009 Link to this post

    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

  12. Stefan Dobrev
    Admin
    Stefan Dobrev avatar
    790 posts

    Posted 20 Aug 2009 Link to this post

    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.
  13. Simon Chan
    Simon Chan avatar
    13 posts
    Member since:
    Jul 2009

    Posted 23 Sep 2009 Link to this post

    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
  14. Pavel Pavlov
    Admin
    Pavel Pavlov avatar
    2039 posts

    Posted 25 Sep 2009 Link to this post

    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.
  15. Simon Chan
    Simon Chan avatar
    13 posts
    Member since:
    Jul 2009

    Posted 25 Sep 2009 Link to this post

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

    Thanks,
    Simon
  16. Sajjad Shah
    Sajjad Shah avatar
    33 posts
    Member since:
    Nov 2009

    Posted 12 Jun 2010 Link to this post

    This does not work for me. I have got the exact same code but it does not wrap at all...
  17. Sajjad Shah
    Sajjad Shah avatar
    33 posts
    Member since:
    Nov 2009

    Posted 12 Jun 2010 Link to this post

    Hi Stefan,
    Your post from August 6 does not work for me.
  18. Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 14 Jun 2010 Link to this post

    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.
  19. Stephen
    Stephen avatar
    40 posts
    Member since:
    Jul 2008

    Posted 20 Jun 2011 Link to this post

    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
  20. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 20 Jun 2011 Link to this post

    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
    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
  21. Yonghan
    Yonghan avatar
    27 posts
    Member since:
    Dec 2010

    Posted 25 Feb 2013 Link to this post

    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
  22. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 25 Feb 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  23. Jeff
    Jeff avatar
    25 posts
    Member since:
    Feb 2009

    Posted 03 Feb 2014 in reply to Stefan Dobrev Link to this post

    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.
  24. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 04 Feb 2014 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
Back to Top
DevCraft banner