Alphabetized Column Chooser

[Brian]

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!

[Maya]

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

 

 

[Brian]

Thank worked great! Thank you!!