RadTreeView child node Focus

[Lubna Ansari]

Hi,

I am using radtreeview nodes to redirect to different pages using NavigateURL property on child node click. This is working fine but it doesnot focus on clicked node and also the tree gets collapsed. I've tried both client and serverside node click event to set the focus but it is not working. Below is my code.

<

 

script type="text/javascript">

 

 

function onNodeClicked(sender, args)

 

{

sender.get_element().focus();

}

 

</script>

 

 

<telerik:RadTreeView runat="Server" ID="RadTreeView1" EnableDragAndDrop="true" Skin="Vista" OnNodeClick="RadTreeView1_NodeClick"

 

 

CausesValidation="false" OnClientNodeClicked="onNodeClicked" >

 

 

<Nodes>

 

 

<telerik:RadTreeNode runat="server" Text="Home" AllowDrag="false" NavigateUrl="~/Welcome.aspx"

 

 

AllowDrop="false">

 

 

</telerik:RadTreeNode>

 

 

<telerik:RadTreeNode runat="server" Text="My Details" AllowDrag="false" >

 

 

<Nodes>

 

 

<telerik:RadTreeNode runat="server" Text="Update My Details" AllowDrop="false" NavigateUrl="~/Registration.aspx" >

 

 

</telerik:RadTreeNode>

 

 

<telerik:RadTreeNode runat="server" Text="Change Password" AllowDrop="false" NavigateUrl="~/ChangePassword.aspx" >

 

 

</telerik:RadTreeNode>

 

 

<telerik:RadTreeNode runat="server" Text="Update Unit Details" AllowDrop="false" >

 

 

</telerik:RadTreeNode>

 

 

</Nodes>

 

 

</telerik:RadTreeNode>

 

 

</Nodes>

 

 

</telerik:RadTreeView>

 

 

protected void RadTreeView1_NodeClick(object sender, RadTreeNodeEventArgs e)

 

{

hdnCurrentNode.Value = e.Node.Text;

 

RadTreeNode rtn = RadTreeView1.FindNodeByText(hdnCurrentNode.Value, true);

 

rtn.Selected =

true;

 

 

}

I think it related to some post back property but not sure.

Regards,
Lubna.

[Veronica]

Hello Lubna,

When you use the NavigateUrl property the NodeClick event will fire neither server-side nor client-side.

As I understand you want to highlight (select) the item from which you navigate to another page. You may set the url to navigate to in the value of the RadTreeNode:

<telerik:RadTreeNode runat="server" Text="Update My Details" AllowDrop="false" Value="https://www.telerik.com">
                    </telerik:RadTreeNode>

After that you may subscribe to the OnClientNodeClicked event, get the value and select the node:

function onNodeClicked(sender, eventArgs) {
            var node = eventArgs.get_node();
            var url = node.get_value();
            if (url) {
                window.open(url, "mywindow");
                var prevNode = node.get_nextNode();
                prevNode.get_parent().expand();
                node.select();
            }
        }

 
Find the full code in the attached .zip file.

Hope this helps.
 
All the best,
Veronica Milcheva
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.

[Lubna Ansari]

Hi Veronica ,

Thank you of r the code. But the code you have sent opens a new window. I do not want a new window to open.
 I am using a master content page with left panel having a tree view and when u click on any node respective page will appear in center panel.

Regards,
Lubna.

[Veronica]

Hello Lubna Ansari,

I've edited my project so now it should fit to your scenario.
 
In the MasterPage.master I create a RadTreeView and set the NavigateUrl in the Value of each RadTreeNode:

<telerik:RadTreeView runat="Server" ID="RadTreeView1" EnableDragAndDrop="true" Skin="Vista"
            CausesValidation="false" OnClientNodeClicked="onNodeClicked">
            <Nodes>
                <telerik:RadTreeNode runat="server" Text="Home" AllowDrag="false" Value="https://www.google.com"
                    AllowDrop="false">
                </telerik:RadTreeNode>
                <telerik:RadTreeNode runat="server" Text="My Details" AllowDrag="false" Expanded="true">
                    <Nodes>
                        <telerik:RadTreeNode runat="server" Text="Update My Details" AllowDrop="false" Value="https://www.telerik.com">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode runat="server" Text="Change Password" AllowDrop="false" Value="https://www.microsoft.com">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode runat="server" Text="Update Unit Details" AllowDrop="false">
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeView>

In the Content page I find the the value of the clicked node and set the NavigateUrl to a src attribute of an iframe control:

function onNodeClicked(sender, eventArgs) {
            var node = eventArgs.get_node();
            var url = node.get_value();
            var iframe = document.getElementById("iframe1");
            if (url) {
                iframe.src = url;
                var prevNode = node.get_nextNode();
                prevNode.get_parent().expand();
                node.select();
            }
        }

Find the full code in the attached .zip file.

Hope this helps.

Regards,
Veronica Milcheva
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.

[Neerav]

Hello Telerik Staff

We have an issue here.
PFA the screen shot of our current scenario.

In "Figure1" we have a tree view "User Hierarchy". This treeview has binded with nodes using serversidecallback load on demand.
 
Now in "Figure2" there is a "search" option on top of the page. On clicking the magnifying icon the "Search Results" grid gets opened up. Now in the grid you can see there is a "<-" arrow sign which on click will search the corresponding node in "User Hierarchy" and display the node by highlighting it in "User Hierarchy" as displayed in "Figure3" and "Figure4".
 
"Figure4" is the actual image("Figure3" is for unserstanding purpose about the hierarchy), as it highlights the node to top of the tree("User Hierarchy").
 
We are trying to implement the same in our demo application.
Can you suggest us as to how to search such node in "User Hierarchy" and highlighting it in the same at the node to top of the tree("User Hierarchy").
 
Since our tree is binded by serversidecallback load on demand, using RadTreeView.GetAllNodes() will not work if I search any child node.
Kindly provide us proper solution to this and let us know if we are not going correct.
 
Awaiting your reply.
 
Thanks and Regards

[Yana]

Hello Neerav,

We've already answered to the other forum thread with the same question here.

All the best,
Yana
the Telerik team