RadAjax for ASP.NET
Contents
Keep Focus After AJAX Update Send comments on this topic.
How-to > Keep Focus After AJAX Update

Glossary Item Box

If one needs to set the focus after AJAX update, generally manager's FocusControl(ControlID) method should be used as demonstrated in the following demo:

http://www.telerik.com/demos/aspnet/Ajax/Examples/Common/SettingFocus/DefaultCS.aspx

However, say there are two text boxes making AJAX requests (their AutoPostBack is enabled and they are linked by RadAjaxManager) so their TextChanged is fired. To keep clicked control focused (it becomes focused if there is no AJAX update), one needs to pass the focused element to the server in order to call FocusControl for that control.

Getting the focused element via JavaScript is easy with the help of document.activeElement on IE. We provide a cross-browser solution here though.

ASPX Copy Code
 <input type="hidden" id="ToFocusID" runat="server" />
           <rad:RadAjaxManager ID="RadAjaxManager1" runat="server">
               <AjaxSettings>
                   <rad:AjaxSetting AjaxControlID="TextBox1">
                       <UpdatedControls>
                           <rad:AjaxUpdatedControl ControlID="TextBox1" />
                           <rad:AjaxUpdatedControl ControlID="TextBox2" />
                       </UpdatedControls>
                   </rad:AjaxSetting>
                   <rad:AjaxSetting AjaxControlID="TextBox2">
                       <UpdatedControls>
                           <rad:AjaxUpdatedControl ControlID="TextBox1" />
                           <rad:AjaxUpdatedControl ControlID="TextBox2" />
                       </UpdatedControls>
                   </rad:AjaxSetting>
               </AjaxSettings>
               <ClientEvents OnRequestStart="RequestStart" />
           </rad:RadAjaxManager>
           <asp:TextBox ID="TextBox1" AutoPostBack="true" runat="server" OnTextChanged="TextBox1_TextChanged"></asp:TextBox>
           <asp:TextBox ID="TextBox2" AutoPostBack="true" runat="server" OnTextChanged="TextBox2_TextChanged"></asp:TextBox>

 

JavaScript Copy Code
 <script type="text/javascript">
        var activeElement;
        window.onload = function()
        {
            if(!document.activeElement)
            {
                var elements = document.getElementsByTagName("*");
                for(var i = 0, length = elements.length; i < length; i++)
                {
                    var element = elements[i];
                    element.onfocus = function()
                    {
                        activeElement = this;
                    }
                }
            }
        }
        function RequestStart(sender, e)
        {
           document.getElementById("ToFocusID").value = (activeElement)? activeElement.id : document.activeElement.id;
        }
    </script>

 

C# Copy Code
   protected void TextBox1_TextChanged(object sender, EventArgs e)
   {
       RadAjaxManager1.FocusControl(ToFocusID.Value);
   }

   protected void TextBox2_TextChanged(object sender, EventArgs e)
   {
       RadAjaxManager1.FocusControl(ToFocusID.Value);
   }