Tree scrolling

[Sampada]

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

[Plamen]

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

[Sampada]

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 1^st node but selected 99^th node which is correct but focus is on the 1^st node which should be on 99^th node.

[Sampada]

Team,

Any update on it?

[Plamen]

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

[Sampada]

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

[Plamen]

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

[Saibal]

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

[Plamen]

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