RadComboBox with RadGridView

[Christy]

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>

[Kalin]

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

 

 

[Christy]

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" />

[Kalin]

Hi Christy,

I'm glad to hear that the solution is working well for you. As for the addition column, could you please share some more details? Isn't it coming from the ItemsSource you are using (property of the bound objects)?

I'm looking forward to hearing from you.

Regards,
Kalin
Telerik

 

 

[kiran]

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.....

[Kalin]

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

[kiran]

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">
                                        <!--<ItemsPresenter/>-->
                                        <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..

[Kalin]

Hi Kiran,

Indeed the drop down doesn't automatically close - you would need to manually close it when selection changed event is fire. Check the Example.xaml.cs file for the exact approach.

Hope this helps.

Regards,
Kalin
Progress Telerik