-
Giovanni
8
posts
Member since:
Feb 2011
Posted 22 Feb 2011
Link to this post
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
-
-
Giovanni
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:
<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>
: )
-