scrollintoview with ajaxified control doesn't work

8 posts, 0 answers
  1. Marijana Cubra
    Marijana Cubra avatar
    11 posts
    Member since:
    May 2010

    Posted 22 Sep 2010 Link to this post

     

    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

     

     

     

  2. Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts

    Posted 27 Sep 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Marijana Cubra
    Marijana Cubra avatar
    11 posts
    Member since:
    May 2010

    Posted 13 Oct 2010 Link to this post

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

    Posted 18 Oct 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Marijana Cubra
    Marijana Cubra avatar
    11 posts
    Member since:
    May 2010

    Posted 19 Oct 2010 Link to this post

    Hello Nikolay,,

    project code with issue description is given at support ticket 358583

    Thank you,
    Marijana
  7. Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts

    Posted 22 Oct 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  8. Marijana Cubra
    Marijana Cubra avatar
    11 posts
    Member since:
    May 2010

    Posted 03 Nov 2010 Link to this post

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

    Posted 09 Nov 2010 Link to this post

    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">
    <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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017