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.