Keyboard navigation - Treeview

[Elango]

Hello,
        We have a treeview control which has childnodes to certain depth. These values are binded on server side. On Expansion of a node it binds the child values. The issue is i am not able to navigate up and down using keyboard. I tried using tabindex but still not working. In my scenario the user will use the mouse to point the top level node where it could around more than 10 items as top level node. Then the user will move up and down the over the tree. Currently when the user presses the navigation button its not working it just expands and stays there. Please let me know how to handle the navigation in this scenario. I can't use access keys here.

Regards,
Elango

[Atanas Korchev]

Hello Elango,

I am not sure I understand your scenario. Are you using server-side load on demand? If yes the treeview is losing focus after postback hence you cannot use the keyboard instantly - you need to focus it again. A possible workaround is to use client-side load on demand using the ServerSideCallback expand mode.

Regards,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Elango]

Hi Albert, 
      Yes i am using the server side load on demand. You are right. Keyboard expansion works fine when OnNodeExpand happens. But the same action is not happening when OnNodeClick event happens. I have both the events in my code where node expand will expand the tree in UI and Nodeclick will do the same with added few more actions. I have the code something like shown below which works fine for onNodeExpand but not working for OnNodeClick.

foreach

(xxx y in xxxs)

 

{

 

RadTreeNode newNode = new RadTreeNode(y.Name, y.Id.ToString());

 

newNode.ExpandMode =

TreeNodeExpandMode.ServerSideCallBack;

 

node.Nodes.Add(newNode);

}

node.ExpandMode =

TreeNodeExpandMode.ClientSide;

 

node.Expanded =

true;

 

Please let me know what i am missing for OnNodeClick.

Regards,
Elango

[Atanas Korchev]

Hello Elango,

Unfortunately I cannot understand what the problem is. Could you please open a support ticket and send us some sample web page? I will inspect it thoroughly and provide feedback. Thanks.

Regards,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Elango]

Here is the code sample shown below. I have provided the aspx level declaration and code that binds the tree. When i click to expand the node ( clicking the + sign) it binds the subnodes and i was able to do my key board navigation but when i use the Nodeclick by clicking the node it loads the subnodes but i was not able to use keyboard navigation. Both NodeExpand and Nodeclick calls the same method for binding the treeview. Hope this should help to find the issue.


.aspx
 
<telerik:RadTreeView runat="server" ID="AppTreeView" OnNodeExpand="AppTreeView_NodeExpand" 
          OnNodeClick="AppTreeView_NodeClick" Skin="Vista">
</telerik:RadTreeView>



.aspx.cs

protected override void OnInit(EventArgs e)
{
 this.PopulateTree();

 base.OnInit(e);
}

private void PopulateTree()
{
 AppTreeView.LoadingStatusPosition = TreeViewLoadingStatusPosition.BelowNodeText;

        if (AppTreeView.Nodes.Count > 0)
        {
         AppTreeView.Nodes.Clear();
        }
        foreach (Channel currentChannel in Channels)
        {
         RadTreeNode node = new RadTreeNode(currentChannel.DisplayName, currentChannel.Id.ToString());
                node.ExpandMode = TreeNodeExpandMode.ServerSideCallBack;
                node.ImageUrl = "../images/image1.jpg";
                AppTreeView.Nodes.Add(node);
        }
}

protected void AppTreeView_NodeExpand(object sender, RadTreeNodeEventArgs e)
{
 this.ExpandNode(e.Node);
}

private void ExpandNode(RadTreeNode node)
{
 node.Nodes.Clear();

        foreach (Channel currentChannel in Channels)
        {
        RadTreeNode newNode = new RadTreeNode(currentChannel.DisplayName, currentChannel.Id.ToString());
               newNode.ExpandMode = TreeNodeExpandMode.ServerSideCallBack;
               node.Nodes.Add(newNode);
        }

        node.ExpandMode = TreeNodeExpandMode.ClientSide;
        node.Expanded = true;
}

 

protected void AppTreeViewTreeView_NodeClick(object sender, RadTreeNodeEventArgs e)
{
 // Populating a grid
 ....

 // Binding the tree node with subnodes.
 this.ExpandNode(e.Node)
}

[Atanas Korchev]

Hello Elango,

When you click the node a full page postback is performed (unless your treeview is ajaxified). In that case the control is losing focus and the keyboard navigation does not work. To resolve this issue add this code in your click event handler:

    protected void AppTreeView_NodeClick(object sender, RadTreeNodeEventArgs e)
    {
        // Binding the tree node with subnodes.
        this.ExpandNode(e.Node);

        ScriptManager.RegisterStartupScript(this,
            GetType(), ClientID,
            string.Format("Sys.Application.add_load(function(){{$find('{0}').get_element().focus();}}, 0);", AppTreeView.ClientID),
            true);

    }

I have attached a sample web page.

Regards,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Elango]

Albert,

       Thanks for your solution. But i forgot to tell you that my treeview control is ajaxified which is inside RadAjaxPanel. So i guess this solution won't work for me.

 

Regards,

Elango

[Atanas Korchev]

Hello Elango,

Did you try my solution? It works ok on my end.

Regards,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.