Tree scrolling

9 posts, 0 answers
  1. Sampada
    Sampada avatar
    44 posts
    Member since:
    Feb 2012

    Posted 26 Jul 2012 Link to this post

    Telerik team,


    I have radtreeview in radsplitter.[Telerik DLL V2012.1.411.40]

    I have a requirement where on a selected index change of RadCombobox a radtree control should be generated. Now if I have selected a value say A from Combobox, the Tree will be generated. Now I select a Node say Node1 from the Tree and then select a different value from Picklist to regenerate the Tree. Now I want that if Node1 is again present as a Node in the new Tree generated, it should be selected and have focus on the respected Node i.e. Node1.

    Following is my code

    <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" MaintainScrollPositionOnPostback="true"
        CodeFile="Default.aspx.cs" Inherits="_Default" %>
        <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script type="text/javascript">
     
        function OnClientClicking_RadButton(splitter, arg) {
            var RadTreeView1 = $find("<%=RadTreeView1.ClientID %>");
            var Selectednode = RadTreeView1.get_selectedNode();
            if (Selectednode != null) {
                Selectednode.scrollIntoView();
                alert(Selectednode.get_text());
            }
        }
     
        function splitter(splitter, arg) {
            var RadTreeView1 = $find("<%=RadTreeView1.ClientID %>");
            var Selectednode = RadTreeView1.get_selectedNode();
            if (Selectednode != null) {
                Selectednode.scrollIntoView();
                alert(Selectednode.get_text());
            }
        }
     
    </script>
     
    </asp:Content>
    <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
     <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
               <telerik:AjaxSetting AjaxControlID="RadComboBox">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="radsplitter" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
               </telerik:AjaxSetting>
     
               </AjaxSettings>
               </telerik:RadAjaxManager>
     
                <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1">
        </telerik:RadAjaxLoadingPanel>
     
       <telerik:RadSplitter ID ="radsplitter" runat="Server" Width="100%" >
        <telerik:RadPane ID="Radpane" runat="server" Width="30%">
        <telerik:RadTreeView ID="RadTreeView1" runat="server" CheckBoxes="false" AllowNodeEditing="True" Skin="Vista"
                     EnableDragAndDrop="true" >
                </telerik:RadTreeView>
        </telerik:RadPane>
        <telerik:RadSplitBar ID="Splitbar" runat="server" CollapseMode="Forward" ></telerik:RadSplitBar>
          <telerik:RadPane ID="Radpane1" runat="server">
          <telerik:RadComboBox ID="RadComboBox" runat="server" AutoPostBack="true"  OnSelectedIndexChanged="RadComboBox_SelectedIndexChanged" >
          <Items>
          <telerik:RadComboBoxItem Text ="Tree1" Value="1" />
          <telerik:RadComboBoxItem Text ="Tree2" Value="2" />
          </Items>
          </telerik:RadComboBox>
          </telerik:RadPane>
         
       </telerik:RadSplitter>
     
    </asp:Content>

    using System;
    using Microsoft.VisualBasic;
    using System.Collections;
    using System.Collections.Generic;
    using System.Data;
    using System.Diagnostics;
    using Telerik.Web.UI;
    using System.Web.UI;
    using System.Xml.Linq;
    using System.ComponentModel;
    using System.Drawing;
    using System.Web;
    using System.Web.SessionState;
    using System.Web.UI.WebControls;
    using System.Web.UI.HtmlControls;
    using System.Xml;
    using System.Text;
    using System.Linq;
    using System.Configuration;
    using System.Security.Cryptography;
    using System.IO;
    using System.Drawing;
    using System.Text.RegularExpressions;
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
     
        }
     
        protected void RadComboBox_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)
        {
            DataTable dt = new DataTable();
            DataRow dr ;
            String selectednode = "";
            if (RadTreeView1.SelectedNode != null)
                selectednode = RadTreeView1.SelectedNode.Value;
     
            if (RadComboBox.SelectedValue == "1")
            {
                dt.Columns.Add("NODE_ID", typeof(int));
                dt.Columns.Add("PARENT_NODE_ID", typeof(int));
                dt.Columns.Add("NODE_NAME", typeof(String));
     
                for (int i = 1; i < 100; i++)
                {
                    dr = dt.NewRow();
                    dr["NODE_ID"] = i;
                    if (i != 1)
                        dr["PARENT_NODE_ID"] = 1;
                    dr["NODE_NAME"] = i.ToString() + " Operating costs";
                    dt.Rows.Add(dr);
                }
     
                RadTreeView1.DataFieldID = "NODE_ID";
                RadTreeView1.DataFieldParentID = "PARENT_NODE_ID";
                RadTreeView1.DataTextField = "NODE_NAME";
                RadTreeView1.DataValueField = "NODE_ID";
                RadTreeView1.DataSource = dt;
                RadTreeView1.DataBind();
                RadTreeView1.ExpandAllNodes();
                RadTreeView1.EnableViewState = true;
                
            }
     
            if (RadComboBox.SelectedValue == "2")
            {
                dt.Columns.Add("NODE_ID", typeof(int));
                dt.Columns.Add("PARENT_NODE_ID", typeof(int));
                dt.Columns.Add("NODE_NAME", typeof(String));
     
                for (int i = 1; i < 100; i++)
                {
                    dr = dt.NewRow();
                    dr["NODE_ID"] = i;
                    if (i != 1)
                        dr["PARENT_NODE_ID"] = 1;
                    dr["NODE_NAME"] = i.ToString() + " Report whether management has quantitatively estimated the financial implications (e.g., cost of insurance and carbon credits) of climate change for the organization. Where possible, quantification would be beneficial. If quantified, disclose financial implications and the tools used to quantify";
                    dt.Rows.Add(dr);
                }
     
                RadTreeView1.DataFieldID = "NODE_ID";
                RadTreeView1.DataFieldParentID = "PARENT_NODE_ID";
                RadTreeView1.DataTextField = "NODE_NAME";
                RadTreeView1.DataValueField = "NODE_ID";
                RadTreeView1.DataSource = dt;
                RadTreeView1.DataBind();
                RadTreeView1.ExpandAllNodes();
                RadTreeView1.EnableViewState = true;
     
            }
     
            if (selectednode != "")
            {
                RadTreeNode node = RadTreeView1.FindNodeByValue(selectednode);
                node.Selected = true;
            }
        }
     
    }


    Thanks

    Sampada


  2. Plamen
    Admin
    Plamen avatar
    2731 posts

    Posted 31 Jul 2012 Link to this post

    Hello Sampada, 

     
    Could you please elaborate a little bit what exactly is not working properly in your project because the it is not very clear from the current explanation?

    Greetings,
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sampada
    Sampada avatar
    44 posts
    Member since:
    Feb 2012

    Posted 09 Aug 2012 Link to this post


    I have a requirement that whenever user select an tree node at the bottom section & scroll up & changed the dropdown the new rad tree is getting bind but if that tree contains the node with previously selected node value then that tree node must have to be get selected & focus must have to be set on that node. In specified code the node is getting selected but focus is not set to that selected node because before changing the selected combobox item I have moved focus to the top section of the tree.

    Steps

    1. Select Tree2 from the combobox. Then tree will get appear in the left hand side[image1].
    2. Select 99th node from the tree[image2]. Then move up so that you can see the 1st node[image3].
    3. Now select Tree1 from the combobox and it shows 1st node[image4]. If you scroll down 99th node from the tree is selected[image5].

    In this scenario whenever Focus is on 1st node but selected 99th node which is correct but focus is on the 1st node which should be on 99th node.

  5. Sampada
    Sampada avatar
    44 posts
    Member since:
    Feb 2012

    Posted 13 Aug 2012 Link to this post

    Team,

    Any update on it?


  6. Plamen
    Admin
    Plamen avatar
    2731 posts

    Posted 14 Aug 2012 Link to this post

    Hello Sampada,  

    Unfortunately I could not reproduce the issue at my side. Would you please let us know if you can reproduce it at any of our on-line demos so we can inspect it deeper and provide a solution? 
     

    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.
  7. Sampada
    Sampada avatar
    44 posts
    Member since:
    Feb 2012

    Posted 29 Aug 2012 Link to this post

    Hello Plamen,

    Can you please try the code given in first post and steps given in second post?
    Becuase I am able to reproduce the same issue from my side and this is not fixed yet.

    Regards
    Sampada



  8. Plamen
    Admin
    Plamen avatar
    2731 posts

    Posted 03 Sep 2012 Link to this post

    Hi Sampada,

     
    I have reviewed the code that you posted once again. It seems that the issue is caused because the scroll that is used is the one of RadSplitter and not this of RadTreeView. In order to use the scrollIntoView() method you need the scroll of RadTreeView that will appear if you set exact height as in the code below:

    <telerik:RadTreeView ID="RadTreeView1" runat="server" CheckBoxes="false" Height="300px"
                  AllowNodeEditing="True" Skin="Vista" OnClientLoad="OnClientLoad" EnableDragAndDrop="true">
              </telerik:RadTreeView>
    function OnClientLoad(sender, args) {
     
                   var RadTreeView1 = $find("<%=RadTreeView1.ClientID %>");
                   var selectednode = RadTreeView1.get_selectedNode();
                   if (selectednode != null) {
                       selectednode.scrollIntoView();
                       
                   }
               }

    Hope this will help you solve the issue.


    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.
  9. Saibal
    Saibal avatar
    3 posts
    Member since:
    Jul 2011

    Posted 03 Jun 2013 Link to this post

    Hi Plamen,

    We are facing an issue here while using your Treeview on IPad. In the TreeView, The scrolling is happening by using Double Finger, Can we do it by Single finger too?

    Can you please paste any code snippet here?

    Regards,

    Saibal
  10. Plamen
    Admin
    Plamen avatar
    2731 posts

    Posted 06 Jun 2013 Link to this post

    Hi Saibal,

     
    I have tested  the issue on this on-line demo but it scrolled as expected event with one finger on IPad. Please elaborate the issue is I am missing something in the scenario you describe.

    Regards,
    Plamen
    Telerik
    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 the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017