In this article I will show you how you can display the checkbox
in a gridview and how to force user the select the at least one checkbox and
then I have shown how to retrieve the selected checkbox value using c#.net. In
this article I have used asp.net, c#.net, sql server database, JavaScript.
Some of my previous articles are as follows: GridView
- Delete Selected Row Record From DataBase On Button Click in Asp.net Using
C#.Net, GridView
Asp.net Get ItemTemplate Control Value On Button Click Using C#.Net, Code
to Select All Checkbox in GridView in Asp.Net Using jQuery, Highlight
GridView Row on Mouseover Using CSS in Asp.Net C#.Net. Client
Side Validation of File Type or Extention Permited to Upload in Asp.Net Using
Javascript, Restrict
User To Enter Only Numbers in Textbox Using JavaScript In Asp.Net, Login
Form With LightbBox Effect in Asp.Net.
So for this article first we will create a new asp.net
application and add the below code. In your .aspx page.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="draganddropgridvirecell.aspx.cs"
Inherits="ProjectDemo_Asp.et.draganddropgridvirecell"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Validate
Selection Of Checkbox In GirdView Using Asp.net C# and jQuery |
Force User To Select One CheckBox Of
GridView Before Submit in Asp.net Using javascript</title>
<script language="javascript">
function
CheckBoxSelectionValidation() {
var
count = 0;
var
objgridview = document.getElementById('<%=
GridView1.ClientID %>');
/*Get
all the controls preent in gridview*/
for (var i = 0; i < objgridview.getElementsByTagName("input").length; i++) {
/*Get
the input control type*/
var
chknode = objgridview.getElementsByTagName("input")[i];
/*Check
weather checkbox is selected or not*/
if
(chknode != null && chknode.type == "checkbox" && chknode.checked)
{
count = count + 1;
}
}
/*Alert
message if none of the checkboc is selected*/
if
(count == 0) {
alert("Please select atleast one checkbox from gridview.");
return
false;
}
else
{
return
true;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" EmptyDataText="There are no data records to display."
BorderStyle="Solid">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1"
runat="server"
/>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="author_name" HeaderText="NAME" />
<asp:BoundField DataField="publisher_name" HeaderText="PUBLISHER NAME"
/>
<asp:BoundField DataField="publication_year" HeaderText="PUBLISH
YEAR" />
<asp:BoundField DataField="retail_price" HeaderText="PRICE" />
</Columns>
<HeaderStyle BackColor="#66CCFF" />
</asp:GridView>
<br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Submit" OnClientClick="javascript:return
CheckBoxSelectionValidation();" />
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
</form>
</body>
</html>
|
In above code I have used a JavaScript function to restrict
user to select at least one checkbox.
<script language="javascript">
function
CheckBoxSelectionValidation() {
var
count = 0;
var
objgridview = document.getElementById('<%=
GridView1.ClientID %>');
/*Get
all the controls preent in gridview*/
for (var i = 0; i < objgridview.getElementsByTagName("input").length; i++) {
/*Get
the input control type*/
var
chknode = objgridview.getElementsByTagName("input")[i];
/*Check
weather checkbox is selected or not*/
if
(chknode != null && chknode.type == "checkbox" && chknode.checked)
{
count = count + 1;
}
}
/*Alert
message if none of the checkboc is selected*/
if
(count == 0) {
alert("Please select atleast one checkbox from gridview.");
return
false;
}
else
{
return
true;
}
}
</script>
|
Now we will perform code behind activity.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
namespace ProjectDemo_Asp.et
{
public partial class draganddropgridvirecell : System.Web.UI.Page
{
public
string connectionstring = "<-- connection="" string--="" your="">";
protected
void Page_Load(object
sender, EventArgs e)
{
if
(!IsPostBack)
{
DataTable
_objdt = new DataTable();
_objdt =
GetDataFromDataBase();
if
(_objdt.Rows.Count > 0)
{
GridView1.DataSource =
_objdt;
GridView1.DataBind();
}
}
}
///
/// Function for binding retribing the data from database
///
///
public DataTable GetDataFromDataBase()
{
DataTable _objdt = new DataTable();
string querystring = "select * from Books;";
SqlConnection _objcon = new SqlConnection(connectionstring);
SqlDataAdapter _objda = new SqlDataAdapter(querystring, _objcon);
_objcon.Open();
_objda.Fill(_objdt);
return _objdt;
}
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Thanks for selecting checkbox. :)";
}
}
}
|
Now run the application to view the output.
DOWNLOAD
About the Author
Thanks for Your Info....
ReplyDeletethanks for your valuable comment.
Delete