Home / Community & Support / Developer Productivity Tools Forums / Silverlight > RibbonBar > RadRibbonGroup, Databinding, and Size=Large

• Peter

  Posted on Apr 13, 2011 (permalink)

  I am sure I am just missing something obvious, but I am trying to databind some dropdown buttons (either RadRibbonDropDownButton or RadRibbonSplitButton) so they appear in a RadRibbonGroup.  The problem is if I set Size="Large" on either of those button types, the group only shows the first element (I am not sure if it only showing the first or overlapping them).  If I choose Size="Small", they appear OK.
  
  What am I missing?
  
  

  <telerik:RadRibbonTab Header="Groups">

      <telerik:RadRibbonGroup Header="List of Groups">

              <ItemsControl ItemsSource="{Binding Groups, Mode=OneWay}">

                  <ItemsControl.ItemTemplate>

                      <DataTemplate>

                          <telerik:RadRibbonSplitButton LargeImage="/RbacInterface;component/icons/members.png" Text="{Binding Name}" Size="Large" >

                              <telerik:RadRibbonSplitButton.DropDownContent>

                                  <ItemsControl ItemsSource="{Binding Sources}">

                                      <ItemsControl.ItemTemplate>

                                          <DataTemplate>

                                              <telerik:RadRibbonButton Text="{Binding Name}" SmallImage="/RbacInterface;component/icons/source.png" />

                                          </DataTemplate>

                                      </ItemsControl.ItemTemplate>

                                  </ItemsControl>

                              </telerik:RadRibbonSplitButton.DropDownContent>

                          </telerik:RadRibbonSplitButton>

                      </DataTemplate>

                  </ItemsControl.ItemTemplate>

              </ItemsControl>

      </telerik:RadRibbonGroup>

  </telerik:RadRibbonTab>

  
  Thanks in advance,
  Peter
  

  Reply

• Tina Stancheva Tina Stancheva

  Posted on Apr 18, 2011 (permalink)

  Hello Peter,
  
  The RadRibbonGroup works best when you place inside it RibbonControls. Also, the RadRibbonGroup is a HeaderedItemsControl and therefore  it considers the ItemsControl as one item and tries to display it on the area available for displaying one item. This is why you can only see it when all buttons are small.
  
  In your case it is best to bind the RibbonGroup's ItemsSource insted of defining an ItemsControl:
  

  <telerik:RadRibbonTab Header="Groups">

      <telerik:RadRibbonGroup Header="List of Groups" ItemsSource="{Binding Groups, Mode=OneWay}">

          <telerik:RadRibbonGroup.ItemTemplate>

              <DataTemplate>

                  <telerik:RadRibbonSplitButton LargeImage="/RbacInterface;component/icons/members.png"

                          Text="{Binding Name}"

                          Size="Large">

                      <telerik:RadRibbonSplitButton.DropDownContent>

                          <ItemsControl ItemsSource="{Binding Sources}">

                              <ItemsControl.ItemTemplate>

                                  <DataTemplate>

                                      <telerik:RadRibbonButton Text="{Binding Name}"

                                              SmallImage="/RbacInterface;component/icons/source.png" />

                                  </DataTemplate>

                              </ItemsControl.ItemTemplate>

                          </ItemsControl>

                      </telerik:RadRibbonSplitButton.DropDownContent>

                  </telerik:RadRibbonSplitButton>

              </DataTemplate>

          </telerik:RadRibbonGroup.ItemTemplate>

      </telerik:RadRibbonGroup>

  </telerik:RadRibbonTab>

  Give this a try and let us know how it goes.
  
  Greetings,
  Tina Stancheva
  the Telerik team

  Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

  Reply

• Peter

  Posted on Apr 19, 2011 (permalink)

  That works great, thank you.
  
  I am not sure I understand "The RadRibbonGroup works best when you place inside it RibbonControls." though.  It is inside RadRibbonTab, should it be inside something else instead?
  
  Thanks,
  Peter

  Reply

• Tina Stancheva Tina Stancheva

  Posted on Apr 19, 2011 (permalink)

  Hello Peter,
  
  What I meant to say with "The RadRibbonGroup works best when you place inside it RibbonControls" is that it is best to populate the RadRibbonGroup with RibbonControls like RibbonButtons, RibbonComboBox, Ribbon Layout Controls, RibbonGallery etc. These RibbonControls are designed to work with the RadRibbonGroup resizing mechanism and this is why I suggested you use them instead of ItemsControl.
  
  I am sorry for not elaborating on that more.
  
  Greetings,
  Tina Stancheva
  the Telerik team

  Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

  Reply

• Chris

  Posted on Dec 20, 2011 (permalink)

  Hello,
  
  I've come across something that I can't seem to solve when using the ItemSource property of RadRibbonGroup relating to variants.  When binding ItemSource and supplying a data template for ItemTemplate, the group goes from large to collapsed, skipping medium and small.
  
  The below test XAML works as expected when not using ItemSource:
  

  <telerik:RadRibbonGroup Header="Some header" Icon="/Telerik.Windows.Controls.RibbonView;component/RibbonGroupCollapsedIcon.png">

      <telerik:RadRibbonGroup.Variants>

          <telerik:GroupVariant Priority="1"/>

          <telerik:GroupVariant Priority="1" Variant="Medium"/>

          <telerik:GroupVariant Priority="1" Variant="Small"/>

          <telerik:GroupVariant Priority="1" Variant="Collapsed"/>

      </telerik:RadRibbonGroup.Variants>

      <telerik:RadRibbonGroup.ItemsPanel>

          <ItemsPanelTemplate>

              <telerik:RadCollapsiblePanel />

          </ItemsPanelTemplate>

      </telerik:RadRibbonGroup.ItemsPanel>

      <telerik:RadRibbonButton Text="Button 1"

          LargeImage="/EatonEG.AppCommonSL;component/resources/copy.png"

          SmallImage="/EatonEG.AppCommonSL;component/resources/copy.png"

          CollapseToMedium="WhenGroupIsMedium" CollapseToSmall="WhenGroupIsSmall" Size="Large"/>

      <telerik:RadRibbonButton

          LargeImage="/EatonEG.AppCommonSL;component/resources/copy.png"

          SmallImage="/EatonEG.AppCommonSL;component/resources/copy.png"

          Text="Button 2" CollapseToMedium="WhenGroupIsMedium" CollapseToSmall="WhenGroupIsSmall" Size="Large"/>

      <telerik:RadRibbonButton

          LargeImage="/EatonEG.AppCommonSL;component/resources/copy.png"

          SmallImage="/EatonEG.AppCommonSL;component/resources/copy.png"

          Text="Button 3" CollapseToMedium="WhenGroupIsMedium" CollapseToSmall="WhenGroupIsSmall" Size="Large"/>

      <telerik:RadRibbonButton

          LargeImage="/EatonEG.AppCommonSL;component/resources/copy.png"

          SmallImage="/EatonEG.AppCommonSL;component/resources/copy.png"

          Text="Button 4" CollapseToMedium="WhenGroupIsMedium" CollapseToSmall="WhenGroupIsSmall" Size="Large"/>

      <telerik:RadRibbonButton

          LargeImage="/EatonEG.AppCommonSL;component/resources/copy.png"

          SmallImage="/EatonEG.AppCommonSL;component/resources/copy.png"

          Text="Button 5" CollapseToMedium="WhenGroupIsMedium" CollapseToSmall="WhenGroupIsSmall" Size="Large"/>

  </telerik:RadRibbonGroup>

  
  Here is the test XAML I am using that doesn't work (Buttons is simply an array of strings for testing purposes in my view model):
  

  <telerik:RadRibbonGroup Header="Some header" Icon="/Telerik.Windows.Controls.RibbonView;component/RibbonGroupCollapsedIcon.png" ItemsSource="{Binding Buttons}">

      <telerik:RadRibbonGroup.Variants>

          <telerik:GroupVariant Priority="1"/>

          <telerik:GroupVariant Priority="1" Variant="Medium"/>

          <telerik:GroupVariant Priority="1" Variant="Small"/>

          <telerik:GroupVariant Priority="1" Variant="Collapsed"/>

      </telerik:RadRibbonGroup.Variants>

      <telerik:RadRibbonGroup.ItemsPanel>

          <ItemsPanelTemplate>

              <telerik:RadCollapsiblePanel />

          </ItemsPanelTemplate>

      </telerik:RadRibbonGroup.ItemsPanel>

      <telerik:RadRibbonGroup.ItemTemplate>

          <DataTemplate>

              <telerik:RadRibbonButton Text="{Binding}"

                  LargeImage="/EatonEG.AppCommonSL;component/resources/copy.png"

                  SmallImage="/EatonEG.AppCommonSL;component/resources/copy.png"

                  CollapseToMedium="WhenGroupIsMedium" CollapseToSmall="WhenGroupIsSmall" Size="Large"/>

          </DataTemplate>

      </telerik:RadRibbonGroup.ItemTemplate>

  </telerik:RadRibbonGroup>

  
  Am I missing something?
  
  Thanks.
  

  Reply

• Tina Stancheva Tina Stancheva

  Posted on Dec 23, 2011 (permalink)

  Hello Chris,
  
  Thank you for bringing this issue to our attention. However, we will need more time to investigate what is causing the different resizing behavior in the two scenarios. We will get back to you as soon as we have more info on the matter.
  
  Please accept our apology for this inconvenience.
  
  Regards,
  Tina Stancheva
  the Telerik team

  Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  Reply

• Petar Mladenov Petar Mladenov

  Posted on Dec 27, 2011 (permalink)

  Hi Chris,

   We investigated your scenario and we agree that this is a bug in the Group's variants logic. We logged it in PITS and updated your telerik account points accordingly. We'll keep in touch with you when we have a workaround or when we plan when this will be resolved.
  Please excuse us for any inconvenience caused. 

  Kind regards,
  Petar Mladenov
  the Telerik team

  Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  Reply

• Vladislav Vladislav

  Posted on Feb 29, 2012 (permalink)

  Hi guys,
  
  

  We want to inform you that this issue is fixed in our latest official 2012 Q1 release.
  It will be great if you can give it a try and let us know if it works for you.
  
  On a separate note, I'd like to let you know that there are 5 brand new controls that we included in this release:
  - Diagrams (Beta)
  - GanttView (CTP)
  - TimeLine
  - ListBox (Beta)
  - DataBar
  When you have time, you can give them a try as we will highly appreciate your feedback.

  
  All the best,
  Vladislav
  the Telerik team

  Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>

  Reply

• Chris

  Posted on Feb 29, 2012 (permalink)

  Hello,
  
  Unfortunately we are in an Alpha/Beta period for the next few months and will not be able to upgrade to the latest release to test this.  When we get a chance to update, I will retest in my application to see if the collapsing problem has been resolved.
  
  Thanks.

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Silverlight > RibbonBar > RadRibbonGroup, Databinding, and Size=Large