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

Scrollintoview

10 Answers 251 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Madjid
Top achievements
Rank 1
Madjid asked on 12 Sep 2011, 08:25 PM
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



       
 

10 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 13 Sep 2011, 05:53 AM
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.
0
Madjid
Top achievements
Rank 1
answered on 13 Sep 2011, 02:39 PM
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.

0
Plamen
Telerik team
answered on 15 Sep 2011, 12:59 PM
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
0
Madjid
Top achievements
Rank 1
answered on 15 Sep 2011, 08:22 PM
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.



 


0
Plamen
Telerik team
answered on 21 Sep 2011, 09:03 AM
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
0
Alex
Top achievements
Rank 1
answered on 19 Mar 2013, 09:40 AM
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
0
Alex
Top achievements
Rank 1
answered on 19 Mar 2013, 10:08 AM
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);
}
  
}
0
Plamen
Telerik team
answered on 21 Mar 2013, 03:48 PM
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.
0
Alex
Top achievements
Rank 1
answered on 22 Mar 2013, 01:13 AM
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
0
Plamen
Telerik team
answered on 26 Mar 2013, 10:11 AM
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.
Tags
TreeView
Asked by
Madjid
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Madjid
Top achievements
Rank 1
Plamen
Telerik team
Alex
Top achievements
Rank 1
Share this question
or