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

    Hi,

    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" > 
                                         
                        <Items> 
                            <telerik:RadComboBoxItem Text="1" /> 
                        </Items> 
                    </telerik:RadComboBox> 
                </div> 
                    
            </telerik:RadPane> 
            <telerik:RadSplitBar ID="HorizontalSplitBar" runat="server" CollapseMode="Forward" /> 
            <telerik:RadPane ID="BottomPane" runat="server" Scrolling="Both" Height="350px" Width="768px" > 
     
            </telerik:RadPane> 
        </telerik:RadSplitter>     

    Thanks,
    Ryan
  2. Svetlina Anati
    Admin
    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">
           </asp:ScriptManager>
           <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(dropDown.style.display != "none")
                 {
                    combo.hideDropDown();
                 }
              };
           }
             
            
             
           </script>
           <telerik:RadSplitter ID="SummarySplitter" runat="server" Orientation="Horizontal"
               VisibleDuringInit="false" BorderStyle="Dotted" Width="1016px" Height="205px"
               OnClientLoaded="OnClientLoaded">
               <telerik:RadPane ID="TopPane" runat="server" Scrolling="Both" Width="770px" Height="69px">
                   <div style="height: 194px">
                       <telerik:RadComboBox ID="RadIR" runat="server" NoWrap="True">
                           <Items>
                               <telerik:RadComboBoxItem Text="1" />
                           </Items>
                       </telerik:RadComboBox>
                   </div>
               </telerik:RadPane>
               <telerik:RadSplitBar ID="HorizontalSplitBar" runat="server" CollapseMode="Forward" />
               <telerik:RadPane ID="BottomPane" runat="server" Scrolling="Both" Height="350px" Width="768px">
               </telerik:RadPane>
           </telerik:RadSplitter>
       </form>

    Let me know how it goes.

    All the best,
    Svetlina
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top