Slider mouse over event with mouse wheel

2 posts, 0 answers
  1. Jean-Francois
    Jean-Francois avatar
    2 posts
    Member since:
    Nov 2007

    Posted 27 Nov 2007 Link to this post

    Hi,
    I use the slider to scroll the content of a treeview. There is a mouse over event on the slider to use the mouse wheel but i would like to be able to do the same action when the mouse is over the whole treeview. Is it possible?
  2. Petio Petkov
    Admin
    Petio Petkov avatar
    825 posts

    Posted 29 Nov 2007 Link to this post

    Hello Jean-Francois,


    The following code illustrates how to scroll slider when you scroll the treeview with the mouse scroll button . All you need to do is to synchronize the RadSlider min and max values depending on the RadTreeView height.

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
    <%@ Register TagPrefix="radT" Namespace="Telerik.WebControls" Assembly="RadTreeview.NET2" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server">  
        <title>Untitled Page</title> 
        <script type="text/javascript">  
            function attachEventToTree()  
            {    
                $addHandlers($get('RadTreeView1'),  
                {  
                    'mousewheel' : OnMouseWheel  
                });  
                  
                if (Telerik.Web.Browser.agent == Telerik.Web.Browser.Firefox)   
                {  
                    $addHandlers($get('RadTreeView1'),  
                    {  
                        'DOMMouseScroll' : OnMouseWheel  
                    });                            
                }  
            }          
            function OnMouseWheel(ev)  
            {         
            $find("RadSlider1").set_Value(this.scrollTop);  
            }  
            function OnClientValueChange(obj,args)  
            {              
                $get('RadTreeView1').scrollTop = obj.get_Value();  
            }  
        </script> 
    </head> 
    <body> 
        <form id="form1" runat="server"><asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 
        <div> 
        <table> 
            <tr> 
                <td> 
                    <telerik:RadSlider ID="RadSlider1" runat="server" Orientation="Vertical" Length="300" 
                    MinimumValue="0" MaximumValue="300" OnClientValueChange="OnClientValueChange" 
                    ></telerik:RadSlider> 
                </td> 
                <td> 
                    <radT:RadTreeView ID="RadTreeView1" runat="server" Height="300px">  
                        <Nodes> 
                            <radT:RadTreeNode Text="1">  
                            <Nodes> 
                                <radT:RadTreeNode Text="1"></radT:RadTreeNode> 
                                <radT:RadTreeNode Text="2"></radT:RadTreeNode> 
                                <radT:RadTreeNode Text="3"></radT:RadTreeNode> 
                                <radT:RadTreeNode Text="4"></radT:RadTreeNode> 
                                <radT:RadTreeNode Text="5"></radT:RadTreeNode> 
                                <radT:RadTreeNode Text="6"></radT:RadTreeNode> 
                                <radT:RadTreeNode Text="7"></radT:RadTreeNode> 
                                <radT:RadTreeNode Text="8"></radT:RadTreeNode> 
                                <radT:RadTreeNode Text="9"></radT:RadTreeNode> 
                            </Nodes>                          
                            </radT:RadTreeNode> 
                            <radT:RadTreeNode Text="2">  
                            <Nodes> 
                                <radT:RadTreeNode Text="1"></radT:RadTreeNode> 
                                <radT:RadTreeNode Text="2"></radT:RadTreeNode> 
                                <radT:RadTreeNode Text="3"></radT:RadTreeNode> 
                                <radT:RadTreeNode Text="4"></radT:RadTreeNode> 
                                <radT:RadTreeNode Text="5"></radT:RadTreeNode> 
                                <radT:RadTreeNode Text="6"></radT:RadTreeNode> 
                                <radT:RadTreeNode Text="7"></radT:RadTreeNode> 
                                <radT:RadTreeNode Text="8"></radT:RadTreeNode> 
                                <radT:RadTreeNode Text="9"></radT:RadTreeNode> 
                            </Nodes> 
                            </radT:RadTreeNode> 
                            <radT:RadTreeNode Text="3"></radT:RadTreeNode> 
                            <radT:RadTreeNode Text="4"></radT:RadTreeNode> 
                            <radT:RadTreeNode Text="5"></radT:RadTreeNode> 
                            <radT:RadTreeNode Text="6"></radT:RadTreeNode> 
                            <radT:RadTreeNode Text="7"></radT:RadTreeNode> 
                            <radT:RadTreeNode Text="8"></radT:RadTreeNode> 
                            <radT:RadTreeNode Text="9"></radT:RadTreeNode> 
                              
                        </Nodes> 
                    </radT:RadTreeView>                       
                </td> 
            </tr> 
        </table> 
        <script type="text/javascript">  
        attachEventToTree();  
        </script> 
        </div> 
        </form> 
    </body> 
    </html> 
     


    Kind regards,
    Petio Petkov
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top