How to Allow User to Check Only One Row at a Time in Grid View

In this article you will learn how to allow the user to check only one row at a time in a Grid View using JavaScript.


Most developers use a Grid View to display records.

Allowing the user to select only one row from this Grid View.

Here is an example I will show you.

  • Using JavaScript
  • Using server event

Create Table State Master

SQL Server part

CREATE TABLE [dbo].[StateMaster](

[StateID] [int] IDENTITY(1,1) primary key NOT NULL,

[StateName] [varchar](30) NULL,

[StateCode] [varchar](50) NULL,

[RecordStatus] [char](1) NULL,


Add Some Records

Web Forms Part


  • Add a web form
  • Name it "gridviewexample.aspx"
  • Add a Grid View to that form
  • Inside the Grid View add a column as in:
    <Columns></ Columns>
  • Inside the column add a TemplateField as in:
    <asp: TemplateField>
  • Inside the TemplateField add an Item template
  • Add a Checkbox control


<asp:GridView ID="GridView1" AutoGenerateColumns="false" runat="server">


                <asp:TemplateField HeaderText ="StateName">


<asp:CheckBox ID="CheckBox1" Text='<%# Eval("StateName")%>' AutoPostBack="true"  runat="server" onclick="CheckBoxCheck(this);" />





You need to add a connection string above the Page load.

SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["Myconstr"].ToString());

And add a connection string in Web.config.

For making a connection with the database you need to add a connection string to the database; here is an example of that.

Just replace here with your database value.

Data source


User id



    <add name="Myconstr" connectionString="data source=SAI-PC; Database=AllSampleCode;  user id=sa; password=Pass$123 ;" providerName=""/>


Binding Grid View on the Page Load event.

  protected void Page_Load(object sender, EventArgs e)



        if (!IsPostBack)






Now to create a method for binding records for the Grid View.

private void getrecords()



     SqlCommand cmd = new SqlCommand("select StateID ,StateName from StateMaster ", con);

            cmd.CommandType = CommandType.Text;

            SqlDataAdapter da = new SqlDataAdapter();

            da.SelectCommand = cmd;

            DataTable dt = new DataTable();


            GridView1.DataSource = dt;




Using JavaScript (Onclick)

In the head part of the .aspx page add the following JavaScript.

To see the details, use the Firefox add-on Firebug to debug it.

<script type="text/javascript">

        function CheckBoxCheck(rb) {


            var gv = document.getElementById("<%=GridView1.ClientID%>");

            var chk = gv.getElementsByTagName("input");

            var row = rb.parentNode.parentNode;

            for (var i = 0; i < chk.length; i++) {

                if (chk[i].type == "checkbox") {

                    if (chk[i].checked && chk[i] != rb) {

                        chk[i].checked = false;




Using Server event ( Checked Changed Event )

<asp:GridView ID="GridView1" AutoGenerateColumns="false" runat="server">


                <asp:TemplateField HeaderText="StateName">



 <asp:CheckBox ID="CheckBox1" Text='<%# Eval("StateName")%>' AutoPostBack="true" runat="server"   OnCheckedChanged="CheckBox1_CheckedChanged" />





protected void CheckBox1_CheckedChanged(object sender, EventArgs e)



            CheckBox chk = (CheckBox)sender;

            GridViewRow gv = (GridViewRow)chk.NamingContainer;

            int rownumber = gv.RowIndex;


            if (chk.Checked)


                int i;

                for (i = 0; i <= GridView1.Rows.Count - 1; i++)


                    if (i != rownumber)


        CheckBox chkcheckbox = ((CheckBox)(GridView1.Rows[i].FindControl("CheckBox1")));

        chkcheckbox.Checked = false;







Final output

Happy coding.