Checkbox and Modalpopupextender -checkbox not checked

Home ›

ASP.NET Forums » ASP.NET AJAX » ASP.NET AJAX Control Toolkit » Checkbox and Modalpopupextender -checkbox not checked

Shortcuts

Previous Next

Checkbox and Modalpopupextender -checkbox not checked

Rate It (1)

Last post 08-04-2009 3:29 PM by Ardillon. 4 replies.

Sort Posts:

Checkbox and Modalpopupextender -checkbox not checked

07-31-2009, 8:40 PM

Contact

point Member
mickeygreen
Member since 03-11-2009, 12:50 AM
Posts 2

I am trying to use the modalpopup exdender with a checkbox. Actually it iis one of a mutuallyexclusive extender but that does not seem to matter for this example.

When I click the checkpox the panel opens but the check box is not checked. In addition I do not want the panel to open when I uncheck the checkbox. How can I code for this behavior. The code is below. Thanks Mickey

<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
         <div>
             <asp:CheckBox ID="CheckBox1" runat="server" Text="click for panel 1" />
             <asp:Panel ID="Panel1" runat="server" style="display:none">
             panel1
                 <asp:Button ID="butdone" runat="server" Text = "done" />
             </asp:Panel>
             <ajax:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
             OnCancelScript="butdone" PopupControlID="panel1" TargetControlID="checkbox1">
             </ajax:ModalPopupExtender>
     </div>
      </form>
    </body>

Re: Checkbox and Modalpopupextender -checkbox not checked

07-31-2009, 9:38 PM

Contact

744 point Member
pramsperger
Member since 09-21-2006, 2:48 PM
Oklahoma
Posts 104

The ModalPopupExtender intercepts the onclick function of it's target control. Here's what I recommend if you want to stick with a checkbox to control the popup.

    <asp:CheckBox ID="CheckBox1" runat="server" Text="click for panel 1" onclick="popup(this)" />
    <asp:Button ID="buttonOpen" runat="server" style="display:none" />
       <asp:Panel ID="Panel1" runat="server" style="display:none">
       panel1
           <asp:Button ID="butdone" runat="server"  Text = "done" />
       </asp:Panel>
       <ajax:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
       OnCancelScript="butdone" PopupControlID="panel1" TargetControlID="buttonOpen">
       </ajax:ModalPopupExtender>
     <script type="text/javascript" language="javascript">
       function popup(checkbox) {
         if (checkbox.checked)
           $get('<%= buttonOpen.ClientID %>').click();
         return true;
       }
     </script>

Re: Checkbox and Modalpopupextender -checkbox not checked

08-01-2009, 9:26 AM

Contact

Answer

point Member
mickeygreen
Member since 03-11-2009, 12:50 AM
Posts 2

Thanks for your time. This does exactly what I need.

I very new at cliemtside coding so I have a couple of questions about the code.

1) I get an informational message from visual studio , it seems to be ignored but what is it reffering to?

Message 1 Validation (ASP.Net): Attribute 'onclick' is not a valid attribute of element 'CheckBox'.

2) Could you explain the part of javascript funtion a bit. I understand you are executing the click event of the hidden button

but what does the $get('<%= buttonOpen.clientID %>') mean?

3)In general is it better to put simple functions like this inline or in a separate .js file?

Re: Checkbox and Modalpopupextender -checkbox not checked

08-01-2009, 12:26 PM

Contact

744 point Member
pramsperger
Member since 09-21-2006, 2:48 PM
Oklahoma
Posts 104

1. The asp Checkbox control doesn't have the "onclick" attribute, so it doesn't know how to parse it. Instead, it's just applied to the html input element that is output when your page renders the HTML. You can add pretty much any attribute to any asp control and it will just pass through to the HTML element that is rended when your page is output. Handy in cases like this where "onclick" is a DOM event for any HTML input control.

2. $get('elementId') is the same as document.getElementById('elementId'), just shorter. Anytime you want to access a server control (any control that has the ruant="server" attribute) in javascript, you can't just use the Id you give it when you declare it in markup. ASP .NET use naming containers to ensure that every control output to the page has a unique id. Think of adding 2 of the same user control that has a textbox named "Text1" to a page. The client Id when the page is rendered will basically include a path of the name of the containers it is within.

You don't know the client id of a control until the page is rendered. By using the markup tags "<%= controlName.ClientID %>", that tag is replaced with the actual client id of the control.

3. Because is has markup to get the ClientID of a control, it would have to be inline on the page that contains the control. I would be possible to rewrite to put in a separate .js file, but you'll have to pass the ClientID of the buttonOpen to the function:

<asp:CheckBox ID="CheckBox1" runat="server" Text="click for panel 1" onclick="popup(this,'<%= buttonOpen.clientID %>')" />

function popup(checkbox, buttonId) {
if (checkbox.checked)
$get(buttonId).click();
return true;
}

Hope that helps.

Please remember to mark each post that helped you as answered.

Re: Checkbox and Modalpopupextender -checkbox not checked

08-04-2009, 3:29 PM

Contact

Answer

12 point Member
Ardillon
Member since 08-04-2009, 3:07 PM
Posts 1

Thanks guys, you all are life savers...
I thought I'd share some more findings related to this topic.

Scenario: Checkbox and Modalpopupextender within a Gridview
For example, you have a gridview in which you'd like to hadve the Modal Pop up come out while on the onclick event on an item template with a checkbox defined within it.

Same concept, the only things I'd like to add are:

You add an attribute to the checkbox via the gridview1_RowDataBound event... passes "this" and the btn_open.ClientID such as (pay special attention to the single quote and double quotes within the cbx_Checkbox1.Attributes.Add line):

    Protected Sub gv_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gv.RowDataBound
        If e.Row.RowType = DataControlRowType.DataRow Then

            Dim btn_Open As WebControl = e.Row.FindControl("buttonOpen")
            Dim cbx_Checkbox1 As WebControl = e.Row.FindControl("CheckBox1")

            Dim repStr As String = btn_Open.ClientID
            cbx_Checkbox1.Attributes.Add("onclick", "popup(this,'" + repStr + "')")


        End If
    End Sub

The Aspx file has the following under the TemplateField within the gridview "gv":

<ItemTemplate>
                        <asp:Button ID="buttonOpen" runat="server" Style="display: none" />
                        <asp:CheckBox ID="CheckBox1" runat="server" />

                        
                            <asp:Panel ID="Panel11" runat="server" Style="display: none; padding: 10px; border: 1px;
                                border-style: solid;" BackColor="#FFFFFF" Width="400px">
                            <div id="DragPanel1" runat="server" class="PopUpHeader">
                                <table width="100%">
                                    <tr>
                                        <td style="width: 100%">
                                            <asp:Label ID="HeaderLabel1" runat="server" Text="Choose Documents:" />

                                </table>
                            </div>

                                                                                                                  <asp:Button ID="butdone" runat="server" Text="done" />
                        </asp:Panel>
                        
                        <atk:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="buttonOpen"
                            PopupControlID="Panel11" OkControlID="closeBtn" BackgroundCssClass="modalBackground"
                            DropShadow="true" PopupDragHandleControlID="DragPanel1" OnCancelScript="butdone" />
                    </ItemTemplate>

The javascript function didnt change much, if any:

<script type="text/javascript" language="javascript">  
   function popup(checkbox,buttonId) {  
      
     if (checkbox.checked)
       $get(buttonId).click();  
       return true;         
   }

Page 1 of 1 (5 items)

RSS Available