CODEWITHSUNDEEP
asp.netfocusmodalpopupextender
Chad
Chad

Reputation: 24699

AjaxToolkit ModalPopupExtender: How do I set focus to a control in the popup Panel?

When the user pushes the Button, I'd like to display a modal dialog box to capture a couple of values from text boxes and submit these values to the server.

When the modal box is shown, I'd like the cursor to be placed in the txtFirst textbox.

How do I do this? I've had trouble with registerscript commands before, so if one is needed, I hope the syntax, if you provide it, is correct.

Thanks

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="MyModalSimple.aspx.vb" Inherits="MyModalSimple" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script type="text/javascript">

        function onOk() {            
            form1.submit();
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:Button ID="Button1" runat="server" Text="Button" />
        <cc1:modalpopupextender id="Button1_ModalPopupExtender" runat="server" targetcontrolid="Button1"
            popupcontrolid="pnlModal" okcontrolid="btnOK" cancelcontrolid="btnCancel"   DropShadow="true"  OnOkScript="onOk();">

        </cc1:modalpopupextender>

        <asp:Panel ID="pnlModal" runat="server" Style="display: None1" 
            BackColor="#CCCCCC">
            <br />
            <table>
                <tr>
                    <td>
                        <asp:Label ID="lblFirst" runat="server" Text="First"></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="txtFirst" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="lblLast" runat="server" Text="Last"></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="txtLast" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        &nbsp;
                    </td>
                    <td align="right">
                        <asp:Button ID="btnOK" runat="server" Text="OK" />
                        <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
                    </td>
                </tr>
            </table>
            <br />
            <br />
        </asp:Panel>

    </div>
    </form>
</body>
</html>

Also, how could I change the above code so that the modal dialog was displayed as a result of a selection of a dropdownlist item? If I set the targetcontrolid="DropDownList1", the dialog box is display when it drops rather than when a selection is made

Upvotes: 4

Views: 11123

Answers (3)

Gabriele Cozzolino
Gabriele Cozzolino

Reputation: 194

I know this was already answered, but here's an easier code:

C#:

ScriptManager.RegisterStartupScript(this, this.GetType(), "FocusScript", "setTimeout(function(){$get('" + btnOk.ClientID + "').focus();}, 100);", true);

VB:

ScriptManager.RegisterStartupScript(Me, Me.[GetType](), "FocusScript", "setTimeout(function(){$get('" + btnOk.ClientID + "').focus();}, 100);", True)

Upvotes: 1

user4514937
user4514937

Reputation: 1

Remove Style="display: None1" from control panel

Upvotes: 0

AboutDev
AboutDev

Reputation: 1923

An example can be found here. In essence you are using javascript.

Upvotes: 2

Related Questions