RadComboBox with RadGridView

7 posts, 0 answers
  1. Christy
    Christy avatar
    3 posts
    Member since:
    Dec 2013

    Posted 01 Jul 2014 Link to this post

    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>
  2. Kalin
    Admin
    Kalin avatar
    1266 posts

    Posted 03 Jul 2014 Link to this post

    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.
     
  3. Christy
    Christy avatar
    3 posts
    Member since:
    Dec 2013

    Posted 09 Jul 2014 Link to this post

    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" />
  4. Kalin
    Admin
    Kalin avatar
    1266 posts

    Posted 11 Jul 2014 Link to this post

    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
     
    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.
     
  5. kiran
    kiran avatar
    2 posts
    Member since:
    Jul 2017

    Posted 11 Aug in reply to Christy Link to this post

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

  6. Kalin
    Admin
    Kalin avatar
    1266 posts

    Posted 14 Aug Link to this post

    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.
  7. kiran
    kiran avatar
    2 posts
    Member since:
    Jul 2017

    Posted 3 hours ago in reply to Kalin Link to this post

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

Back to Top