RadRibbonComboBox in RibbonView using MVVM

[Hyunho]

Hello,
I referred to a MVVM RadRibbonView example and I tried to implement RadRibbonComboBox in RibbonView with MVVM method.
But it doesn't work normally.
Please see a attached screenshot image.

I make a DataTemplate as follows.

Case1 -- use RadComboBox in RibbonView

    <!-- 
    <DataTemplate x:Key="ComboBoxItemTemplate">
        <Grid>
            <TextBlock Text="{Binding Text}" />
        </Grid>
    </DataTemplate>
    
    <DataTemplate x:Key="ComboBoxTemplate">
        <telerik:RadComboBox 
            ItemsSource="{Binding Items}" 
            ItemTemplate="{StaticResource ComboBoxItemTemplate}"
            SelectionBoxTemplate="{StaticResource ComboBoxItemTemplate}"
            SelectedIndex="{Binding SelectedIndex}"/>
    </DataTemplate>
    -->


Case 2. use RadRibbonComboBox and RadRibbonComboBoxItem 

    <DataTemplate x:Key="ComboBoxItemTemplate">
        <telerik:RadRibbonComboBoxItem Content="{Binding Text}" />
    </DataTemplate>

    <DataTemplate x:Key="ComboBoxTemplate">
        <telerik:RadRibbonComboBox 
            ItemsSource="{Binding Items}" 
            ItemTemplate="{StaticResource ComboBoxItemTemplate}"
            SelectedIndex="{Binding SelectedIndex}"/>
    </DataTemplate>

[Kiril Vandov]

Hello Hyunho,

This issue is caused by the fact that the RadRibbonView sets to all of its RadRibbonComboBox children, IsEditable property to true. If you want to use the old behavior you could set the IsEditable="False" to your RadRibbonComboBox.

However if you want to use the RadRibbonComboBox in editable mode you could use the DisplayMemberPath property in case you do not use custom ItemTemplate. In case that you need to use an ItemTemplate you will have to use the telerik:TextSearch.TextPath attached property and set it to the RadRibbonComboBox.

In the code below we are binding editable combo using ItemTemplate and setting the TextPath to properties of our ViewModel.

<telerik:RadRibbonComboBox x:Name="rcbJobs" ItemsSource="{Binding Path=Jobs}"
        telerik:TextSearch.TextPath="JobName">
    <telerik:RadRibbonComboBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Path=JobName}" />
        </DataTemplate>
    </telerik:RadRibbonComboBox.ItemTemplate>
</telerik:RadRibbonComboBox>

Kind regards,
Kiril Vandov
the Telerik team

[Hyunho]

Hello Kiril,
Thank you for your reply, and now I could see it does works.

I have one more question about RibbonView.
Now I'm trying to implement RadRibbonGallery with MVVM method, but I couldn't change selected item index of RAdRibbonGallery.

I bound RadRibbonGallery::SelectedIndex and RadRibbonGallery::IsSelected properties, but there is no answer when I clicked RadRibbonItem on window.

   

<DataTemplate x:Key="GalleryTemplate">
       <telerik:RadRibbonGallery Title="Gallery"
                                 ItemWidth="64" ItemHeight="48"
                                 ItemsSource="{Binding Items}"
                                 SelectedIndex="{Binding SeletedIndex, Mode=TwoWay}" >
           <telerik:RadRibbonGallery.ItemTemplate>
               <DataTemplate>
                   <telerik:RadGalleryItem
                       IsSelected="{Binding IsSelected, Mode=TwoWay}"
                       Image="{Binding LargeImage}"
                       telerik:ScreenTip.Description="{Binding TipDescription}"
                       telerik:ScreenTip.Title="{Binding TipTitle}" />
               </DataTemplate>
           </telerik:RadRibbonGallery.ItemTemplate>
       </telerik:RadRibbonGallery>
   </DataTemplate>

* And Could you tell me how to display 3 more RadGalleryItems on the one line? It only shows 3 items on a line.

Thank you.

[Kiril Vandov]

Hello Hyunho,

The reason you are not able to change the selected tabs is that when we are in an MVVM scenario the children of the RadRibbonGallery are wrapped in RadGalleryItems automatically. That is why when you use a RadGalleryItem in your DataTemplate the bindings does not work.

If you want to bind the Image and IsSelected properties of the RibbonGallery, you can do it in a Style targeting the RadGalleryItem object like this:

<Window.Resources>
    <Style TargetType="telerik:RadGalleryItem">
        <Setter Property="Image" Value="{Binding ImageSource}" />
        <Setter Property="IsSelected" Value="{Binding IsSelected}" />
        <Setter Property="Content" Value="" />
    </Style>
</Window.Resources>
<Grid>
  <telerik:RadRibbonGallery ItemsSource="{Binding Items}" />
...

Note that we set the Content of the RadGalleryItem to an empty string. We do that because the RadGalleryItem is a ContentControl and simply leaving the Content property unset will display the result of the data object ToString() method.

As for displaying 3 more items you could set the ViewportWidth property of the RadGallery. In your case with ItemWidth of 64 setting ViewportWidth=320 will display 5 items. Note that there is also an PopupViewportWidth in case you want to change the width of the popup when the gallery is open.

I hope this information helps.

Kind regards,
Kiril Vandov
the Telerik team

[Hyunho]

Hello Kiril,

Thank you so much for your help.
I could see it works. :)

Finally I fixed my code as follows,

<Style TargetType="telerik:RadGalleryItem">
    <Setter Property="Image" Value="{Binding LargeImage}" />
    <!--<Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />-->
    <Setter Property="telerik:ScreenTip.Description" Value="{Binding TipDescription}" />
    <Setter Property="telerik:ScreenTip.Title" Value="{Binding TipTitle}" />
    <Setter Property="Content" Value="" />
</Style>


<DataTemplate x:Key="GalleryTemplate">
    <telerik:RadRibbonGallery Title="Gallery"
                              ItemWidth="64" ItemHeight="48"
                              SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}"
                              ViewportWidth="256"
                              PopupViewportWidth="256"
                              ItemsSource="{Binding Items}"
                               />