ScrollIntoView not working

7 posts, 0 answers
  1. David Kucharski
    David Kucharski avatar
    50 posts
    Member since:
    Feb 2010

    Posted 14 Jun 2011 Link to this post

    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?


  2. Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts

    Posted 15 Jun 2011 Link to this post

    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.

  3. David Kucharski
    David Kucharski avatar
    50 posts
    Member since:
    Feb 2010

    Posted 15 Jun 2011 Link to this post

    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?
  4. Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts

    Posted 15 Jun 2011 Link to this post

    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.

  5. David Kucharski
    David Kucharski avatar
    50 posts
    Member since:
    Feb 2010

    Posted 15 Jun 2011 Link to this post

    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

  6. David Kucharski
    David Kucharski avatar
    50 posts
    Member since:
    Feb 2010

    Posted 20 Jun 2011 Link to this post

    Hello,

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

    Do you need anything else?
  7. Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts

    Posted 21 Jun 2011 Link to this post

    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.

Back to Top