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

RadComboBox with RadGridView

7 Answers 748 Views

ComboBox

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

Christy asked on 01 Jul 2014, 01:29 PM

combobox.jpg

I would like to have a combobox that displays a text value when an item is selected but displays a grid with headers when the user clicks on the combobox (see attachment). I used the SelectionBoxTemplate to set the selected item text value and created a comboboxitem with a radgridview inside of it. I cannot use the SelectionBoxTemplate with the radgridview. Is there something wrong with how I have it setup? Also, the radgridview does not update the combobox when an item is selected? How can I make this function like a normal combobox? I don't need autocomplete.

<telerik:RadComboBox SelectionBoxTemplate="{StaticResource SelectionBoxTemplate}"
IsEditable="True" Height="25" Width="200">
<telerik:RadComboBox.Items>
<telerik:RadComboBoxItem>
<telerik:RadComboBoxItem.Template>
<ControlTemplate>
<telerik:RadGridView x:Name="RadGridView1" ShowGroupPanel="False" CanUserFreezeColumns="False"
RowIndicatorVisibility="Collapsed" IsReadOnly="True"
IsFilteringAllowed="False" ItemsSource="{Binding Tools}"
Width="200" Height="150" SelectedItem="{Binding Assignment, Mode=TwoWay}" AutoGenerateColumns="False">
<telerik:RadGridView.Columns>
<telerik:GridViewColumn Header="Item #" HeaderCellStyle="{StaticResource GridViewHeaderCellDefault}">
<telerik:GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Style="{StaticResource TextBlockDefault}" Text="{Binding ItemNumber}" />
</DataTemplate>
</telerik:GridViewColumn.CellTemplate>
</telerik:GridViewColumn>
<telerik:GridViewColumn Header="Tool Name" HeaderCellStyle="{StaticResource GridViewHeaderCellDefault}">
<telerik:GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Style="{StaticResource TextBlockDefault}" Text="{Binding ToolName}"/>
</StackPanel>
</DataTemplate>
</telerik:GridViewColumn.CellTemplate>
</telerik:GridViewColumn>
</telerik:RadGridView.Columns>
</telerik:RadGridView>
</ControlTemplate>
</telerik:RadComboBoxItem.Template>
</telerik:RadComboBoxItem>
</telerik:RadComboBox.Items>
</telerik:RadComboBox>

7 Answers, 1 is accepted

answered on 03 Jul 2014, 10:50 AM

ComboBoxWPF.zip

Hello Christy,

What I can suggest you would be to modify the NonEditableComboBox Template in order to replace the ItemsPresenter inside with a GridView. Actually I have such an example which demonstrates the exact approach - the selection is working and SelectionBoxTemplate can be applied. Please check the attached sample project and let me know whether it works for you.

I'm looking forward to hearing from you.

Regards,
Kalin
Telerik

Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.

answered on 09 Jul 2014, 04:43 PM

Thanks so much for the example. I was able to get it working with a few minor tweaks. I had to remove any foreground or background reference from the ControlTemplate because those resources could not be found. I am also binding the combo box in the xaml. This seems to be working well except my Grid has an extra column, "IsDesignMode". How can I get rid of it? I'm including my xaml binding in case anyone else would find it helpful.

<telerik:RadComboBox x:Name="combo" MinWidth="150" ItemTemplate="{StaticResource ComboBoxCustomTemplate}"
NonEditableTemplate="{StaticResource NonEditableComboBox}" HorizontalAlignment="Left"
ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=DataContext.Tools}"
SelectedItem="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=DataContext.SelectedSupplyType, Mode=TwoWay}"
SelectedValuePath="ItemNumber" SelectionChanged="combo_SelectionChanged" />

answered on 11 Aug 2017, 08:27 AM

Dear Kalin,

I have the same problem which is mentioned above.We are trying to buy new telerik control and I am using trial version, Here is my code

<telerik:RadComboBox Text="{Binding ContainerType,Mode=TwoWay}" Grid.Row="3" Grid.Column="1" HorizontalAlignment="Left"
HorizontalContentAlignment="Left" VerticalAlignment="Center"
SelectedItem="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=DataContext.SelectedItem, Mode=TwoWay}"
IsEditable="False" Height="25" Width="200" >
<telerik:RadComboBox.SelectionBoxTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding SelectedItem}" />
</StackPanel>
</DataTemplate>
</telerik:RadComboBox.SelectionBoxTemplate>

<telerik:RadComboBox.Items>
<telerik:RadComboBoxItem>
<telerik:RadComboBoxItem.Template>
<ControlTemplate>
<telerik:RadGridView Grid.Row="1" ShowGroupPanel="False" CanUserFreezeColumns="False"
IsReadOnly="True" IsFilteringAllowed="False" ItemsSource="{Binding Items}"
SelectedItem="{Binding SelectedItem, Mode=TwoWay}" >
</telerik:RadGridView>
</ControlTemplate>
</telerik:RadComboBoxItem.Template>
</telerik:RadComboBoxItem>
</telerik:RadComboBox.Items>

</telerik:RadComboBox>

But as I have downloaded your sample , It's not proper solution think about scenario where I have total 12 such a type of combobox on my page then how to resolve it with a sample which you have attached ,if I have 12 dropdown in one page with grid inside it then a huge number of line code I have to write... so is that any simple way ... ?

I just need combobox which has item as gridview and on selection of grid view I just need that selection on combobox item selection but make sure combobox is noneditable.

Thanks

Waiting for your answer.....

answered on 14 Aug 2017, 07:22 AM

Hi Kiran,

Please check our online XAML SDK repository for a sample project demonstrating how to integrate RadGridView in both the modes (editable and non editable) of RadComboBox:
https://github.com/telerik/xaml-sdk/tree/master/ComboBox/DropDownWithHeaders

You could prepare one Style and apply it all of the ComboBox controls in your application.

Hope this helps.

Regards,
Kalin
Progress Telerik

Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.

answered on 21 Aug 2017, 11:24 AM

Thanks I did try below code but it has issue like " When i select any row from grid" after that pop up does not close automatically untill i click outside of that grid pop up area

<ControlTemplate x:Key="NonEditableComboBox" TargetType="telerik:RadComboBox">
<Grid x:Name="VisualRoot">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0.5"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="DropDownIcon" Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0.5"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIcon" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonIconForeground_Disabled}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIcon" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonIconBackground_Disabled}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonChrome" Storyboard.TargetProperty="RenderEnabled">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<sys:Boolean>False</sys:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ButtonChrome" Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0.6"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledBorder" Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonChrome" Storyboard.TargetProperty="RenderMouseOver">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<sys:Boolean>True</sys:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIcon" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonIconForeground_MouseOver}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIcon" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonIconBackground_MouseOver}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="DropDownOpen">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIcon" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonIconForeground_Pressed}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIcon" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonIconBackground_Pressed}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border IsHitTestVisible="False" Background="{TemplateBinding Background}" CornerRadius="{StaticResource SplitButton_SpanCornerRadius}"/>
<telerik:RadToggleButton x:Name="PART_DropDownButton" Foreground="{TemplateBinding Foreground}" IsTabStop="False" Margin="0" Padding="0" ClickMode="Press">
<telerik:RadToggleButton.Template>
<ControlTemplate TargetType="telerik:RadToggleButton">
<ContentPresenter/>
</ControlTemplate>
</telerik:RadToggleButton.Template>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border x:Name="DisabledBorder"
IsHitTestVisible="False"
BorderBrush="{StaticResource ControlOuterBorder_Disabled}"
BorderThickness="{TemplateBinding BorderThickness}"
Opacity="0"
CornerRadius="{StaticResource SplitButton_SpanCornerRadius}"
Grid.ColumnSpan="2"/>
<telerikChromes:ButtonChrome x:Name="ButtonChrome"
Grid.ColumnSpan="2"
CornerRadius="{StaticResource SplitButton_SpanCornerRadius}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
RenderPressed="{TemplateBinding IsDropDownOpen}"
RenderFocused="{TemplateBinding IsFocused}"
RenderEnabled="{TemplateBinding IsEnabled}"
RenderMouseOver="{TemplateBinding IsMouseOver}"/>
<Border Grid.ColumnSpan="2" Background="{TemplateBinding Background}" IsHitTestVisible="False" CornerRadius="{StaticResource SplitButton_SpanCornerRadius}" Margin="1"/>
<ContentControl x:Name="DropDownIcon"
Grid.Column="1"
IsTabStop="False"
Foreground="{StaticResource ButtonIconForeground_Normal}"
Background="{StaticResource ButtonIconBackground_Normal}"
Template="{StaticResource ArrowTemplateNonEditableCombobox}"/>
<ContentPresenter x:Name="Content"
Grid.Column="0"
Margin="{TemplateBinding Padding}"
IsHitTestVisible="False"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</telerik:RadToggleButton>
<Popup x:Name="PART_Popup">
<Grid x:Name="PopupRoot">
<Border
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
MinWidth="{TemplateBinding MinDropDownWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}"
Background="{StaticResource PickerPopupBackground}"
CornerRadius="{StaticResource SplitButton_SpanCornerRadius}"
x:Name="PART_ResizeBorder">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<telerik:RadButton x:Name="PART_ClearButton"
Grid.Row="0"
Margin="-1 -1 -1 0"
Visibility="{TemplateBinding ClearSelectionButtonVisibility}"
Content="{TemplateBinding ClearSelectionButtonContent}"/>
<ScrollViewer x:Name="PART_ScrollViewer"
Grid.Row="1"
Foreground="{TemplateBinding Foreground}"
Padding="0 1 0 0"
BorderThickness="0"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
CanContentScroll="True">

<telerik:RadGridView
ItemsSource="{Binding ItemsSource, RelativeSource={RelativeSource TemplatedParent}}"
RowIndicatorVisibility="Collapsed"
EnableLostFocusSelectedState="False"
SelectedItem="{Binding SelectedItem, RelativeSource={RelativeSource TemplatedParent}}"
ShowGroupPanel="False" IsFilteringAllowed="False" IsReadOnly="True" />
</ScrollViewer>
</Grid>
</Border>
</Grid>
</Popup>
</Grid>
</ControlTemplate>

So Can you please tell me what to do for that..