RadTabControl Header only scrolls with focus in Fluent Theme

4 posts, 1 answers
  1. James
    James avatar
    3 posts
    Member since:
    Feb 2017

    Posted 29 Oct Link to this post

    Example Solution uploaded as .jpg from .zip

    The provided example has various controls in different tabs (including a scrollviewer). As you should be able to see in the fluent theme when using the scroll wheel to scroll the tab header an item in the tab header has to be focused. If I click a button, or select a textbox in one of the tabs I can no longer mouse over the tab header to scroll the tabs (I have to click on a tab to give it focus for the scroll wheel to work again).

    This is not the case the other way around (Tab 5 or tab 6). If the tab header is focused the scrollViewer in the tab will still scroll on mouse over without focus being granted to it.

  2. James
    James avatar
    3 posts
    Member since:
    Feb 2017

    Posted 29 Oct in reply to James Link to this post

    Some further information it does not appear to be theme related, I have changed from the Fluent theme to another and the scrolling issue persists.
  3. Answer
    Vicky
    Admin
    Vicky avatar
    4 posts

    Posted 30 Oct Link to this post

    Hello James,

    The provided sample project and detailed information are greatly appreciated.

    Currently, the TabControl is designed to support tab scrolling only when the focus is inside the tab strip.

    I have logged a Feature Request in our feedback portal. You can track its progress, subscribe for status changes and add your comments on the following link.

    A possible solution that I can suggest is to override the ScrollViewer_MouseWheel event of the TabControl's ScrollViewer:

    public class MyTabControl : RadTabControl
    {
        internal ScrollViewer ScrollViewer
        {
            get;
            set;
        }
     
        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
            this.ScrollViewer = this.GetTemplateChild("ScrollViewerElement") as ScrollViewer;
            this.ScrollViewer.AddHandler(MouseWheelEvent, new MouseWheelEventHandler(this.ScrollViewer_MouseWheel), true);
        }
     
        private void ScrollViewer_MouseWheel(object sender, MouseWheelEventArgs e)
        {
            if (!e.Handled)
            {
                if (e.Delta < 0)
                {
                    this.OnLeftScrollButtonClick(null, null);
                }
                else
                {
                    this.OnRightScrollButtonClick(null, null);
                }
            }
        }
    }

    I hope this helps you and that if any further assistance is needed, you won't hesitate to contact us again.

    Regards,
    Vicky
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  4. James
    James avatar
    3 posts
    Member since:
    Feb 2017

    Posted 30 Oct in reply to Vicky Link to this post

    Hi Vicky,

     

    This was great, however I had to remove the if (!e.Handled) because the event has been handled by the RadTabControl so It always gets a handled event, in this situation It will always scroll regardless of if something else has already handled it.

     

    Thanks for the help, look forward to the feature getting into the product :)

Back to Top