Scrollintoview

11 posts, 0 answers
  1. Madjid
    Madjid avatar
    5 posts
    Member since:
    Sep 2011

    Posted 12 Sep 2011 Link to this post

    Hi,

    -NODE A
                 - NODE AA
                 - NODE BB
    |
    |
    |
    |
    |
    |
    |
    +NODE B
      

    AFTER CLICK


    +NODE A
                    
    |
    |
    |
    |
    |
    |
    |
    -NODE B
               -NODE BB  <--------   SCROLL TO THIS NODE

     

    When I click on node on treeview, from the server side node Click event I want to find a given node like this.
     VarNode = RadTreeView2.FindNodeByValue("31138") and if it has children I expand it and select the leaf.
    Then what I cannot achieve is to scroll to the selected node

    Any idea?

     

    Thanks

     

    Thanks



           
     
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 13 Sep 2011 Link to this post

    Hello Madjid,

    You can use scrollIntoView function.
    Please take a look into the following help article which explains more on this.
    Scrolling to a Node when Page first loads.

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Madjid
    Madjid avatar
    5 posts
    Member since:
    Sep 2011

    Posted 13 Sep 2011 Link to this post

    Hello Princy,

    I've already tested what you suggested but it was not working from server side. below this is the code
    please take a look.

    ASPX

    <script type="text/javascript">
     function ScrollToSelectedNode() {
    var treeview = $find('<%=RadTreeView2.ClientID %>');    <-------- HERE treeview is always null
                var node = treeview.get_selectedNode(); //
                var nodeElement = node.get_element();
                nodeElement.scrollIntoView();

            }
     </script>

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" >
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="divLoading">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="divLoading" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
    ....


    <telerik:RadTreeView ID="RadTreeView2" runat="server" Width="100%" Height="100%"   
                            sort="Ascending" OnClientNodeClicking="ClientNodeClicking" SingleExpandPath="true"
                            ExpandOnSingleClickEnabled="false"  CssClass="TreeView"
                            DataFieldID="ID" DataFieldParentID="ParentID" OnNodeExpand="RadTreeView2_NodeExpand"
                            DataTextField="Text"  OnNodeClick="RadTreeView2_NodeClick"
                            DataValueField="ID"      >
                            <DataBindings>
                                <telerik:RadTreeNodeBinding Expanded="true" />
                            </DataBindings>
                        </telerik:RadTreeView>



    ASPX.VB

    Protected Sub RadTreeView2_NodeClick(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadTreeNodeEventArgs)
    ...
                node = RadTreeView2.FindNodeByValue("31138")  ' Locate an  existing node by value
                node.Selected = True
                If node.HasControls() = False Then  ' expand this node
                    Dim e0 As Telerik.Web.UI.RadTreeNodeEventArgs
                    e0 = New Telerik.Web.UI.RadTreeNodeEventArgs(node)
                    RadTreeView2_NodeExpand(node, e0)
                    ScriptManager.RegisterStartupScript(Me, Me.[GetType](), "scrollToselectedNode", "ScrollToSelectedNode();", True)
                End If
     End Sub

    Thanks
    Madjid.

  5. Plamen
    Admin
    Plamen avatar
    2731 posts

    Posted 15 Sep 2011 Link to this post

    Hi Madjid,

    If you are using update panel on the initial load you can refer to this help article.

    Hope this will be helpful.

    Kind regards,
    Plamen Zdravkov
    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
  6. Madjid
    Madjid avatar
    5 posts
    Member since:
    Sep 2011

    Posted 15 Sep 2011 Link to this post

    Hi,

    Not working.
     

    When I click on a node on a treeview (let’s say see nodeA) I want from server side (node click event) to scroll to a nodeA.


    1)  finding and selecting the node    <----------- it's ok

    2) ScriptManager.RegisterStartupScript(Me, Me.[GetType](), "scrollToselectedNode", "ScrollToSelectedNode();", True)   <----- OK



    <script type="text/javascript">
     function ScrollToSelectedNode() {
    var treeview = $find('<%=RadTreeView2.ClientID %>');    <-------- HERE treeview is always null
                var node = treeview.get_selectedNode(); //
                var nodeElement = node.get_element();
                nodeElement.scrollIntoView();

            }
     </script>


    Please how can I do this?


    Thanks,

    Madjid.



     


  7. Plamen
    Admin
    Plamen avatar
    2731 posts

    Posted 21 Sep 2011 Link to this post

    Hi Madjid,

    You cannot find the tree with this method and  will have to use the Client event onClientNodeClicking like in this code:
    function OnClientNodeClicking(sender, args) {
               var tree = $find("<%= RadTreeView1.ClientID %>");
               var selectedNode = tree.findNodeByText('Support');
               if (selectedNode != null) {
                   window.setTimeout(function () { selectedNode.scrollIntoView(); }, 200);
               }
           }

    If you need to do some functionality on the server side after that you trigger an AjaxRequest.



    Best wishes,
    Plamen Zdravkov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  8. Alex
    Alex avatar
    32 posts
    Member since:
    May 2012

    Posted 19 Mar 2013 Link to this post

    Hi Plamen,

    I think the method "OnClientNodeClicking" will be called before pageload. How could we scroll to the selected node after pageload? I tried to call script from server side, but the tree view cannot be found. Do you know why?

    Client side:

     

     

    function scrollToTreeViewNode() {

     

     

     

        var treeview = $find("<%= radTreeViewResources.ClientID %>");

     

     

     

        if (treeview != null) {

     

     

     

            var treeNode = treeview.findNodeByValue(document.getElementById('<%= hiddenSelectedTreeViewNode.ClientID%>').value);

     

     

     

        if (treeNode != null) {

     

     

     

            var nodeElement = treeNode.get_element();

     

            nodeElement.scrollIntoView();

        }

        }

    }


    Server side:

     

     

    protected override void OnLoad(EventArgs e)

     

    {

     

     

        base.OnLoad(e);

     

     

     

        if (!IsPostBack)

     

        {

        }

     

     

        else

     

        {

     

     

            string script = "<script language=\"javascript\">scrollToTreeViewNode();</script>";

     

     

     

            ScriptManager.RegisterStartupScript(updatePaneResourceAssignment, typeof(UpdatePanel), "scrollToTreeViewNode", script, false);

     

        }

        }


    Alex
  9. Alex
    Alex avatar
    32 posts
    Member since:
    May 2012

    Posted 19 Mar 2013 Link to this post

    Hi Plamen,

    Now, I could get the tree view but the scrollIntoView does not work for my codes. All the codes could be executed but nothing happens. Do you know why?

    function OnClientNodeClicking(sender, args) {
        var selectedNode = document.getElementById('<%= hiddenSelectedTreeViewNode.ClientID %>')
        var treeNode = args.get_node();
        if (treeNode != null) {
            var nodeElement = treeNode.get_element();
            window.setTimeout(function () { $telerik.scrollIntoView(treeNode); }, 6000);
            //window.setTimeout(function () { $telerik.scrollIntoView(nodeElement); }, 6000);
    }
      
    }
  10. Plamen
    Admin
    Plamen avatar
    2731 posts

    Posted 21 Mar 2013 Link to this post

    Hi Alex,

     
    the code that you pasted looks quite unusual than the one I shared -would you please explain if your scenario is somehow different. 

    Please make sure as well that you are trying to scroll the TreeView's scroll and not the scroll of some outer container.

    Kind regards,
    Plamen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  11. Alex
    Alex avatar
    32 posts
    Member since:
    May 2012

    Posted 21 Mar 2013 Link to this post

    Hi Plamen,

    Yes, my scenario is that I want to scroll to the current selected node and my node text maybe the same.

    I have used "findNodeByValue" to find the exact node but failed. Now I could only get the node by args.get_node();
    var treeNode = args.get_node();

    I don't know whether I have to scroll of outer container update panel or just the tree view. I just want to scroll to the selected tree view node. Here are my aspx codes. Could you give me some comments?  I just want to scroll to the selected tree view node.

    <asp:UpdatePanel ID="updatePaneResourceAssignment" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
      
            <div class="formList resourceRadioButtons">
                <ul>
                    <li><asp:Label ID="labelTitle" runat="server" ></asp:Label></li>
                    <li><asp:RadioButton ID="radioButtonAllResources" runat="server" /></li>
                    <li><asp:RadioButton ID="radioButtonSelectResources" runat="server" /></li>
                </ul>
            </div>
      
            <asp:Panel ID="panelResources" runat="server">
                <div id="selectedResourcesList">
                    <telerik:RadTreeView ID="radTreeViewResources" runat="server" />
                </div>
                <div id="selectedResourcesButtons"
                    <asp:Button ID="buttonSelectAll" runat="server" CssClass="button" />
                    <asp:Button ID="buttonSelectNone" runat="server" CssClass="button" />
                </div>
            </asp:Panel>
      
            <input id="selectedScheduleID" type="hidden" runat="server" />
            <input id="hiddenSelectedScheduleType" type="hidden" runat="server" />
      
        </ContentTemplate>
    </asp:UpdatePanel>

    Alex
  12. Plamen
    Admin
    Plamen avatar
    2731 posts

    Posted 26 Mar 2013 Link to this post

    Hi Alex,

     
    You can refer to this help article where this scenario have been described. Please have in mind that the Height property of RadTreeView is set-otherwise the scroll itself won't event show.

    Hope this will explain the issue.

    All the best,
    Plamen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017