Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Dock > IE9 Issue : Textbox in dock maintains focus after collapsing dock

Not answered IE9 Issue : Textbox in dock maintains focus after collapsing dock

Feed from this thread
  • Abdul Razak avatar

    Posted on Jan 24, 2012 (permalink)

    Hello,

    I have a textbox control in raddock content and click on it to give it the focus. When I click the collapse command button, the content area is hidden (including the textbox) but the blinking caret still visible. Even typing will go into the textbox even though the caret does not move at all.

    This is observed only under IE9. In other browsers, the textbox will lose the focus when clicking the collapse button so the above behaviour does not occur.

    Reply

  • Slav Slav admin's avatar

    Posted on Jan 27, 2012 (permalink)

    Hello Abdul,

    Indeed, the caret of the TextBox control is visible when the RadDock is collapsed under IE9. This behavior will be brought to the attention of our developers, although I cannot provide a firm estimate when a fix will be available.

    For the time being you can use the OnClientCommand client-side event of the RadDock in order to remove the focus of the inner textbox when the dock control is collapsed. Below you can check the suggested solution:
    <!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>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="Scriptmanager1" runat="server" />
        <script type="text/javascript">
            function OnClientCommand(sender, args) {
                if (args.Command.get_name() == "ExpandCollapse" && $telerik.isIE9) {
                    var textbox = $get("<%=Textbox1.ClientID %>");
                    textbox.blur();
                }
            }
        </script>
        <div>
            <telerik:RadDock runat="server" ID="RadDock" OnClientCommand="OnClientCommand">
                <ContentTemplate>
                    <asp:TextBox ID="Textbox1" runat="server" />
                </ContentTemplate>
            </telerik:RadDock>
        </div>
        </form>
    </body>
    </html>

    I have also used the telerik Telerik static client library method isIE9 in order to isolate this workaround only for the Internet Explorer 9 browser.

    Kind regards,
    Slav
    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

    Reply

  • Abdul Razak avatar

    Posted on Jan 27, 2012 (permalink)

    Thank you for your reply.

    However I have modified the script so that it will only remove focus from any input element inside the dock content which currently has the focus:
    function OnClientCommand(sender, args) {
        if (args.Command.get_name() == "ExpandCollapse" && $telerik.isIE9) {
            if (args.Command.get_state() == '2') {
                var dock = $get(sender.get_id());
                var input = $(dock).find(".rdContent input:focus");
                if (input.length > 0) input[0].blur();
            }
        }
    }


    The only thing that I'm not sure of is how to get the triggering dock client id without having to hard-code using the inline script-block (E.g <%=RadDock1.ClientID%>)? The intention is so that the above script can be used on any RadDock controls on the page.



    Reply

  • Slav Slav admin's avatar

    Posted on Jan 31, 2012 (permalink)

    Hi Abdul,

    Indeed, my example only demonstrated the base approach and it needs to be modified in order to remove the focus from all contained input elements.

    Note that the parameter sender of the event-handler OnClientCommand references the client-object of the RadDock that has triggered the event. This means that you can set this handler to all RadDocks on your page and then you can use the sender parameter to manage the dock control on the client via the methods in this help article.
    <telerik:RadDock runat="server" ID="RadDock" OnClientCommand="OnClientCommand">
        <ContentTemplate>
            <asp:TextBox ID="Textbox1" runat="server" />
        </ContentTemplate>
    </telerik:RadDock>

    Also, the Client API of RadDock includes a method get_contentContainer that can be used in your implementation for getting the content of the control.

    I hope the provided information helps. Feel free to contact us again if you need further assistance.

    Regards,
    Slav
    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

    Reply

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Dock > IE9 Issue : Textbox in dock maintains focus after collapsing dock
Related resources for "IE9 Issue : Textbox in dock maintains focus after collapsing dock"

[  ASP.NET Dock Features  |  Documentation  |  Demos  |  Telerik TV  |  Self-Paced Trainer  |  Step-by-step Tutorial  ]