Developer
Developer

Reputation: 8656

How can i make an Image button get selected by default

I have done a program for a pop-up using Ajax ModalPopupExtender where I will show a pop-up with two image buttons namely YES and NO. Now what I would like to have is when the pop-up was opened I would like to make YES Image button get selected and when ever user press Enter on YES it should take corresponding action. If the user press NO I would like to cancel and close the pop-up..

This is my design

<asp:UpdatePanel ID="updatepnl1" runat="server">
<ContentTemplate>
<asp:GridView runat="server" ID="gvDetails" CssClass="Gridview" DataKeyNames="UserId"
 AutoGenerateColumns="false">
 <HeaderStyle BackColor="#df5015" />
 <Columns>
 <asp:TemplateField HeaderStyle-BackColor="#EFF1F1" ItemStyle-HorizontalAlign="Center"
 ItemStyle-Height="25" HeaderStyle-Width="50" ItemStyle-Width="50" HeaderStyle-Font-Bold="true">
 <ItemTemplate>
   <asp:CheckBox ID="chkBoxChild" runat="server" />
 </ItemTemplate>
 </asp:TemplateField>
          <asp:BoundField DataField="UserName" HeaderText="UserName" />
          <asp:BoundField DataField="FirstName" HeaderText="FirstName" />
         <asp:BoundField DataField="LastName" HeaderText="LastName" />
    <asp:TemplateField>
      <ItemTemplate>
       <asp:ImageButton ID="btnDelete" ImageUrl="~/Images/Delete.png" runat="server" OnClick="btnDelete_Click" />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
            <asp:Label ID="lblresult" runat="server" />
            <asp:Button ID="btnShowPopup" runat="server" Style="display: none" />
            <ajax:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnShowPopup"
                PopupControlID="pnlpopup" CancelControlID="btnNo" BackgroundCssClass="modalBackground">
            </ajax:ModalPopupExtender>
            <asp:Panel ID="pnlpopup" runat="server" BackColor="White" Height="100px" Width="400px"
                Style="display: none">
                <table width="100%" style="border: Solid 2px #999; width: 100%; height: 100%" cellpadding="0"
                    cellspacing="0">
                    <tr style="background-image: url(Images/title.gif)">
                        <td style="height: 10%; color: Black; padding: 2px; font-size: larger; font-family: Arial"
                            align="center">
                            Confirm Box
                        </td>
                        <td style="color: White; font-weight: bold; padding: 3px; font-size: larger" align="Right">
                            <a href="javascript:void(0)" onclick="closepopup()">
                                <img src="Images/x.png" style="border: 0px" align="right" /></a>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" align="left" style="padding: 5px; font-family: Calibri">
                            <asp:Label ID="lblUser" runat="server" />
                        </td>
                    </tr>
                    <tr>
                        <td align="right" style="padding-right: 15px">
                            <asp:ImageButton ID="btnYes" OnClick="btnYes_Click" runat="server" ImageUrl="~/Images/btnyes.jpg" />
                            <asp:ImageButton ID="btnNo" runat="server" ImageUrl="~/Images/btnNo.jpg" />
                        </td>
                    </tr>
                </table>
            </asp:Panel>
        </ContentTemplate>
    </asp:UpdatePanel>

enter image description here

For the second i get this and working perfectly can any one give me solution for that Enter

function pageLoad(sender, args) {
            if (!args.get_isPartialLoad()) {
                //  add our handler to the document's
                //  keydown event
                $addHandler(document, "keydown", onKeyDown);
            }
        }

        function onKeyDown(e) {
            if (e && e.keyCode == Sys.UI.Key.esc) {
                // if the key pressed is the escape key, dismiss the dialog
                $find('ModalPopupExtender1').hide();
            }
        } 

Upvotes: 0

Views: 531

Answers (2)

Developer
Developer

Reputation: 8656

After all i got the solution with the following script

<script type="text/javascript">

    function pageLoad(sender, args) {
        $find('ModalPopupExtender1').add_shown(OnModalPopup);
        if (!args.get_isPartialLoad()) {
            //  add our handler to the document's
            //  keydown event
            $addHandler(document, "keydown", onKeyDown);

        }
    }

    function onKeyDown(e) {
        if (e && e.keyCode == Sys.UI.Key.esc) {
            // if the key pressed is the escape key, dismiss the dialog
            $find('ModalPopupExtender1').hide();
        }
    }
    function OnModalPopup(e) {
        $get('<%= btnYes.ClientID %>').focus();
    }

</script>

Upvotes: 1

digitalmarks
digitalmarks

Reputation: 429

The panel control allows you to define a default button within the scope of it's contents:

<asp:Panel ID="pnlpopup" runat="server" DefaultButton="btnYes">

Upvotes: 0

Related Questions