Enable the ribbon scroll button.

7 posts, 0 answers
  1. Hardik
    Hardik avatar
    61 posts
    Member since:
    Jun 2011

    Posted 05 Jun 2012 Link to this post

    Hi,

    How to enable the ribbon left/right button ?
    Image is attached herewith.

    Thanks
  2. Lancelot
    Lancelot avatar
    251 posts
    Member since:
    Jul 2012

    Posted 05 Jun 2012 Link to this post

    Hi Hardik,

    If you want to being using the scrollBar, you first need to set the property ScrollViewer.HorizontalScrollBarVisibility to visibile. I've written a complete example for you below. One thing to keep in mind, if the RibbonGroups are not wider then the control, the ScrollViewer will not appear. Only when the window is resized or the groups are wider than the current window, will the ScrollBars be available.

    Below is an example that you can just copy and paste into your application to get you started.

    <telerik:RadRibbonView d:LayoutOverrides="Width" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Visible">
                <telerik:RadRibbonView.ContextualGroups>
                    <telerik:RadRibbonContextualGroup x:Name="ContextualGroup1"
                        Header="Group 1"
                        IsActive="False"
                        Color="Coral" />
                    <telerik:RadRibbonContextualGroup x:Name="ContextualGroup2"
                        Header="Group 2"
                        IsActive="False"
                        Color="Orchid" />
                </telerik:RadRibbonView.ContextualGroups>
                <telerik:RadRibbonTab ContextualGroupName="ContextualGroup1" Header="ContextualTab 1.1" />
                <telerik:RadRibbonTab Header="RibbonTab" Margin="0">
                    <telerik:RadRibbonGroup Header="RibbonGroup"/>
                </telerik:RadRibbonTab>
                <telerik:RadRibbonTab Header="RibbonTab" Margin="0">
                    <telerik:RadRibbonGroup Header="RibbonGroup"/>
                </telerik:RadRibbonTab>
                <telerik:RadRibbonTab Header="RibbonTab" Margin="0">
                    <telerik:RadRibbonGroup Header="RibbonGroup"/>
                </telerik:RadRibbonTab>
                <telerik:RadRibbonTab Header="RibbonTab" Margin="0">
                    <telerik:RadRibbonGroup Header="RibbonGroup"/>
                </telerik:RadRibbonTab>
                <telerik:RadRibbonTab Header="RibbonTab" Margin="0">
                    <telerik:RadRibbonGroup Header="RibbonGroup"/>
                </telerik:RadRibbonTab>
                <telerik:RadRibbonTab Header="RibbonTab" Margin="0">
                    <telerik:RadRibbonGroup Header="RibbonGroup"/>
                </telerik:RadRibbonTab>
                 
            </telerik:RadRibbonView>


    Let me know if there is anything else I can help you with.

    Good Luck,

    Lancelot



  3. DevCraft banner
  4. praneeth
    praneeth avatar
    3 posts
    Member since:
    Sep 2015

    Posted 09 Sep 2015 Link to this post

    Hi,

     How to enable scrolling in radribbon header tab.Please find the attachment, our project tab looks like this. But we are unable to make it scroll as the tab width increases depending on user inputs.

     What can be done?

  5. Martin
    Admin
    Martin avatar
    1099 posts

    Posted 14 Sep 2015 Link to this post

    Hello praneeth,

    I am not sure that I understand your scenario completely. Do you want to scroll the tab items horizontally? If so, this functionality is built-in in RadRibbonView. A scrollviewer is displayed automatically, when the summary width of all tabs is bigger then the width of the panel that hosts them. If this is not your case I would ask you to send me drawings of the expected result. This will help me in better understanding your case and assist you further.

    Thank you for any help you can provide.

    Regards,
    Martin
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
  6. praneeth
    praneeth avatar
    3 posts
    Member since:
    Sep 2015

    Posted 16 Sep 2015 in reply to Martin Link to this post

    I have attached the screenshot. The problem is the header items change while the application runs and each header text is being trimmed automatically. As you can see in the screen shot for ex: Contract Evaluation while running the app becomes Contract Eval, full name is not being displayed. If scroll bar is default for horizontal tab in RibbonView then I dont think its working for us as we are not getting the scroll bar on tab width increasing. 

    Attached two screen shots, in the second one you can find the text being cut off and scroll bar not enabled.

    All we need is a scroll bar for radribbontab which should automatically enable scroll as the header contents increase without trimming the header tab text.
  7. Martin
    Admin
    Martin avatar
    1099 posts

    Posted 18 Sep 2015 Link to this post

    Hello Hardik,

    Thank you for the attachments and the additional information. The described behavior is caused by the MinTabWidth property of the tab strip panel of the ribbon that holds the tab items. I can suggest you several approaches for achieving your requirement:
    • You can set the MinTabWidth property of the RibbonTabStripPanel to a bigger value. This way the cutting of the tab headers will be avoided.
      <telerik:RadRibbonView.ItemsPanel>
          <ItemsPanelTemplate>
              <telerikRibbonViewPrimitives:RibbonTabStripPanel MinTabWidth="200" />
          </ItemsPanelTemplate>
      </telerik:RadRibbonView.ItemsPanel>
    • You can define HeaderTemplate with a TextBlock element that presents the header of the tab item. Then you can set the TextTrimming of the TextBlock to CharacterEllipsis. This way when the element clipped the TextBlock will draw dots at the end of its text. In this case you can use a ToolTip to show the entire content of the tab headers.
      <Style TargetType="telerik:RadRibbonTab">
          <Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=Header}" />
          <Setter Property="HeaderTemplate">
              <Setter.Value>
                  <DataTemplate>             
                      <TextBlock Text="{Binding}" TextTrimming="CharacterEllipsis"/>
                  </DataTemplate>
              </Setter.Value>
          </Setter>
      </Style>
    • You can define HeaderTemplate for the tab items and wrap the element that presents the header into a ScrollViewer with set width.
      <Style TargetType="telerik:RadRibbonTab">
          <Setter Property="HeaderTemplate">
              <Setter.Value>
                  <DataTemplate>
                      <ScrollViewer Width="100">
                          <TextBlock Text="{Binding}"/>
                      </ScrollViewer>
                  </DataTemplate>
              </Setter.Value>
          </Setter>
      </Style>
      If you are using implicit styles you will need to base the style on the default RadRibbonTabStyle.
      <Style TargetType="telerik:RadRibbonTab" BasedOn="{StaticResource RadRibbonTabStyle}">
    Please try those approaches and let me know if they are helpful.

    Regards,
    Martin
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
  8. praneeth
    praneeth avatar
    3 posts
    Member since:
    Sep 2015

    Posted 23 Sep 2015 in reply to Martin Link to this post

    Thanks Martin !!

    Information is helpful. First approach solved our issue.

Back to Top
DevCraft banner