locked
Modal Popup With CheckBoxList Control RRS feed

  • Question

  • User1769015664 posted

    I have a modal popup containing a CheckBoxList (AutoPostBack=true) and a label control in it. When I click on one of the checkbox to check or uncheck; the popup close automatcally since autopostback is set to true.  How do I keep the popup up while clicking on checkboxes?

    Basically, I want to be able to execute the code in CheckBoxList _SelectedIndexChanged every time a checkbox is clicked; setting autopostback to false won't execute this code.

    Tuesday, May 16, 2017 3:24 PM

All replies

  • User1769015664 posted

    Move controls inside an UpdatePanel didn't help!

    Tuesday, May 16, 2017 3:33 PM
  • User-271186128 posted

    Hi NJ2,

    I have a modal popup containing a CheckBoxList (AutoPostBack=true) and a label control in it. When I click on one of the checkbox to check or uncheck; the popup close automatcally since autopostback is set to true.  How do I keep the popup up while clicking on checkboxes?

    Please refer to the following code:

    I move the checkboxlist into a update panel, it seems that everything works well on my side.

            <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
    
            <asp:Button ID="Button1" runat="server" Text="Button" />
    
            <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
                OnOkScript="onModalOk();"
                CancelControlID="btnCancel" OkControlID="btnOkay"
                TargetControlID="Button1" PopupControlID="Panel1"
                PopupDragHandleControlID="PopupHeader" Drag="true"
                BackgroundCssClass="ModalPopupBG">
            </asp:ModalPopupExtender>
    
            <asp:Panel ID="Panel1" Style="display: none" runat="server">
                <div class="HellowWorldPopup">
                    <div class="PopupHeader" id="PopupHeader">People Search</div>
                    <div class="popup_Body">
                        <p>
                            Enter you name:
                        <asp:TextBox ID="TextBox1" runat="server" AutoCompleteType="Disabled"></asp:TextBox>
    
                        </p>
                        <p>
                            <asp:Label ID="lblCompany" runat="server" Text="Company:"></asp:Label>
                            <asp:DropDownList ID="ddlEmp" runat="server">
                                <asp:ListItem Text="Company1" Value="1"></asp:ListItem>
                                <asp:ListItem Text="Company2" Value="2"></asp:ListItem>
                            </asp:DropDownList>
                        </p>
                        <p>
                            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                                <ContentTemplate>
    
                                    <asp:CheckBoxList ID="CheckBoxList1" OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged" AutoPostBack="true" runat="server">
                                        <asp:ListItem Text="Company1" Value="1"></asp:ListItem>
                                        <asp:ListItem Text="Company2" Value="2"></asp:ListItem>
                                        <asp:ListItem Text="Company3" Value="3"></asp:ListItem>
                                        <asp:ListItem Text="Company4" Value="4"></asp:ListItem>
                                    </asp:CheckBoxList>
                                    checked value:<br />
                                    <asp:Label ID="lbloutput" runat="server" Text=""></asp:Label>
                                </ContentTemplate>
                            </asp:UpdatePanel>
                        </p>
                    </div>
                    <div class="Controls">
                        <input id="btnOkay" type="button" value="Done" />
                        <input id="btnCancel" type="button" value="Cancel" />
                    </div>
                </div>
    
            </asp:Panel>

    Code behind:

            protected void CheckBoxList1_SelectedIndexChanged(object sender, EventArgs e)
            {
                List<string> itemlist = new List<string>();
                foreach(ListItem item in CheckBoxList1.Items)
                {
                    if (item.Selected)
                    {
                        itemlist.Add(item.Text);
                    }
                }
                lbloutput.Text = string.Join(",", itemlist);
            }

    The screenshot as below:

    Best regards,
    Dillion

    Wednesday, May 17, 2017 2:28 AM