Search code examples
wpfxamlgridviewdatacolumn

Autoresize gridview columns header according to their data

How I can auto resize each data column header on my gridview according to their data and it should be fit to the screen without scrollbars to view the remaining data in the grid? Heres my sample code..

Xaml:

<telerik:GridViewDataColumn Header="First Name" Width="*" DataMemberBinding="{Binding FirstName}" />
                <telerik:GridViewDataColumn Header="Last Name" Width="*" DataMemberBinding="{Binding LastName}" />
                <telerik:GridViewDataColumn Header="Middle Name" Width="*" DataMemberBinding="{Binding MiddleName}"  />
                <telerik:GridViewDataColumn Header="Registration Day" Width="*" DataMemberBinding="{Binding RegistrationDay, StringFormat={}{0:dd/MM/yyyy}}" />
                <telerik:GridViewDynamicHyperlinkColumn Header="Email" Width="*" DataMemberBinding="{Binding Email}" />
                <telerik:GridViewDataColumn Header="Password" Width="*" DataMemberBinding="{Binding Access}" />

Hope you can help me. Thanks!

Solution

  • here is an example showing answers to most of the points in the question

    <DataGrid>
    <DataGrid.Resources>
        <Style TargetType="TextBlock"
               x:Key="trimStyle">
            <Setter Property="TextTrimming"
                    Value="CharacterEllipsis" />
        </Style>
    </DataGrid.Resources>
    <DataGrid.Columns>
        <DataGridTextColumn Header="Resize to header width"
                            Width="SizeToHeader"
                            Binding="{Binding}"
                            ElementStyle="{StaticResource trimStyle}" />
        <DataGridTextColumn Header="Resize to cell content"
                            Width="SizeToCells"
                            Binding="{Binding}" />
        <DataGridTextColumn Header="Resize to header &amp; cell content"
                            Width="Auto"
                            Binding="{Binding}" />
        <DataGridTextColumn Header="Distribute the remaining space"
                            Width="Auto"
                            Binding="{Binding}"
                            ElementStyle="{StaticResource trimStyle}" />
    </DataGrid.Columns>
    <sys:String>a string which is long</sys:String>
    <sys:String>a string which is long, a really long string</sys:String>
    <sys:String>another string which is long</sys:String>
    <sys:String>another string which is long, a really long string</sys:String>
</DataGrid>

    result

    result

    as you can see that we have few modes of column sizing which determines the width of column. For ellipsis ... on long text I have defined a style for TextBlock with TextTrimming options enabled and used the same as ElementStyle for the desired columns

    refer to Sizing Options in the DataGrid Control for details on datagrid sizing options

    the example is based on DataGrid but seems like you are using teleric controls, but I am sure it would apply to the teleric controls in similar manner. I do not have teleric controls so I may not flash an example for the same.