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

IE9 Issue : Textbox in dock maintains focus after collapsing dock

3 Answers 28 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Razak
Top achievements
Rank 2
Razak asked on 25 Jan 2012, 05:40 AM
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.

3 Answers, 1 is accepted

Sort by
0
Slav
Telerik team
answered on 27 Jan 2012, 11:57 AM
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
0
Razak
Top achievements
Rank 2
answered on 27 Jan 2012, 03:55 PM
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.



0
Slav
Telerik team
answered on 31 Jan 2012, 05:42 PM
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
Tags
Dock
Asked by
Razak
Top achievements
Rank 2
Answers by
Slav
Telerik team
Razak
Top achievements
Rank 2
Share this question
or