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

ScrollIntoView not working

6 Answers 95 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
David Kucharski
Top achievements
Rank 1
David Kucharski asked on 14 Jun 2011, 04:29 PM
I am new to the Treeview so please be patient. I have a RadTreeView on my aspx page. The following information is from the Telerik.Web.UI. Version: 2009.3.1314.20, RunTime Version: v2.0.50727

During the Page_Load function where ! Page.IsPostBack I load my treeview using the Enumerable logic with a NodeDataBound customization. These 2 processes set up my treeview with a parent/child relationship along with setting up attributes and the correct contextmenus. Later down in the code I have the following code to see if the user passed in a value to have auto-selected on the treeview.

If

 

 

Request("eid") <> "" Then

 

    Dim nodeSelected As RadTreeNode = rtvEventList.FindNodeByValue(Request("eid"))

    nodeSelected.Selected =

 

True

 

 

 

    Dim js As String = "ScrollToSelectedNode();"

 

 

 

    RadScriptManager.RegisterStartupScript(Page, Page.[GetType](), "nodeSelection", js, True)

 

 

 

 

End If
The node is selected and page is filled out correctly. The function ScrollToSelectedNode() is called.

 

 

 

 

function ScrollToSelectedNode()

 

 

{

 

 

 

 

 

 

    var treeviewInstance = <%=rtvEventList.ClientID %>;

 

 

 

 

 

    var selectedNode = treeviewInstance.SelectedNode;

 

 

 

 

 

    if (selectedNode != null)

 

 

    {

 

        window.setTimeout(

 

 

function() { selectedNode.ScrollIntoView(); }, 200);

 

 

    }

 

}

 

 

 

 

It seems that the treeviewInstance has as object, but I keep getting errors that the SelectedNode of the treeviewInstance is null. So the page will not scroll the treeview to the correct node. What am I doing wrong?


6 Answers, 1 is accepted

Sort by
0
Nikolay Tsenkov
Telerik team
answered on 15 Jun 2011, 03:38 PM
Hi David,

You can find the TreeView client object using the $find function. Here is a nice article that should give you a better idea on the basics of the Client-side api of RadTreeView: http://www.telerik.com/help/aspnet-ajax/treeview-client-basics.html

Having the treeView instance, you can retrieve the selected node by the treeView.get_selectedNode() function of RadTreeView client object. Here is a helpful page with the current state of the client-side api of RadTreeView: http://www.telerik.com/help/aspnet-ajax/treeview-client-objects-radtreeview.html

I hope this is helpful for you!


Regards,
Nikolay Tsenkov
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
David Kucharski
Top achievements
Rank 1
answered on 15 Jun 2011, 03:51 PM
First thanks for the reply,

When I put in my code the first line
var tree = $find("<%= RadTreeView1.ClientID %>");

my tree object is null.

I know it is on my form and is named RadTreeView1.

Any suggestions?
0
Nikolay Tsenkov
Telerik team
answered on 15 Jun 2011, 04:59 PM
Hi David,

And where exactly is this line located?
Could you, please, post an example so I can resolve the issues in it?

My guess is that the line you search for the TreeView in, is been executed before the client object is created.
There will be no need for guessing when I have the code and I will do my best to resolve the problem once you provide with the sample.


Regards,
Nikolay Tsenkov
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
David Kucharski
Top achievements
Rank 1
answered on 16 Jun 2011, 12:42 AM
Here is the .aspx page I am using. Below this is the page_load function for this form.

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="TelerikTreeView.WebForm1" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!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></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
         <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

            <script type="text/javascript">       
                /* <![CDATA[ */                                   
               
               function onNodeDragging(sender, args)
                {
                    var target = args.get_htmlElement();   
                   
                    if(!target) return;
                   
                    if (target.tagName == "INPUT")
                    {       
                        target.style.cursor = "hand";
                    }
                }
        
                function dropOnHtmlElement(args)
                {                   
                 if(droppedOnInput(args))
                 return;
                
                 if(droppedOnGrid(args))
                 return;                   
                }
               
                function droppedOnGrid(args)
                {
                 var target = args.get_htmlElement();
                
                 while(target)
                 {
                 target = target.parentNode;
                 }
                 args.set_cancel(true);
                }
               
                function droppedOnInput(args)
                {
                 var target = args.get_htmlElement();
                    if (target.tagName == "INPUT")
                    {
                        target.style.cursor = "default";
                        target.value = args.get_sourceNode().get_text();       
                        args.set_cancel(true);
                        return true;
                    }                         
                }
        
                function dropOnTree(args)
                {
                    var text = "";

                    if(args.get_sourceNodes().length)
                    {   
                        var i;
                        for(i=0; i < args.get_sourceNodes().length; i++)
                        {
                            var node = args.get_sourceNodes()[i];
                            text = text + ', ' +node.get_text();
                        }
                    }
                }
               
                function clientSideEdit(sender, args)
                {
                 var destinationNode = args.get_destNode();                                 
                
                 if(destinationNode)
                 {            
                 var firstTreeView = $find('RadTreeView1');
                
                        firstTreeView.trackChanges();
                        var sourceNodes = args.get_sourceNodes();
                 for (var i = 0; i < sourceNodes.length; i++)
                 {
                            var sourceNode = sourceNodes[i];
                            sourceNode.get_parent().get_nodes().remove(sourceNode);                
                           
                            if(args.get_dropPosition() == "over") destinationNode.get_nodes().add(sourceNode);                                                       
                            if(args.get_dropPosition() == "above")     insertBefore(destinationNode, sourceNode);
                            if(args.get_dropPosition() == "below")     insertAfter(destinationNode, sourceNode);
                 }
                 destinationNode.set_expanded(true);
                 firstTreeView.commitChanges();
                 }
                }
               
                function insertBefore(destinationNode, sourceNode)
                {
                 var destinationParent = destinationNode.get_parent();
                 var index = destinationParent.get_nodes().indexOf(destinationNode);
                 destinationParent.get_nodes().insert(index, sourceNode);
                }
               
                function insertAfter(destinationNode, sourceNode)
                {
                 var destinationParent = destinationNode.get_parent();
                 var index = destinationParent.get_nodes().indexOf(destinationNode);
                 destinationParent.get_nodes().insert(index+1, sourceNode);
                }               
               
                function onNodeDropping(sender, args)
                {           
                    var dest = args.get_destNode();
                    if (dest)
                    {
                        dropOnTree(args);
                    }
                    else
                    {
                        dropOnHtmlElement(args);
                    }
                }

                function onClientContextMenuItemClicking(sender, args)
                {
                    var menuItem = args.get_menuItem();
                    var treeNode = args.get_node();
                    menuItem.get_menu().hide();
                   
                    switch(menuItem.get_value())
                    {
                        case "AddNode":
                            document.frmEventsList.hidProcessMenu.value = true;
                            break;
                        case "NewEvent":
                            document.frmEventsList.hidProcessMenu.value = true;
                            break;
                        case "MoveToMV":
                             document.frmEventsList.hidProcessMenu.value = true;
                            break;
                        case "DeleteNode":
                            var result = confirm("Are you sure you want to delete the node: " + treeNode.get_text());
                            document.frmEventsList.hidProcessMenu.value = result;
                            break;                           
                        case "DeleteEvent":
                            var result = confirm("Are you sure you want to delete the Event: " + treeNode.get_text());
                            document.frmEventsList.hidProcessMenu.value = result;
                            break;                           
                    }
                }
             function ScrollToSelectedNode()
              {
                    var treeviewInstance = <%= RadTreeView1.ClientID %>;
                   var selectedNode = treeviewInstance.SelectedNode;
                   if (selectedNode != null)
                   {
                      window.setTimeout(function() { selectedNode.scrollintoview(); }, 200);
                   }
              }
        /* ]]> */
            </script>
    </telerik:RadScriptBlock>

        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="200px" Width="300px">
        <telerik:RadTreeView ID="RadTreeView1" runat="server" Height="60px" Width="100px">
    <Nodes>
        <telerik:RadTreeNode Value="1" Text="1"></telerik:RadTreeNode>
        <telerik:RadTreeNode Value="2" Text="2"></telerik:RadTreeNode>
        <telerik:RadTreeNode Value="3" Text="3"></telerik:RadTreeNode>
        <telerik:RadTreeNode Value="4" Text="4"></telerik:RadTreeNode>
        <telerik:RadTreeNode Value="5" Text="5"></telerik:RadTreeNode>
        <telerik:RadTreeNode Value="6" Text="6"></telerik:RadTreeNode>
        <telerik:RadTreeNode Value="7" Text="7"></telerik:RadTreeNode>
        <telerik:RadTreeNode Value="8" Text="8"></telerik:RadTreeNode>
        <telerik:RadTreeNode Value="9" Text="9"></telerik:RadTreeNode>
        <telerik:RadTreeNode Value="10" Text="10"></telerik:RadTreeNode>
    </Nodes>
    </telerik:RadTreeView>
        </telerik:RadAjaxPanel>
   

    </div>
    </form>
</body>
</html>

-------------------------------------

Imports Telerik.Web.UI

Public Class WebForm1
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            Dim nodeSelected As RadTreeNode = RadTreeView1.FindNodeByValue(10)
            nodeSelected.Selected = True
            Dim js As String = "ScrollToSelectedNode();"
            RadScriptManager.RegisterStartupScript(Page, Page.[GetType](), "nodeSelection", js, True)
        End If
    End Sub
End Class

0
David Kucharski
Top achievements
Rank 1
answered on 20 Jun 2011, 07:18 PM
Hello,

It has been about 5 days. Is there any answer to my issue described in this thread?

Do you need anything else?
0
Nikolay Tsenkov
Telerik team
answered on 21 Jun 2011, 09:41 AM
Hello David,

Here is how your ScrollToSelectedNode function should look like:
function ScrollToSelectedNode()
{
    var treeviewInstance = $find('<%= RadTreeView1.ClientID %>');
    var selectedNode = treeviewInstance.get_selectedNode();
    if (selectedNode != null)
    {
        window.setTimeout(function() { selectedNode.scrollIntoView(); }, 200);
    }
}


Regards,
Nikolay Tsenkov
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Tags
TreeView
Asked by
David Kucharski
Top achievements
Rank 1
Answers by
Nikolay Tsenkov
Telerik team
David Kucharski
Top achievements
Rank 1
Share this question
or