Wednesday, May 22, 2013

Gridview checkbox validation using JavaScript in Asp.net


Introduction

In this article i will explain check the checkbox selected status in gridview using JavaScript in Asp.net.

The following example check whether checkboxes selected in gridview or not. In this example I have taken one gridview with checkboxes and I have taken one button If user click on button without check any checkbox it rise validation.

Firstly I am created a database EmpDetail. and Now I am created a table in this database. 

Query Code

CREATE TABLE [dbo].[Emp_Info](
      [Emp_Id] [int] NULL,
      [Name] [varchar](50) NULL,
      [Salary] [int] NULL,
      [City] [varchar](50) NULL
) ON [PRIMARY]
Now Insert some Data in Emp_Info table. Then use the following procedure.
Complete Program

Checkbox_Validation.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Checkbox_Validation.aspx.cs" Inherits="Checkbox_Validation" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function CheckBox_Validation()
        {
            var valid = false;
            var gdvw = document.getElementById('<%= gdview.ClientID %>');
            for (var i = 1; i < gdvw.rows.length; i++)
            {
                var value = gdvw.rows[i].getElementsByTagName('input');
                if (value != null)
                {
                    if (value[0].type == "checkbox")
                    {
                        if (value[0].checked)
                        {
                            valid = true;
                            alert("Checkbox selected successfully");
                            return true;
                        }
                    }
                }
            }
            alert("Please select atleast one checkbox");
            return false;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:GridView ID="gdview" CssClass="Gridview" runat="server" AutoGenerateColumns="false" HeaderStyle-BackColor="#669999"
HeaderStyle-Font-Bold="true" HeaderStyle-ForeColor="Black" HeaderStyle-BorderColor="#333300" HeaderStyle-BorderWidth="1">
        <Columns>
            <asp:TemplateField>
                <HeaderTemplate>
                    <asp:CheckBox ID="chkbox" runat="server" />         
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="chkboxchild" runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:BoundField HeaderText="Emp_Id" DataField="Emp_Id" HeaderStyle-HorizontalAlign="Left" >
<HeaderStyle HorizontalAlign="Left"></HeaderStyle>
            </asp:BoundField>
            <asp:BoundField HeaderText="Name" DataField="Name" HeaderStyle-HorizontalAlign="Left" >
<HeaderStyle HorizontalAlign="Left"></HeaderStyle>
            </asp:BoundField>
            <asp:BoundField HeaderText="Salary" DataField="Salary" HeaderStyle-HorizontalAlign="Left" >
<HeaderStyle HorizontalAlign="Left"></HeaderStyle>
            </asp:BoundField>
            <asp:BoundField HeaderText="City" DataField="City" HeaderStyle-HorizontalAlign="Left" >
<HeaderStyle HorizontalAlign="Left"></HeaderStyle>
            </asp:BoundField>
        </Columns>
        <EditRowStyle Font-Bold="False" Font-Italic="False" />
<HeaderStyle BackColor="#99CCFF" Font-Bold="True" ForeColor="Black" BorderColor="#663300" BorderWidth="1px"></HeaderStyle>
    </asp:GridView>
        <br />
        <asp:Button runat="server" Text="Submit" OnClientClick="javascript:CheckBox_Validation()" Font-Bold="True" Font-Italic="False" />
    </div>
    </form>
</body>
</html>

Checkbox_Validation.aspx.cs

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;
 
public partial class Checkbox_Validation : System.Web.UI.Page
{
    SqlConnection con;
    SqlDataAdapter da;
    DataSet ds;
    protected void Page_Load(object sender, EventArgs e)
    {
        using (con = new SqlConnection("Data Source=.;Initial Catalog=EmpDetail;Integrated Security=True"))
        {
            using (da = new SqlDataAdapter("Select * from Emp_Info", con))
            {
                ds = new DataSet();
                da.Fill(ds);
                gdview.DataSource = ds.Tables[0];
                gdview.DataBind();
            }
        }
    }
}
Output 1


Click on "Submit" button without any check checkbox


Output 2

Click on "Submit" button after check checkboxes