Jean-Francois
Top achievements
Rank 1
Rank 1
Jean-Francois
asked on 27 Nov 2007, 02:33 PM
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?
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?
1 Answer, 1 is accepted
0
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.
Kind regards,
Petio Petkov
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
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