ASP.NET Gridview : Check and uncheck checkboxes using Jquery | ASPMANTRA | Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server AND WCF 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


Post a Comment

[blogger]

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget