This is a migrated thread and some comments may be shown as answers.

Custom Combo Box with hierarchical data

1 Answer 138 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Giovanni
Top achievements
Rank 1
Giovanni asked on 22 Feb 2011, 08:53 PM
Hi
I'm trying to build a combo box with hierarchical data inside. If you look at the picture you will see and understand better what i mean.
To build this combo I've used a RadRibbonComboBox and I've changed the generated item panel adding a label to visualize the year (2005,2006,2007,etc) and with an horiz.listbox showing the seasons(FA,HO,SP,SU). In the stack panel i've added a button in the way that the user can select the season of the related year. 

I've bind the combo itemsource a collection of seasonyear group. Each seasonyeargroup contains the year related and the list of season. at this point it was easy to bind this data to the template: year to the label and the seasons to the stackpanel. when the user click on a season button the selected value should be season + year. To show the user selection i've changed the selectionboxtemplate binding a label to a viewmodel property called seasonselectedtext
at moment i have 2 issue.
1) even though the property seasonselectedtext is corrected filled i still cannot see the value in the combobox.
2) when i press a season button i would like that the combo notify the selelctionindexchange in the way that the combo would close , but is not happening.
do you guys have any idea how can i solve these issues?
please let me know if you have any questions.

thanks
gio

1 Answer, 1 is accepted

Sort by
0
Giovanni
Top achievements
Rank 1
answered on 24 Feb 2011, 05:27 PM
I Solved:
Instead to use a combobox i used a dropdownbutton with a itemcontrols and datatemplate.
The hierarchical data is created on the server side:

 <UserControl.Resources>
        <DataTemplate x:Key="SeasonItemBoxDataTemplate">
            <Grid d:DesignWidth="337.667" d:DesignHeight="77" HorizontalAlignment="Left">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.282*"/>
                    <ColumnDefinition Width="0.718*"/>
                </Grid.ColumnDefinitions>
                <sdk:Label x:Name="label" HorizontalAlignment="Left" VerticalAlignment="Center" Width="56" FontFamily="Calibri" FontSize="14.667" Foreground="Black" Content="{Binding Year}"/>
                <telerik:ListBox Grid.Column="1" ItemsSource="{Binding Seasons}">
                    <telerik:ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </telerik:ListBox.ItemsPanel>
                    <telerik:ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel d:DesignWidth="61" d:DesignHeight="30" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Height="29" Width="59">
                                <Button Content="{Binding Name}" Width="59" HorizontalAlignment="Left" Background="White" BorderBrush="White" Foreground="#FF3372DA" Padding="0" BorderThickness="0" Height="29" VerticalAlignment="Top" Click="SetSeasonButton_Click" />
                            </StackPanel>
                        </DataTemplate>
                    </telerik:ListBox.ItemTemplate>
                </telerik:ListBox>
            </Grid>
        </DataTemplate>
     /UserControl.Resources>
        <Grid>
            <Grid.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFBEBEBE" Offset="0.25"/>
                    <GradientStop Color="#FF767676" Offset="1"/>
                </LinearGradientBrush>
            </Grid.Background>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition/>
            </Grid.RowDefinitions>
          
      <telerik:RadRibbonBar x:Name="RibbonApplication" ApplicationName="{Binding ViewModel.Version, ElementName=MainViewUserControl, Mode=OneWay}" MinimizeButtonVisibility="Visible" Title="Test">
                <telerik:RadRibbonTab Header="Home" IsSelected="True">
                    <telerik:RadRibbonGroup x:Name="RadRibbonSeasonGroup" Header="" telerik:ScreenTip.Title="Season"
                     telerik:ScreenTip.Description="Select the season." IsEnabled="True" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
                     <telerik:RadRibbonDropDownButton Text="{Binding ViewModel.SelectedSeasonText, ElementName=MainViewUserControl, Mode=TwoWay}" HorizontalAlignment="Stretch" Width="85">
                      <telerik:RadRibbonDropDownButton.DropDownContent>
                       <ItemsControl ItemsSource="{Binding ViewModel.SeasonYearGroup, ElementName=MainViewUserControl, Mode=TwoWay}" ItemTemplate="{StaticResource SeasonItemBoxDataTemplate}"/>
                      </telerik:RadRibbonDropDownButton.DropDownContent>
                     </telerik:RadRibbonDropDownButton>
                    </telerik:RadRibbonGroup>
                    </telerik:RadRibbonTab>
            </telerik:RadRibbonBar>
        </Grid>

: )
Tags
ComboBox
Asked by
Giovanni
Top achievements
Rank 1
Answers by
Giovanni
Top achievements
Rank 1
Share this question
or