Selected and focus nodes not the same

6 posts, 0 answers
  1. Mick
    Mick avatar
    16 posts
    Member since:
    May 2012

    Posted 12 Jun 2012 Link to this post

    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.

    IE

    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">
    <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);
            }
        }
    }
  2. Bozhidar
    Admin
    Bozhidar avatar
    1103 posts

    Posted 15 Jun 2012 Link to this post

    Hi Mick,

    Do you experience the same issue in the following demo:
    http://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/keyboard/defaultcs.aspx 

     
    Greetings,
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mick
    Mick avatar
    16 posts
    Member since:
    May 2012

    Posted 15 Jun 2012 Link to this post

    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
  5. Bozhidar
    Admin
    Bozhidar avatar
    1103 posts

    Posted 18 Jun 2012 Link to this post

    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.
  6. Mick
    Mick avatar
    16 posts
    Member since:
    May 2012

    Posted 18 Jun 2012 Link to this post

    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">
    <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);
            }
        }
    }
  7. Bozhidar
    Admin
    Bozhidar avatar
    1103 posts

    Posted 21 Jun 2012 Link to this post

    Hi Mick,

    Could you specify the version of the controls you are using, as well as the browser you are testing with. Could you also verify if the odd behavior is reproduced in other browsers.
     
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017