connectseekers.com

Tuesday, 22 July 2014

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

7/22/2014 - By Pranav Singh 2

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.


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

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

2 comments:

Please let me know your view

Free Ebooks


About Us

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Contact Us

For writing article in this website please send request by your

GMAIL ID: dotnetpools@gmail.com
Email Id : contact@aspdotnet-pools.com

Bugs and Suggestions

As we all know that this website is for sharing knowledge and providing proper solution. So while reading the article is you find any bug or if you have any suggestion please mail us at contact@aspdotnet-pools.com.

Partners


Top jQuery Plugins

Global Classified : Connectseekers.com
© 2014
back to top