[Solved] Using mouse wheel on splitter

[Ryan]

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

[Svetlina Anati]

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.