ASP.NET Gridview : Check and uncheck checkboxes using Jquery - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

ASP.NET Gridview : Check and uncheck checkboxes using Jquery

In this article I am going to explain how to check uncheck OR select/deselect checkboxes in asp.net gridview control using Jquery.


Description:
Check and uncheck the entire checkboxes showing inside Gridview. A checkbox is placed inside headertemplate in Gridview to select and deselect checkboxes.

Implementation:
Add the below given Jquery code before closing the head section of webform.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        var CheckAll = $("#chkAll").click(function () {
            if (this.checked) {
                $('.chk').attr('checked', this.checked);
            }
            else {
                $('.chk').attr('checked', this.checked = false);
            }
        });
        $(".chk").click(function () {
            if ($(".chk").length == $(".chk:checked").length) {
                $("#chkAll").attr("checked", "checked");
            } else {
                $("#chkAll").removeAttr("checked");
            }
        });

    });
    </script>

HTML Markup:
<fieldset style="width:30%">
    <legend>Select deselect all checkboxes Example</legend>
     <asp:GridView ID="grdmovie" runat="server" AllowPaging="true" AutoGenerateColumns="false">
       <Columns>
        <asp:TemplateField HeaderText="CheckAll">
<HeaderTemplate>
<input type="checkbox" id="chkAll"/>
</HeaderTemplate>
<ItemTemplate>
<input type="checkbox" class="chk"/>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField = "Name" HeaderText = "Movie Name" />

<asp:BoundField DataField = "Genre" HeaderText = "Genre" />
<asp:BoundField DataField = "Budget" HeaderText = "Budget (In Cr.)"/>
        </Columns>
        </asp:GridView>   
    </fieldset>

Import the namespace:
C# code:
using System.Data;
using System.Data.SqlClient;
using System.Configuration;

VB.net Code:
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration

Bind the Gridview
Create a method to bind Gridview and call it on page load.
C# code:
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["connection"].ToString());
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindGrid();
        }
    }
    public void BindGrid()
    {
        try
        {
            SqlCommand cmd = new SqlCommand("select * from Tb_Movie", con);
            con.Open();
            SqlDataAdapter adp = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            adp.Fill(dt);
            if (dt.Rows.Count > 0)
            {
                grdmovie.DataSource = dt;
                grdmovie.DataBind();
            }          
        }
        catch (Exception ex)
        {
        }
    }

VB.net Code:
Private con As New SqlConnection(ConfigurationManager.ConnectionStrings("connection").ToString())
    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        If Not IsPostBack Then
            BindGrid()
        End If
    End Sub
    Public Sub BindGrid()
        Try
            Dim cmd As New SqlCommand("select * from Tb_Movie", con)
            con.Open()
            Dim adp As New SqlDataAdapter(cmd)
            Dim dt As New DataTable()
            adp.Fill(dt)
            If dt.Rows.Count > 0 Then
                grdmovie.DataSource = dt
                grdmovie.DataBind()
            End If
        Catch ex As Exception
        End Try
    End Sub


What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon