Populate Combobox in one column based on value of another column

[StevenDale]

I have a grid that has 2 columns. Column one contains a Characteristic and column two contains a Value like:

Characteristic | Value

The second column of the grid for "Value" contains a ComboBox.

The list of choices in the Value Column's ComboBox will depend on the Characteristic selected in Column 1.

Is it possible to do this and if so could someone provide an example?

Thanks,

Billy Jacobs 

[Rossen Hristov]

Hi Billy Jacobs,

This can be achieved in the following way.

1. Define two columns and their CellEditTemplates to contain a RadComboBox.
2. Configure the "master" combo in a normal way.
3. Attach to the "detail" combo's Loaded event, check what is the value of the master property and apply the appropriate ItemsSource.

I have prepared a small sample project to demonstrate this. My business objects are football players. They have a general position:

public enum Position
    {
        GK,
        DF,
        MF,
        FW
    }

and a SubPosition:

    public enum SubPosition
    {
        GK,
        LB,
        RB,
        CD,
        IM,
        LW,
        RW,
        FW,
        ST
    }

So for example if you select that someone is a defender (DF) from the master combo, you will get only the defensive positions of left back (LB), right back (RB) and central defender (CD) in the second combo.

And here is how to do this:

<Window x:Class="TicketID_237419_CascadingCombos.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:local="clr-namespace:TicketID_237419_CascadingCombos"
    Title="Window1" Height="700" Width="600">
    <Grid>
        <Grid.Resources>
            <local:Positions x:Key="Positions"/>
        </Grid.Resources>
        <telerik:RadGridView Name="playersGrid" Grid.Row="1" AutoGenerateColumns="False"
                ColumnsWidthMode="Auto">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn
                    Header="Name"
                    DataMemberBinding="{Binding Name}">
                </telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn
                    Header="Number"
                    DataMemberBinding="{Binding Number}">
                </telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn
                    Header="Country"
                    DataMemberBinding="{Binding Country}">
                </telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn
                    Header="Position"
                    DataMemberBinding="{Binding Position}">
                    <telerik:GridViewDataColumn.CellEditTemplate>
                        <DataTemplate>
                            <telerik:RadComboBox
                                ItemsSource="{StaticResource Positions}"
                                SelectedItem="{Binding Position}"/>
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellEditTemplate>
                </telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn
                    Header="Sub Position"
                    DataMemberBinding="{Binding SubPosition}">
                    <telerik:GridViewDataColumn.CellEditTemplate>
                        <DataTemplate>
                            <telerik:RadComboBox
                                x:Name="subPositionsCombo"
                                Loaded="OnSubPositionsComboBoxLoaded"
                                SelectedItem="{Binding SubPosition}"/>
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellEditTemplate>
                </telerik:GridViewDataColumn>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>
    </Grid>
</Window>

And in the Loaded event handler we decide what to fill the combo with in the following manner:

private void OnSubPositionsComboBoxLoaded(object sender, RoutedEventArgs e)
        {
            RadComboBox comboBox = (RadComboBox) sender;
            Player player = (Player)comboBox.DataContext;
            switch(player.Position)
            {
                case Position.GK:
                    comboBox.ItemsSource = new GoalkeeperSubPositions();
                    break;
                case Position.DF:
                    comboBox.ItemsSource = new DefensiveSubPositions();
                    break;
                case Position.MF:
                    comboBox.ItemsSource = new MidfieldSubPositions();
                    break;
                case Position.FW:
                    comboBox.ItemsSource = new AttackingSubPositions();
                    break;
            }
        }

You can find the full source code in the attached sample project. I hope it helps. Please let me know if you have any other questions.

Best wishes,
Ross
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.