Dynamic Column Header Binding

[Dan Pingel]

Hi,

I am using Caliburn Micro to implement my MVVM pattern. I bind a BindableCollection of Order objects as the ItemsSource for the GridView.

I'm doing a custom sort of the collection in the ViewModel, based on a selected predefined sort order (also stored in the ViewModel as a BindableCollection of objects).

What I'd like to do is add an arrow image to any columns that are in the selected predefined sort.

Here's part of my ViewModel:

private BindableCollection<Order> _availableOrders;
public BindableCollection<Order> AvailableOrders {
    get { return _availableOrders; }
    set {
        _availableOrders = value;
        NotifyOfPropertyChange(() => AvailableOrders);
    }
}

private BindableCollection<OrderSortDefinition> _orderSortDefinitions;
public BindableCollection<OrderSortDefinition> OrderSortDefinitions {
    get { return _orderSortDefinitions; }
    set {
        _orderSortDefinitions = value;
        NotifyOfPropertyChange(() => OrderSortDefinitions);
    }
}

private OrderSortDefinition _selectedOrderSortDefinition;
public OrderSortDefinition SelectedOrderSortDefinition {
    get { return _selectedOrderSortDefinition; }
    set {
        if(value != _selectedOrderSortDefinition) {
            _selectedOrderSortDefinition = value;
            NotifyOfPropertyChange(() => SelectedOrderSortDefinition);
        }
    }
}

The OrderSortDefinition has multiple properties that I plan on binding to the column headers to display the sort image. Here's a sample:

public class OrderSortDefinition {
    public OrderSortDefinition() {
        this.Name = string.Empty;
        this.Details = new List<OrderSortInfo>();
    }

    public string Name { get; set; }
    public IList<OrderSortInfo> Details { get; set; }

    public bool HasDetails {
        get { return null != Details && Details.Count > 0; }
    }

    public Tuple<string, DynamicSortDirection>[] GetSortCriterion() {
        List<Tuple<string, DynamicSortDirection>> criterion = new List<Tuple<string, DynamicSortDirection>>();

        foreach(OrderSortInfo sortInfo in Details)
            criterion.Add(sortInfo.GetDynamicSortCriteria());

        return criterion.ToArray();
    }

    public bool? IsToolingAscending {
        get { return GetSortDirectionByProperty(OrderProperty.ToolingCode); }
    }

    public bool? IsMaterialAscending {
        get { return GetSortDirectionByProperty(OrderProperty.MaterialCode); }
    }

    public bool? IsOrderAscending {
        get { return GetSortDirectionByProperty(OrderProperty.OrderCode); }
    }

    public bool? IsFootageAscending {
        get { return GetSortDirectionByProperty(OrderProperty.Footage); }
    }

    public bool? IsCustomerAscending {
        get { return GetSortDirectionByProperty(OrderProperty.CustomerName); }
    }

    public bool? IsDateAscending {
        get { return GetSortDirectionByProperty(OrderProperty.RequestedDate); }
    }

    public bool? IsTruckAscending {
        get { return GetSortDirectionByProperty(OrderProperty.TruckNumber); }
    }

    private bool? GetSortDirectionByProperty(OrderProperty property) {
        var sortInfo = Details.Where(p => p.Association == property).First();

        if(null != sortInfo)
            return sortInfo.SortDirection == DynamicSortDirection.Ascending;
        else
            return null;
    }
}

And finally, here's where I set up the GridView in the XAML file:

<telerik:RadGridView x:Name="AvailableOrders" ItemsSource="{Binding AvailableOrders}"
                              AutoGenerateColumns="False"
                              ShowGroupPanel="False"
                              IsReadOnly="True"
                              CanUserSortColumns="False"
                              IsFilteringAllowed="False"
                              SelectionMode="Extended">
    <telerik:RadGridView.Columns>
        <telerik:GridViewDataColumn DataMemberBinding="{Binding PCode}">
            <telerik:GridViewColumn.Header>
                <StackPanel Orientation="Horizontal"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center">
                    <TextBlock Text="Tooling"
                               VerticalAlignment="Center"
                               HorizontalAlignment="Center" />
                    <Image Source="{Binding SelectedOrderSortDefinition.IsToolingAscending, Converter={StaticResource NullBoolToImageConverter}}"
                           VerticalAlignment="Center"
                           HorizontalAlignment="Center"
                           Margin="3"
                           MaxWidth="20"
                           MinWidth="20" />
                </StackPanel>
            </telerik:GridViewColumn.Header>
        </telerik:GridViewDataColumn>
        <telerik:GridViewDataColumn DataMemberBinding="{Binding MaterialCode}">
            <telerik:GridViewColumn.Header>
                <StackPanel Orientation="Horizontal"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center">
                    <TextBlock Text="Material"
                               VerticalAlignment="Center"
                               HorizontalAlignment="Center" />
                    <Image Source="{Binding SelectedOrderSortDefinition.IsMaterialAscending, Converter={StaticResource NullBoolToImageConverter}}"
                           VerticalAlignment="Center"
                           HorizontalAlignment="Center"
                           Margin="3"
                           MaxWidth="15"
                           MinWidth="15" />
                </StackPanel>
            </telerik:GridViewColumn.Header>
        </telerik:GridViewDataColumn>
        <telerik:GridViewDataColumn DataMemberBinding="{Binding OrderCode}">
            <telerik:GridViewColumn.Header>
                <StackPanel Orientation="Horizontal"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center">
                    <TextBlock Text="Order"
                               VerticalAlignment="Center"
                               HorizontalAlignment="Center" />
                    <Image Source="{Binding SelectedOrderSortDefinition.IsOrderAscending, Converter={StaticResource NullBoolToImageConverter}}"
                           VerticalAlignment="Center"
                           HorizontalAlignment="Center"
                           Margin="3"
                           MaxWidth="15"
                           MinWidth="15" />
                </StackPanel>
            </telerik:GridViewColumn.Header>
        </telerik:GridViewDataColumn>
        <telerik:GridViewDataColumn DataMemberBinding="{Binding Footage}">
            <telerik:GridViewColumn.Header>
                <StackPanel Orientation="Horizontal"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center">
                    <TextBlock Text="Footage"
                               VerticalAlignment="Center"
                               HorizontalAlignment="Center" />
                    <Image Source="{Binding SelectedOrderSortDefinition.IsFootageAscending, Converter={StaticResource NullBoolToImageConverter}}"
                           VerticalAlignment="Center"
                           HorizontalAlignment="Center"
                           Margin="3"
                           MaxWidth="15"
                           MinWidth="15" />
                </StackPanel>
            </telerik:GridViewColumn.Header>
        </telerik:GridViewDataColumn>
        <telerik:GridViewDataColumn DataMemberBinding="{Binding CustomerName}">
            <telerik:GridViewColumn.Header>
                <StackPanel Orientation="Horizontal"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center">
                    <TextBlock Text="Customer"
                               VerticalAlignment="Center"
                               HorizontalAlignment="Center" />
                    <Image Source="{Binding SelectedOrderSortDefinition.IsCustomerAscending, Converter={StaticResource NullBoolToImageConverter}}"
                           VerticalAlignment="Center"
                           HorizontalAlignment="Center"
                           Margin="3"
                           MaxWidth="15"
                           MinWidth="15" />
                </StackPanel>
            </telerik:GridViewColumn.Header>
        </telerik:GridViewDataColumn>
        <telerik:GridViewDataColumn DataMemberBinding="{Binding TruckNumber}">
            <telerik:GridViewColumn.Header>
                <StackPanel Orientation="Horizontal"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center">
                    <TextBlock Text="Route"
                               VerticalAlignment="Center"
                               HorizontalAlignment="Center" />
                    <Image Source="{Binding SelectedOrderSortDefinition.IsTruckAscending, Converter={StaticResource NullBoolToImageConverter}}"
                           VerticalAlignment="Center"
                           HorizontalAlignment="Center"
                           Margin="3"
                           MaxWidth="15"
                           MinWidth="15" />
                </StackPanel>
            </telerik:GridViewColumn.Header>
        </telerik:GridViewDataColumn>
        <telerik:GridViewDataColumn DataMemberBinding="{Binding RequestedDate, Converter={StaticResource PrettyDateConverter}}">
            <telerik:GridViewColumn.Header>
                <StackPanel Orientation="Horizontal"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center">
                    <TextBlock Text="Requested"
                               VerticalAlignment="Center"
                               HorizontalAlignment="Center" />
                    <Image Source="{Binding SelectedOrderSortDefinition.IsDateAscending, Converter={StaticResource NullBoolToImageConverter}}"
                           VerticalAlignment="Center"
                           HorizontalAlignment="Center"
                           Margin="3"
                           MaxWidth="15"
                           MinWidth="15" />
                </StackPanel>
            </telerik:GridViewColumn.Header>
        </telerik:GridViewDataColumn>
    </telerik:RadGridView.Columns>

For each column header, I have a text block that will not change, and an image that will either be ascending, descending, or not there based on the bool? that is a property on the SelectedOrderSortDefinition object in the ViewModel.

I have this set up like this, and the breakpoint that I set in my converter never even fires. Any help/suggestions?

Thanks,

-Dan Pingel

[Eng Liang]

Hello Telerik, why no reply on this post?