RadTextBox es in RadPanelBar - Tabbing out of text boxes - loss of keyboard focus

1 posts, 0 answers
  1. Athadu
    Athadu avatar
    1 posts
    Member since:
    May 2008

    Posted 31 Oct 2010 Link to this post


    Hi

    In IE with Telerik 2010.1.415.35

    I have three RadTextBox es lined up in a RadPanelBar1 with TabIndexes set properly. Tabbing out of each text boxes, the TextChanged handlers attempt to update items in another RadPanelBar2.

    Issue 1: Tabbing out of text box1, it updates the RadPanelBar2 fine.  But the focus is not placed in text box 2.  Have to manually click in text box 2.

    Issue 2: Tabbing out of text box 2, it updates the RadPanelBar2 fine.  Shows the focus to be in text box 3.  But, keying in doesn't show the keyed in character in text box3. Have to manually click in text box 3.

    Issue 3: Tabbing out of text box 3, the TextChanged event is not getting fired.

    Here is a sample code...

    Would appreciate any pointer regarding anything I am doing wrong or any workarounds.

    Thank you
    Athadu
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
     
    <!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>
        <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <%--Needed for JavaScript IntelliSense in VS2010--%>
                <%--For VS2008 replace RadScriptManager with ScriptManager--%>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </asp:ScriptManager>
        <script type="text/javascript">
            //Put your JavaScript code here.
        </script>
         
        <telerik:RadSkinManager ID="RadSkinManager1" Runat="server" Skin="Sunset">
        </telerik:RadSkinManager>
     
     
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
     
        <telerik:RadAjaxManager ID="RadAjaxManager2" runat="server">
         
        </telerik:RadAjaxManager>
        <div>
            <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Width="100%">
                <CollapseAnimation Type="InCubic" Duration="500" />
                <ExpandAnimation Type="InCubic" Duration="500" />
                <Items>
                    <telerik:RadPanelItem Text="Search " Expanded="true" runat="server" Selected="true"
                        Font-Size="Medium" Font-Bold="true">
                        <Items>
                            <telerik:RadPanelItem Value="SearchCriteriaPanel" runat="server">
                                <ItemTemplate>
                                    <table style="width: 98%; margin: auto;">
                                        <tr>
                                            <td>
                                                <telerik:RadTextBox ID="RadTextBox1" runat="server" OnTextChanged="RadTextBox1_TextChanged"
                                                    AutoPostBack="true" Label="Text Box 1:" Columns="30" TabIndex="1" />
                                            </td>
                                            <td>
                                                 
                                                <telerik:RadTextBox ID="RadTextBox2" runat="server" OnTextChanged="RadTextBox2_TextChanged"
                                                    AutoPostBack="true" Label="Text Box 2:" Columns="30" TabIndex="2" />
                                            </td>
                                            <td>
                                                 
                                                <telerik:RadTextBox ID="RadTextBox3" runat="server"  OnTextChanged="RadTextBox3_TextChanged"
                                                    AutoPostBack="true" Label="Text Box 3:" Columns="30" TabIndex="3" />
                                            </td>
                                        </tr>
                                    </table>
                                </ItemTemplate>
                            </telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelBar>
            <br />
            <asp:BulletedList ID="ErrorMessageBulletedList" runat="server" ForeColor="Red">
            </asp:BulletedList>
            <telerik:RadPanelBar ID="RadPanelBar2" runat="server" Width="100%">
                <CollapseAnimation Type="InCubic" Duration="500" />
                <ExpandAnimation Type="InCubic" Duration="500" />
                <Items>
                    <telerik:RadPanelItem Text="Referral Information" Expanded="true" runat="server"
                        Selected="true" Font-Size="Medium" Font-Bold="true">
                        <Items>
                            <telerik:RadPanelItem Value="SummaryPanel" runat="server">
                                <ItemTemplate>
                                <asp:Label ID="DummyLabel" runat="server" Text="I am inside Panel 2"/>
                                </ItemTemplate>
                            </telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelBar>
        </div>
     
        </form>
    </body>
    </html>


    using System;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    using System.Data;
    using System.Configuration;
    using System.Web.Security;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using Telerik.Web.UI;
     
    public partial class Default : System.Web.UI.Page
    {
        public RadTextBox Box1
        {
            get
            {
                return (RadTextBox)RadPanelBar1.FindItemByValue("SearchCriteriaPanel").FindControl("RadTextBox1");
            }
        }
        public RadTextBox Box2
        {
            get
            {
                return (RadTextBox)RadPanelBar1.FindItemByValue("SearchCriteriaPanel").FindControl("RadTextBox2");
            }
        }
        public RadTextBox Box3
        {
            get
            {
                return (RadTextBox)RadPanelBar1.FindItemByValue("SearchCriteriaPanel").FindControl("RadTextBox3");
            }
        }
        protected void Page_Load(object sender, EventArgs e)
        {
            RadAjaxManager.GetCurrent(this.Page).AjaxSettings.AddAjaxSetting(Box1, RadPanelBar1);
            RadAjaxManager.GetCurrent(this.Page).AjaxSettings.AddAjaxSetting(Box2, RadPanelBar1);
            RadAjaxManager.GetCurrent(this.Page).AjaxSettings.AddAjaxSetting(Box3, RadPanelBar1);
            RadAjaxManager.GetCurrent(this.Page).AjaxSettings.AddAjaxSetting(Box1, RadPanelBar2, RadAjaxLoadingPanel1);
            RadAjaxManager.GetCurrent(this.Page).AjaxSettings.AddAjaxSetting(Box2, RadPanelBar2, RadAjaxLoadingPanel1);
            RadAjaxManager.GetCurrent(this.Page).AjaxSettings.AddAjaxSetting(Box3, RadPanelBar2, RadAjaxLoadingPanel1);
        }
     
        protected void RadTextBox1_TextChanged(object sender, EventArgs e)
        {
            RadPanelBar1.Items[0].Text = "Text Box 1 changed to " + Box1.Text;
            RadPanelBar2.Items[0].Text = "Text Box 1 changed to " + Box2.Text;
            RadAjaxManager.GetCurrent(this.Page).FocusControl(Box2);
            //UpdatedTextBox.Text = "Text Box 1 changed to " + RadTextBox1.Text;
        }
     
        protected void RadTextBox2_TextChanged(object sender, EventArgs e)
        {
            RadPanelBar1.Items[0].Text = "Text Box 1 changed to " + Box1.Text;
            RadPanelBar2.Items[0].Text = "Text Box 1 changed to " + Box2.Text;
            //UpdatedTextBox.Text = "Text Box 2 changed to " + RadTextBox2.Text;
        }
        protected void RadTextBox3_TextChanged(object sender, EventArgs e)
        {
            RadPanelBar2.Items[0].Text = "Text Box 3 changed to " + Box3.Text;
            RadPanelBar2.CollapseAllItems();
            //UpdatedTextBox.Text = "Text Box 2 changed to " + RadTextBox2.Text;
        }
    }
Back to Top