Gridview: Check only one Checkbox at a time – Asp.net

Ok, you have two ways to do this.

You can use server side code – that will cause a post-back. Often not the end of the world, but do keep this in mind.

So, say with this grid view:

<asp:GridView ID="GridView1" runat="server" CssClass="table"
 AutoGenerateColumns="false" width="45%" DataKeyNames="ID"  >
            <Columns>
                <asp:BoundField DataField="FirstName" HeaderText="FirstName"  />
                <asp:BoundField DataField="LastName" HeaderText="LastName"    />
                <asp:BoundField DataField="HotelName" HeaderText="Hotel Name"    />
                <asp:BoundField DataField="Description" HeaderText="Description" ItemStyle-Width="270" />
                <asp:TemplateField HeaderText="Select" ItemStyle-HorizontalAlign="Center">
                    <ItemTemplate>
                      <asp:CheckBox ID="chkSelect" runat="server"  AutoPostBack="true" 
                          OnCheckedChanged="chkSelect_CheckedChanged"
                          />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

Note how we drop in a simple plain jane check box. And note the auto post back, and the event stub.

So, to load the grid, say this:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            LoadGrid();
    }

    void LoadGrid()
    {
        DataTable rstData = MyRst("SELECT * FROM tblHotelsA ORDER BY HotelName");
        GridView1.DataSource = rstData;
        GridView1.DataBind();

    }

    public DataTable MyRst(string strSQL)
    {
        DataTable rstData = new DataTable();
        using (SqlConnection conn = new SqlConnection(Properties.Settings.Default.TEST4))
        {
            using (SqlCommand cmdSQL = new SqlCommand(strSQL, conn))
            {
                cmdSQL.Connection.Open();
                rstData.Load(cmdSQL.ExecuteReader());
            }
        }
        return rstData;
    }

And we now have this:

Ok, now our check box event, it can be like this:

    protected void chkSelect_CheckedChanged(object sender, EventArgs e)
    {
        CheckBox ckBox = sender as CheckBox;
        bool MustCheck = ckBox.Checked;

        // uncheck all rows

        foreach (GridViewRow gRow in GridView1.Rows)
        {
            CheckBox UnCheck = gRow.FindControl("chkSelect") as CheckBox;
            UnCheck.Checked = false;
        }
        // now set the current check box
        ckBox.Checked = MustCheck;
    }

So, above, code behind – with post back.

But, you can quite easy do this 100% client side – javaScript.

So, drop the code behind, and write quite much what amounts to the SAME code, but this time in JavaScript.

So, remove auto-post back, and the event from the the check box – but now use a client side click, say like this:

                <asp:TemplateField HeaderText="Select" ItemStyle-HorizontalAlign="Center">
                    <ItemTemplate>
                      <asp:CheckBox ID="chkSelect" runat="server"  
                          onclick="mycheckall(this)"
                          />
                    </ItemTemplate>
                </asp:TemplateField>

and right below the GV, this script:

 <script> 
      function mycheckall(btn) {
          var bolChecked = $(btn).is(':checked')

          // now un check all
          MyTable = $('#GridView1')   // get the grid
          MyCheckBoxs = MyTable.find('input:checkbox')  // get all check boxes in grid
          MyCheckBoxs.each(function () {
              $(this).prop('checked', false)
          })

          // now set our one check box we just clicked on
          $(btn).prop('checked',bolChecked)
      }
 </script>

So, both really do the same logic. but, the 2nd example does not require server side code.