This is a migrated thread and some comments may be shown as answers.

Keyboard navigation - Treeview

7 Answers 187 Views

TreeView

This is a migrated thread and some comments may be shown as answers.

7 Answers, 1 is accepted

answered on 11 Dec 2008, 07:45 PM

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

answered on 12 Dec 2008, 10:14 PM

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)
}

answered on 15 Dec 2008, 05:42 PM

AJAXEnabledWebSite1.zip

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.