Only allow one checkbox to be selected in gridview within modalpopup

user1801525 picture user1801525 · May 7, 2014 · Viewed 12.7k times · Source

I have a modal popup that has a gridview, this gridview has a number of rows, I only want the user to be able to select one row. So if they select another it will deselect the previous one.

I have tried a number of methods but can't get the oncheckedchanged event to fire. Please can someone assist Cheers

<asp:button id="btnShowPopupOW" style="display: none" runat="server" />
<asp:modalpopupextender id="mpeOW" behaviorid="mpeOW" runat="server" targetcontrolid="btnShowPopupOW"
    popupcontrolid="pnlpopupOW" cancelcontrolid="imgOWCancel" backgroundcssclass="modalBackground" />
<asp:panel id="pnlpopupOW" runat="server" width="600px" style="display: none;" class="ModalPanel">

            <div style="position: relative; min-height: 490px;">
                <asp:UpdatePanel ID="upExisting" runat="server" ChildrenAsTriggers="true">
                    <ContentTemplate>
                        <table style="width: 600px;">
                            <tr height="25px">
                                <td>
                                    <asp:Panel ID="pnlPrev" runat="server" Height="200px" ScrollBars="Auto" HorizontalAlign="Center">
                                        <asp:GridView ID="grdPrevious" runat="server" ClientIDMode="Static" AutoGenerateColumns="false" Width="100%"
                                            ShowFooter="false" ShowHeaderWhenEmpty="false" DataKeyNames="ID"  >
                                            <Columns>
                                                <asp:BoundField DataField="dates" HeaderText="Dates" />
                                                <asp:BoundField DataField="Prev" HeaderText="Previous" />
                                                <asp:TemplateField>
                                                    <ItemTemplate>
                                                        <asp:CheckBox ID="ChkSelect" runat="server"  OnCheckedChanged="ChkSelect_OnCheckedChanged" />
                                                    </ItemTemplate>
                                                </asp:TemplateField>
                                            </Columns>
                                        </asp:GridView>
                                    </asp:Panel>
                                </td>
                            </tr>
                        </table>
                    </ContentTemplate>
                    <Triggers>

                    </Triggers>
                </asp:UpdatePanel>
                </div>
                </asp:panel>

with the following in the codebehind

protected void ChkSelect_OnCheckedChanged(object sender, EventArgs e)
        {
            CheckBox activeCheckBox = sender as CheckBox;

            foreach (GridViewRow rw in grdPrevious.Rows)
            {
                CheckBox chkBx = (CheckBox)rw.FindControl("ChkSelect");
                if (chkBx != activeCheckBox)
                {
                    chkBx.Checked = false;
                }
                else
                {
                    chkBx.Checked = true;
                }
            }
        }

Answer

Anil Kumar picture Anil Kumar · Apr 25, 2015

You can do it like this. With single check box selection using jquery....

<ItemTemplate>
  <asp:CheckBox ID="ChkSelect" runat="server"  onclick="CheckOne(this)" />
</ItemTemplate>
function CheckOne(obj) {
    var grid = obj.parentNode.parentNode.parentNode;
    var inputs = grid.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type == "checkbox") {
            if (obj.checked && inputs[i] != obj && inputs[i].checked) {
                inputs[i].checked = false;
            }
        }
    }
}