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.

Introduction

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

 

  • Create an ASP.NET WEBAPPLICATION
  • 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">

            <Columns>

                <asp:TemplateField HeaderText ="StateName">

                    <ItemTemplate>

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

                    </ItemTemplate>

                </asp:TemplateField>

            </Columns>

 </asp:GridView>


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

Database

User id

Password

<connectionStrings>

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

  </connectionStrings>


Binding Grid View on the Page Load event.

  protected void Page_Load(object sender, EventArgs e)

    {

 

        if (!IsPostBack)

        {

            getrecords();

        }

 

    }


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();

            da.Fill(dt);

            GridView1.DataSource = dt;

            GridView1.DataBind();

 

        }


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) {

            debugger;

            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;

                        break;
                    }

                }

            }
        }    
</script>


Using Server event ( Checked Changed Event )

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

            <Columns>

                <asp:TemplateField HeaderText="StateName">

                    <ItemTemplate>

                        

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

                    </ItemTemplate>

                </asp:TemplateField>

            </Columns>

        </asp:GridView>


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.