Using mouse wheel on splitter

2 posts, 0 answers
  1. Ryan
    Ryan avatar
    4 posts
    Member since:
    Mar 2009

    Posted 14 Oct 2009 Link to this post


    I have a horizontal splitter control with two panes, one on the top and the other at the bottom.  I also have a radcombobox located on the top pane of the splitter.  The problem is when the pane overflows and a scrollbar appears, when I use the mouse wheel of my mouse, the combobox moves along the scroll bar.  However, when I don't have a splitter control and I use my mouse wheel, this behavior doesn't appear.  I have below the markup of my page just to show the issue.

     <telerik:RadSplitter ID="SummarySplitter" runat="server"  
                Orientation="Horizontal" VisibleDuringInit="false" BorderStyle="Dotted"  
                Width="1016px" Height="205px"
            <telerik:RadPane ID="TopPane" runat="server" Scrolling="Both" Width="770px"  
                    Height="69px" > 
                <div style="height: 194px"
                     <telerik:RadComboBox ID="RadIR" runat="server" NoWrap="True" > 
                            <telerik:RadComboBoxItem Text="1" /> 
            <telerik:RadSplitBar ID="HorizontalSplitBar" runat="server" CollapseMode="Forward" /> 
            <telerik:RadPane ID="BottomPane" runat="server" Scrolling="Both" Height="350px" Width="768px" > 

  2. Svetlina Anati
    Svetlina Anati avatar
    2795 posts

    Posted 20 Oct 2009 Link to this post

    Hi Ryan,

    This behavior is expected since teh dropdown is a child of the form element and not of the RadPane. What I can suggest in this case is to attach a handler to the scroll event of the RadPane's DIV element and if it is being scrolled to hide the dropdown. I prepared for you sample code based on your page, you can find it below:

    <form id="form1" runat="server" style="height: 100%; width: 100%;">
           <asp:ScriptManager ID="mng" runat="server">
           <script type="text/javascript">
           function OnClientLoaded()
              var pane = $find("<%=TopPane.ClientID %>");
              var contentElem = pane.getContentElement();
              var combo = $find("<%=RadIR.ClientID %>");
              var dropDown = combo.get_dropDownElement();
              contentElem.onscroll = function()
                 if( != "none")
           <telerik:RadSplitter ID="SummarySplitter" runat="server" Orientation="Horizontal"
               VisibleDuringInit="false" BorderStyle="Dotted" Width="1016px" Height="205px"
               <telerik:RadPane ID="TopPane" runat="server" Scrolling="Both" Width="770px" Height="69px">
                   <div style="height: 194px">
                       <telerik:RadComboBox ID="RadIR" runat="server" NoWrap="True">
                               <telerik:RadComboBoxItem Text="1" />
               <telerik:RadSplitBar ID="HorizontalSplitBar" runat="server" CollapseMode="Forward" />
               <telerik:RadPane ID="BottomPane" runat="server" Scrolling="Both" Height="350px" Width="768px">

    Let me know how it goes.

    All the best,
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top