This is a migrated thread and some comments may be shown as answers.

[Solved] How to get RadTreeView to autoscroll inside a RadSlidingPane?

3 Answers 151 Views

TreeView

This is a migrated thread and some comments may be shown as answers.

Jeff Rasmussen asked on 24 Feb 2010, 09:18 PM

I see mention of this functionality in places, however i can not seem to get it to work correctly.

I want the sliding pane to automatically scroll up or down when drag-dropping tree nodes.

I've tried various comboniations of persistscrollproperties and scrolling on the slidingpane, obviously with various incorrect assumptions. What could i be missing?

Thanks for your help.

<telerik:RadSlidingPane ID="TreePane" Title="Workflow" runat="server" Width="300px" DockOnOpen="True" BorderWidth="3px" BorderStyle="Solid" EnableEmbeddedBaseStylesheet="False" Height="100%">
<telerik:RadTreeView ID="rtvRadTreeView1" runat="server" EnableDragAndDrop="True" EnableDragAndDropBetweenNodes="True" OnClientContextMenuItemClicking="ClientNodeClicking" OnClientNodeClicking="ClientNodeClicking" clientNodeCollapsed="ClientNodeCollapsed" OnClientNodeExpanded="ClientNodeExpanded" OnClientNodeClicked="OnClientNodeClicked_ClientNodeClicked" OnClientContextMenuItemClicked="rtvRadTreeView1_OnClientContextMenuItemClicked" PersistLoadOnDemandNodes="False" ShowLineImages="False" DataSourceID="dsTree" DataFieldParentID="ParentID" DataFieldID="pk" DataValueField="pk" DataTextField="Title" OnClientLoad="rtvRadTreeView1_OnClientLoad" >

3 Answers, 1 is accepted

answered on 02 Mar 2010, 09:01 AM

treeviewinsplitterscroll.zip

Hi Jeff Rasmussen,

One possible solution is to set Height property of RadTreeView not to RadSlidingPane. This way the RadTreeView will scroll automatically inside the SlidingPane.

The other option is to subscribe to OnClientNodeDragging event of the treeview and scroll the pane in its handler. I've attached a simple page demonstrating this approach.

Kind regards,
Veronica Milcheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

answered on 03 Mar 2010, 12:07 AM

I'm not sure what was meant by the statement "One possible solution is to set Height property of RadTreeView not to RadSlidingPane."

The javascript method seemed to work OK with a few alterations as noted below.

There are a few bugs though which i'm not sure can be countered.
Firstly in IE8, once the cursor moves outside the window, the dropping event is never fired (additionally, the insertion cursor disappears). probably a MS bug as it works fine in Chrome

Secondly, while the "Scroll Up" part seems to work fine, incrementally moving the container with each iteration of the nodeDragging event; the "Scroll Down" part just seems to jump to the end.

This is fine for my needs, just thought you should know.

Thanks for your help.

    
            function nodeDragging(sender, args)  
        
                    {  
        
                        var container = sender.get_element().parentNode.parentNode;  
        
                        var divYCoord = $telerik.getLocation(container).y;  
        
                        var currentYCoord = args.get_domEvent().clientY;  
        
                        var pageWidth = $(window.top).width()   
        
                        var pageHeight = $(window.top).height() //JQuery page height  
        
                        if(currentYCoord-20 <= divYCoord)  
        
                        {  
        
                            container.scrollTop -= "20";  
        
                            }  
        
                        if(Math.min(divYCoord+container.clientHeight,pageHeight) <= currentYCoord+20)  
        
                        {  
        
                            container.scrollTop += "20";  
        
                            }  
        
                    }