scrollintoview with ajaxified control doesn't work

[Marijana Cubra]

 

Hello,

I am using radtreeview on page with RadAjaxManager for ajaxifying controls
Radtreeview is used to update other controls, as well as to be updated from another control, via radajaxmanager

Also have onClientLoad event on radtreeview and associated script:
 

<script type="text/javascript" language="javascript">



function ScrollToSelectedNode() {


var tree = $find('<%=tv_Projects.ClientID %>');

var selectedNode = tree.get_selectedNode();

if (selectedNode) {

selectedNode.scrollIntoView();

}

}

</script>

<telerik:RadSplitter runat="server" ID="rdSplitter" LiveResize="False" Width="100%"
    Height="550px" VisibleDuringInit="False">
    <telerik:RadPane ID="radPaneTreeviews" runat="server" MinWidth="50" Width="250px">
        <telerik:RadTreeView ID="tv_Projects" Runat="server" CheckBoxes="False" s Height="100%"
            DataFieldParentID="ParentID" DataFieldID="ProjectID" DataTextField="NodeText"
            DataValueField="NodeText" OnClientLoad="ScrollToSelectedNode" OnClientNodeExpanded="ScrollToSelectedNode">
        </telerik:RadTreeView>
    </telerik:RadPane>
    <telerik:RadSplitBar ID="rdSplitBar" runat="server" CollapseMode="Forward">
    </telerik:RadSplitBar>
    <telerik:RadPane ID="radPaneGrid" runat="server" Width="100%" MinHeight="550"
        MinWidth="50" Scrolling="Y">
        <asp:Panel ID="MainContentPanel" runat="server" Style="text-align:right">
        </asp:Panel>
    </telerik:RadPane>
</telerik:RadSplitter>

However, selectedNode.scrollIntoView(); , although executed (verified!), doesn't produce any effect.

If ajaxifying and RadaAjaxManger is not used, but only regular postbacks, everything works fine.

What has to be changed, in order to get radtreeview scrolled to selected node, with ajax switched on?

Thanks,
Marijana

 

 

 

[Nikolay Tsenkov]

Hello Marijana Cubra,

Could you, please, try using the this instead:

var nodeElement = node.get_element();
nodeElement.scrollIntoView();

Hope this is going to help you!


Regards,
Nikolay Tsenkov
the Telerik team

[Marijana Cubra]

Hello Nikolay,

Thanks for reply and sorry for our late response.
In fact we are deploying at customer site our application with Telerik controls,...

But this issue came back to focus again. Applying your code didn't help. Behaviour changed a bit, but essentialy nothing new.
Especially for on cleint load event, selected node still doesn't come into view.

Please advise if there can be another approach

Thanks

[Nikolay Tsenkov]

Hi Marijana Cubra,

I couldn't reproduce the problem you experience.
Could you, please, check if this is going to work for you too:
1. markup:

<telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1">
    <telerik:RadSplitter runat="server" ID="rdSplitter" LiveResize="False" Width="100%"
        Height="550px" VisibleDuringInit="False">
        <telerik:RadPane ID="radPaneTreeviews" runat="server" MinWidth="50" Width="250px">
            <telerik:RadTreeView ID="RadTreeView1" runat="server" CheckBoxes="False" Height="100%"
                OnClientLoad="onLoad" OnNodeClick="RadTreeView1_NodeClick">
                <Nodes>
                    <telerik:RadTreeNode Text="ClickMe!" />
                    <telerik:RadTreeNode Text="ClickMe!" />
                    <telerik:RadTreeNode Text="ClickMe!" />
                    <telerik:RadTreeNode Text="ClickMe!" />
                    <telerik:RadTreeNode Text="ClickMe!" />
                    <telerik:RadTreeNode Text="ClickMe!" />
                    <telerik:RadTreeNode Text="ClickMe!" />
                    <telerik:RadTreeNode Text="ClickMe!" />
                    <telerik:RadTreeNode Text="ClickMe!" />
                    <telerik:RadTreeNode Text="ClickMe!" />
                    <telerik:RadTreeNode Text="ClickMe!" />
                    <telerik:RadTreeNode Text="ClickMe!" />
                    <telerik:RadTreeNode Text="ClickMe!" />
                    <telerik:RadTreeNode Text="ClickMe!" />
                    <telerik:RadTreeNode Text="ClickMe!" />
                    <telerik:RadTreeNode Text="ClickMe!" />
                    <telerik:RadTreeNode Text="ClickMe!" />
                    <telerik:RadTreeNode Text="ClickMe!" />
                    <telerik:RadTreeNode Text="ClickMe!" />
                    <telerik:RadTreeNode Text="ClickMe!" />
                    <telerik:RadTreeNode Text="ClickMe!" />
                    <telerik:RadTreeNode Text="ClickMe!" />
                    <telerik:RadTreeNode Text="ClickMe!" />
                    <telerik:RadTreeNode Text="ClickMe!" />
                    <telerik:RadTreeNode Text="ClickMe!" />
                    <telerik:RadTreeNode Text="ClickMe!" />
                    <telerik:RadTreeNode Text="ClickMe!" />
                    <telerik:RadTreeNode Text="ClickMe!" />
                    <telerik:RadTreeNode Text="ClickMe!" />
                    <telerik:RadTreeNode Text="ClickMe!" />
                    <telerik:RadTreeNode Text="ClickMe!" />
                </Nodes>
            </telerik:RadTreeView>
        </telerik:RadPane>
        <telerik:RadSplitBar ID="rdSplitBar" runat="server" CollapseMode="Forward">
        </telerik:RadSplitBar>
        <telerik:RadPane ID="radPaneGrid" runat="server" Width="100%" MinHeight="550" MinWidth="50"
            Scrolling="Y">
            <asp:Panel ID="MainContentPanel" runat="server" Style="text-align: right">
            </asp:Panel>
        </telerik:RadPane>
    </telerik:RadSplitter>
</telerik:RadAjaxPanel>

2. JavaScript:

function onLoad(sender) {
    var tree = sender;
    tree._findItemByHierarchicalIndex("28").scrollIntoView();
}

3. Code-behind:

protected void RadTreeView1_NodeClick(object sender, Telerik.Web.UI.RadTreeNodeEventArgs e)
{

}

Please, try that out and let me know the results.

Hope that soon we will resolve the problem!


Regards,
Nikolay Tsenkov
the Telerik team

[Marijana Cubra]

Hello Nikolay,,

project code with issue description is given at support ticket 358583

Thank you,
Marijana

[Nikolay Tsenkov]

Hello Marijana,

Thanks Marijana!
As soon as I made some progress on this problem I will update you!

Hope that we will resolve this soon!


Regards,
Nikolay Tsenkov
the Telerik team

[Marijana Cubra]

Nikolay,

to move our corespondence from ticketing to forum.

It seems it is not clear enough that persisting the state in cookie is not solution for me!
I clearly stated that in my previous posts/tickets.

At inital page load (PostBack = False) I create treview based on session paramters/query string values.
Also select certain node on server side at that moment, again, based on paramters from another, calling page

I simply want to scroll into view for selected node,on client load, when postBack is false.
That doesn't work if treeview is ajax updated control on change of another control, as in example I sent you.

So, if this is not possible with Telerik treeview control, please just tell so.
Otherwise, we both waste our time , when I wait 3-4 days for your answer, which is always the same: "persist state of treeview on client side"

Thanks,
Marijana

[Nikolay Tsenkov]

Hello Marijana Cubra,

Here is a solution that should work for your scenario, too:
1. MasterPage markup and JavaScript:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Test persist state in cookie for TreeView.master.cs"
    Inherits="Test_persist_state_in_cookie_for_TreeView" %>

<%@ 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>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager runat="server" ID="ScriptManager1" />
        <script type="text/javascript">

            function setCookie(cookieName, cookieValue, expires, path, domain, secure) {
                document.cookie = escape(cookieName) + '=' + escape(cookieValue)
                 + (expires ? '; EXPIRES=' + expires.toGMTString() : '')
                 + (path ? '; PATH=' + path : '')
                 + (domain ? '; DOMAIN=' + domain : '')
                 + (secure ? '; SECURE' : '');
            }

            function getCookie(cookieName) {
                var cookieValue = null;
                var posName = document.cookie.indexOf(escape(cookieName) + '=');

                if (posName != -1) {
                    var posValue = posName + (escape(cookieName) + '=').length;
                    var endPos = document.cookie.indexOf(';', posValue);
                    if (endPos != -1) {
                        cookieValue = unescape(document.cookie.substring(posValue, endPos));
                    }
                    else {
                        cookieValue = unescape(document.cookie.substring(posValue));
                    }
                }
                return cookieValue;
            }


            function onLoad(sender) {
                var tree = sender;

                var cookie = getCookie("selectedNode");

                if (cookie) {
                    var selectedNode = tree._findItemByHierarchicalIndex(cookie);
                    selectedNode.set_selected(true);

                    var parent = selectedNode.get_parent();

                    var nodeLevel = selectedNode.get_level();
                    for (var i = nodeLevel; i > 0; i--) {
                        if (parent) {
                            parent.set_expanded(true);
                            parent = parent.get_parent();
                        }
                        else
                            break;
                    }
                    debugger;
                    selectedNode.scrollIntoView();
                    setTimeout(function(){selectedNode.get_textElement().scrollIntoView();}, 400);
                }
            }

            function nodeClicked(sender, args) {
                var tree = sender;

                var selectedNode = tree.get_selectedNode();
                if (selectedNode)
                    setCookie("selectedNode", selectedNode._getHierarchicalIndex());
            }
        </script>
        <telerik:RadTreeView runat="server" ID="RadTreeView1" OnClientLoad="onLoad" OnClientNodeClicked="nodeClicked">
        </telerik:RadTreeView>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

2. Master page code-behind:

using System;
using Telerik.Web.UI;

public partial class Test_persist_state_in_cookie_for_TreeView : System.Web.UI.MasterPage
{
    protected void Page_Load(object sender, EventArgs e)
    {
        for (int i = 0; i < 100; i++)
        {
            var rootNode = new RadTreeNode("Node1");
            rootNode.NavigateUrl = "TreeView persist state" + (i + 1).ToString() + ".aspx";
            for (int j = 0; j < 2; j++)
            {
                var childFirstLevel = new RadTreeNode("ChildFirstLevel");
                childFirstLevel.NavigateUrl = "TreeView persist state" + (j + 1).ToString() + ".aspx";
                for (int k = 0; k < 2; k++)
                {
                    var childSecondLevel = new RadTreeNode("ChildSecondLevel");
                    childSecondLevel.NavigateUrl = "TreeView persist state" + (k + 1).ToString() + ".aspx";
                    childFirstLevel.Nodes.Add(childSecondLevel);
                }
                rootNode.Nodes.Add(childFirstLevel);
            }
            RadTreeView1.Nodes.Add(rootNode);
        }
    }
}

3. TreeView persist state1.aspx content page:

<%@ Page Title="" Language="C#" MasterPageFile="~/Test persist state in cookie for TreeView.master" AutoEventWireup="true" CodeFile="TreeView persist state1.aspx.cs" Inherits="Default4" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
</asp:Content>

4. TreeView persist state2.aspx content page markup:

<%@ Page Title="" Language="C#" MasterPageFile="~/Test persist state in cookie for TreeView.master" AutoEventWireup="true" CodeFile="TreeView persist state2.aspx.cs" Inherits="Default4" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
</asp:Content>

You need only to create a master page with 2 content pages and paste the above code respectively.

In order to test the solution, load one of the content pages in the browser and for example expand the last root node and click on on of it's children. What should happen then is navigation and then after the TreeView is loaded only one node is selected, it's parents expanded and the node itself into view!

Hope this finally solves it!


Regards,
Nikolay Tsenkov
the Telerik team