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

Selected and focus nodes not the same

5 Answers 227 Views

TreeView

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

Mick asked on 13 Jun 2012, 01:30 AM

Hi I've got a problem with the ASP.NET Rad Treeview, with checkboxes. The user is able to navigate about the treeview using the cursor keys. However it seems the actual focus is not changing, it appears the focus is changing as the class of rtSelected class is being applied corresponding to the user's navigation using the cursor keys. The actual focus can be changed using the tab key. I've got screen shots which clearly show the focus and the highlighted (selected) nodes being different in IE and Chrome

Chrome...

http://i49.tinypic.com/sf9og0.png

The selected field text is highlighted in grey. The input with focus is highlighted with a yellow box.

http://i49.tinypic.com/adhhls.png

The selected field text is highlighted in grey. The input with focus is highlighted with a dashed outline.

This is not just a cosmetic issue I'm finding when the user selects a node using the space bar, OnNodeCheck is fired twice, once for the selected node and another time for the node with focus.

The focus and the selected node should be the same regardless of what input method is used.

ASPX:-

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2.Default" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<script type="text/javascript">

function AfterUserLocationCheck(node) {

var i;

var nodes = node.TreeView.AllNodes;

for (i = 0; i < nodes.length; i++) {

if (nodes[i] != node)

nodes[i].UnCheck();

}

</script>

</head>

<body>

<form id="form1" runat="server">

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" EnablePageMethods="true" runat="server">

</asp:ToolkitScriptManager>

<div>

<telerik:RadTreeView ID="tvUserLocation" runat="server" AllowNodeEditing="False"

DataFieldID="Id" DataFieldParentID="Parent" DataTextField="Name" DataValueField="ID"

MultipleSelect="false" AfterClientCheck="AfterUserLocationCheck" Skin="Default"

OnNodeCheck="tvUserLocation_OnNodeClick" TabIndex="1" CheckBoxes="True">

<Nodes>

<telerik:RadTreeNode Text="World">

<Nodes>

<telerik:RadTreeNode Text="Australia" />

<telerik:RadTreeNode Text="Germany" />

<telerik:RadTreeNode Text="United States" />

</Nodes>

</telerik:RadTreeNode>

</Nodes>

</telerik:RadTreeView>

</div>

</form>

</body>

</html>

Code Behind:-

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Diagnostics;

namespace WebApplication2

{

public partial class Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void tvUserLocation_OnNodeClick(object sender, Telerik.Web.UI.RadTreeNodeEventArgs e)

{

Debug.WriteLine(e.Node.Text);

}

5 Answers, 1 is accepted

answered on 15 Jun 2012, 08:23 AM

Yes and no.

Yes its still possible to select a different node from the node with the focus. Screenshot -

http://screencast.com/t/SdSPrhqoNao

No, as in it's not demonstrated as you cant seem to select nodes using the keyboard, using the spacebar or enter.

I should have given instructions on how to repeat the problem with the source code I supplied...

1. Press Tab 7 times to put the focus on a tree node... till the focus appears on the check box.
2. Use the cursor keys to change the selected node.
3. Once you have the selected and focused nodes different press the space bar and view the output window... you will see two nodes output when only one should have been selected.

Thanks

M

answered on 18 Jun 2012, 08:20 AM

Hello Mick,

This issue is caused by the default behaviour of the checkboxes, which can obtain focus without alerting the TreeView. To workaround this, you can attach the following function to the OnClientLoad event of the treeview, which selects a node whenever it's checkbox receives focus:

function onClientLoad(sender) {

$telerik.$(sender.get_element()).find(".rtChk").bind("focus", function(e) {

var node = sender._extractNodeFromDomElement(this);

node.select();

});

}

Kind regards,
Bozhidar
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.

answered on 19 Jun 2012, 12:21 AM

Thanks Bozhidar,

This code half solves the problem. With the code you've posted, the selected node does follow the focus as the user tabs through the tree. However the user can still use the cursor keys to change the selected node independently of the node whose checkbox has focus. Again when the selected and focus nodes differ, selecting using the space bar causes two nodes to be checked.

Code is as follows...

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2.Default" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<script type="text/javascript">

function onClientLoad(sender) {

$telerik.$(sender.get_element()).find(".rtChk").bind("focus", function (e) {

var node = sender._extractNodeFromDomElement(this);

node.select();

});

}

function AfterUserLocationCheck(node) {

var i;

var nodes = node.TreeView.AllNodes;

for (i = 0; i < nodes.length; i++) {

if (nodes[i] != node)

nodes[i].UnCheck();

}

</script>

</head>

<body>

<form id="form1" runat="server">

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" EnablePageMethods="true" runat="server">

</asp:ToolkitScriptManager>

<div>

<telerik:RadTreeView ID="tvUserLocation" runat="server" AllowNodeEditing="False"

DataFieldID="Id" DataFieldParentID="Parent" DataTextField="Name" DataValueField="ID"

MultipleSelect="false" AfterClientCheck="AfterUserLocationCheck" Skin="Default"

OnNodeCheck="tvUserLocation_OnNodeClick" TabIndex="1" CheckBoxes="True" OnClientLoad="onClientLoad">

<Nodes>

<telerik:RadTreeNode Text="World">

<Nodes>

<telerik:RadTreeNode Text="Australia" />

<telerik:RadTreeNode Text="Germany" />

<telerik:RadTreeNode Text="United States" />

</Nodes>

</telerik:RadTreeNode>

</Nodes>

</telerik:RadTreeView>

</div>

</form>

</body>

</html>

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Diagnostics;

namespace WebApplication2

{

public partial class Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void tvUserLocation_OnNodeClick(object sender, Telerik.Web.UI.RadTreeNodeEventArgs e)

{

Debug.WriteLine(e.Node.Text);

}