How To Format Flexgrid for Multi-line or Header Text Wrapping

Posted by: john.kiowski on 4 September 2019, 2:36 am EST

  • Posted 4 September 2019, 2:36 am EST

    I'm using the FlexGrid in a UWP project.

    What is the recommended technique for formatting FlexGrid column headers for header text wrapping, or multi-line header text? I have a requirement for some long header text that won't scale well on a single line.

    I've looked through the samples and don't see an example of this. Is it supported in the UWP FlexGrid? My preference is to do it in XAML, if possible.

    Thanks,
    John
  • Marked as Answer

    Replied 4 September 2019, 3:28 pm EST

    Hello John,

    To format FlexGrid's column header to show long header text, you can use a custom CellFactory and override its CreateColumnHeaderContent method to wrap the header textblock as follows:
    public class MyFactory : CellFactory
    {
    public MyFactory() { }
    public override void CreateColumnHeaderContent(C1FlexGrid grid, Border bdr, CellRange rng)
    {
    base.CreateColumnHeaderContent(grid, bdr, rng);
    var header = ((FrameworkElement)(bdr.Child as Grid).Children[0]) as TextBlock;
    header.TextWrapping = TextWrapping.Wrap;
    }
    }

    Additionally, you need to change the ColumnHeader row height as well
    private void Page_Loaded(object sender, RoutedEventArgs e)
    {
    _grid.ItemsSource = _view;
    _grid.CellFactory = new MyFactory();
    _grid.ColumnHeaders.Rows[0].Height = 100;
    }
    I've also attached a simple application to demonstrate the whole code.

    Bets wishes,
    Ruchir
    Wrap_ColumnHeader.zip
  • Replied 5 September 2019, 6:51 am EST

    Thank you, this worked.
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels