Custom Combo Box with hierarchical data

2 posts, 0 answers
  1. Giovanni
    Giovanni avatar
    8 posts
    Member since:
    Feb 2011

    Posted 22 Feb 2011 Link to this post

    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.


  2. Giovanni
    Giovanni avatar
    8 posts
    Member since:
    Feb 2011

    Posted 24 Feb 2011 Link to this post

    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:

            <DataTemplate x:Key="SeasonItemBoxDataTemplate">
                <Grid d:DesignWidth="337.667" d:DesignHeight="77" HorizontalAlignment="Left">
                        <ColumnDefinition Width="0.282*"/>
                        <ColumnDefinition Width="0.718*"/>
                    <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}">
                                <StackPanel Orientation="Horizontal"/>
                                <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" />
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFBEBEBE" Offset="0.25"/>
                        <GradientStop Color="#FF767676" Offset="1"/>
                    <RowDefinition Height="Auto"/>
          <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">
                           <ItemsControl ItemsSource="{Binding ViewModel.SeasonYearGroup, ElementName=MainViewUserControl, Mode=TwoWay}" ItemTemplate="{StaticResource SeasonItemBoxDataTemplate}"/>

    : )
Back to Top