May 11, 2010

Client-Side Validation for the CheckBoxes Inside a GridView

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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>Selecting a Checkbox</title>

    <script type="text/javascript">
        var TargetBaseControl = null;
       
        window.onload = function()
        {
            try
            {
                //get target base control.
                TargetBaseControl = document.getElementById('<%= this.GridView1.ClientID %>');
            }
            catch(err)
            {
                TargetBaseControl = null;
            }
        }
       
        function TestCheckBox()
        {             
            if(TargetBaseControl == null) return false;
            //get target child control.
            var TargetChildControl = "chkBxSelect";
           
            //get all the control of the type INPUT in the base control.
            var Inputs = TargetBaseControl.getElementsByTagName("input");
           
            for(var n = 0; n < Inputs.length; ++n)
                if(Inputs[n].type == 'checkbox' && Inputs[n].id.indexOf(TargetChildControl,0) >= 0 && Inputs[n].checked)
                    return true;                
           
            alert('Select at least one checkbox!');
            return false;
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
            <Columns>
                <asp:BoundField HeaderText="n" DataField="sno">
                    <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />
                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                </asp:BoundField>
                <asp:TemplateField HeaderText="Select">
                    <ItemTemplate>
                        <asp:CheckBox ID="chkBxSelect" runat="server" />
                    </ItemTemplate>
                    <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <asp:Button ID="btnPost" runat="server" Text="Post" OnClientClick="javascript:return TestCheckBox();"
            OnClick="btnPost_Click" />
        <hr />
        <asp:Label ID="lblMsg" runat="server" Font-Bold="True" ForeColor="Red" Width="268px"></asp:Label>
    </form>
</body>
</html>



code:

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {       
        if (!IsPostBack)
        {
            GridView1.DataSource = GetDataSource();
            GridView1.DataBind();
        }
    }

    protected DataTable GetDataSource()
    {
        DataTable dTable = new DataTable();
        DataRow dRow = null;
        Random rnd = new Random();
        dTable.Columns.Add("sno");

        for (int n = 0; n < 10; ++n)
        {
            dRow = dTable.NewRow();

            dRow["sno"] = n + ".";

            dTable.Rows.Add(dRow);
            dTable.AcceptChanges();
        }

        return dTable;
    }
    protected void btnPost_Click(object sender, EventArgs e)
    {
        lblMsg.Text = "Form is posted!";
    }
}



No comments:

Post a Comment