Alphabetized Column Chooser

3 posts, 0 answers
  1. Brian
    Brian avatar
    19 posts
    Member since:
    Feb 2014

    Posted 19 May 2014 Link to this post

    I've got a RadGridView with a column chooser almost exactly following the code shown in the Telerik documentation
    <telerik:RadGridView>
        <telerik:RadGridView.ControlPanelItems>
            <telerik:ControlPanelItem ButtonTooltip="{x:Static res:ColumnChooserTooltip}">
                <telerik:ControlPanelItem.Content>
                    <ListBox ItemsSource="{Binding Columns}" Style="{StaticResource ColumnChooserListBox}">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <CheckBox Content="{Binding Header, Mode=OneWay}" IsChecked="{Binding IsVisible, Mode=TwoWay}" Style="{StaticResource ListItemsCheckBox}" />
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </telerik:ControlPanelItem.Content>
            </telerik:ControlPanelItem>
        </telerik:RadGridView.ControlPanelItems>
        <telerik:RadGridView.Columns>
            <telerik:GridViewDataColumn Header="{x:Static res:Column1Name}" />
            <telerik:GridViewDataColumn Header="{x:Static res:Column2Name}" />
            <telerik:GridViewDataColumn Header="{x:Static res:Column3Name}" />
            ...
        </telerik:RadGridView.Columns>
    </telerik:RadGridView>

    And it works great! But, I have approximately 100 columns defined. They are declared in the default order I want them displayed. However, I would like the list in the column chooser to be displayed in alphabetical order to make finding the columns in the list easier. I've tried adding a sort description:

    <telerik:RadGridView.Resources>
        <CollectionViewSource Source="{Binding Columns}" x:Key="AlphabetizedColumnsSource">
            <CollectionViewSource.SortDescriptions>
                <scm:SortDescription PropertyName="Header"/>
            </CollectionViewSource.SortDescriptions>
        </CollectionViewSource>
    </telerik:RadGridView.Resources>
    <telerik:RadGridView.ControlPanelItems>
        <telerik:ControlPanelItem ButtonTooltip="{x:Static res:ColumnChooserTooltip}">
            <telerik:ControlPanelItem.Content>
                <ListBox ItemsSource="{Binding Source={StaticResource AlphabetizedColumnsSource}}" Style="{StaticResource ColumnChooserListBox}">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <CheckBox Content="{Binding Header, Mode=OneWay}" IsChecked="{Binding IsVisible, Mode=TwoWay}" Style="{StaticResource ListItemsCheckBox}" />
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </telerik:ControlPanelItem.Content>
        </telerik:ControlPanelItem>
    </telerik:RadGridView.ControlPanelItems>

    But then it's looking for the Columns binding on the DataContext of the RadGridView instead of on the RadGridView itself. I've tried a few different way to do this and haven't been able to figure it out yet. How can I set this up to give me an alphabetized list of columns in the chooser?

    Thank you!
  2. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 22 May 2014 Link to this post

    Hello Brian,

    One possible way to go is to create a simple converter that orders the columns by their header. It could be something like:
    public class MyConverter : IValueConverter
        {
            public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                var columns = new List<GridViewColumn>(value as GridViewColumnCollection);
                return columns.OrderBy(c=>c.Header);
            }
     
            ...
        }

    The binding of the ListBox could be:
    <ListBox ItemsSource="{Binding Columns, Converter={StaticResource MyConverter}}" BorderThickness="0">


    I attach a sample project illustrating the suggested approach. Does it meet your requirements ? 

    Regards,
    Maya
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  3. Brian
    Brian avatar
    19 posts
    Member since:
    Feb 2014

    Posted 26 May 2014 in reply to Maya Link to this post

    Thank worked great! Thank you!!
Back to Top