Thursday, March 31, 2016

Gridview: Select deselect all checkboxes in asp.net using Javascript

In this article I am going to tell you how to selecting and deselecting all checkboxes inside Gridview data control using Javascript in asp.net.

How to fill dropdownlist with months name using System.Globalization in asp.net

Description:
When the header checkbox is selected all checkboxes in Gridview got selected and same while uncheck the header checkbox all checkboxes will be unchecked.
Implementation:
Add the Javscript code
Put the below given Javascript code before closing the head section of web from:
<script>
    function SelectAllChkb(headerchk) {
        var grdmovie = document.getElementById('grdmovie');
        var i;
        if (headerchk.checked) {
            for (i = 0; i < grdmovie.rows.length; i++) {
                var inputs = grdmovie.rows[i].getElementsByTagName('input');
                inputs[0].checked = true;               
            }
        }
        else {
            for (i = 0; i < grdmovie.rows.length; i++) {
                var inputs = grdmovie.rows[i].getElementsByTagName('input');
                inputs[0].checked = false;
            }
        }
    }

    function CheckChildchkb(gv, Chkitem) {
        var grdmovie = gv.parentNode.parentNode.parentNode;
        var selectAll = grdmovie.rows[0].cells[Chkitem].getElementsByTagName("input")[0];
        if (!gv.checked) {
            selectAll.checked = false;
        }
        else {
            var checked = true;
            for (var i = 1; i < grdmovie.rows.length; i++) {
                var chb = grdmovie.rows[i].cells[Chkitem].getElementsByTagName("input")[0];
                if (!chb.checked) {
                    checked = false;
                    break;
                }
            }
            selectAll.checked = checked;
        }
    }
    </script>

Complete HTML Markup:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script>
    function SelectAllChkb(headerchk) {
        var grdmovie = document.getElementById('grdmovie');
        var i;
        if (headerchk.checked) {
            for (i = 0; i < grdmovie.rows.length; i++) {
                var inputs = grdmovie.rows[i].getElementsByTagName('input');
                inputs[0].checked = true;               
            }
        }
        else {
            for (i = 0; i < grdmovie.rows.length; i++) {
                var inputs = grdmovie.rows[i].getElementsByTagName('input');
                inputs[0].checked = false;
            }
        }
    }
    function CheckChildchkb(gv, Chkitem) {
        var grdmovie = gv.parentNode.parentNode.parentNode;
        var selectAll = grdmovie.rows[0].cells[Chkitem].getElementsByTagName("input")[0];
        if (!gv.checked) {
            selectAll.checked = false;
        }
        else {
            var checked = true;
            for (var i = 1; i < grdmovie.rows.length; i++) {
                var chb = grdmovie.rows[i].cells[Chkitem].getElementsByTagName("input")[0];
                if (!chb.checked) {
                    checked = false;
                    break;
                }
            }
            selectAll.checked = checked;
        }
    }
    </script>
</head>

<body>
    <form id="form1" runat="server">
    <div>
    <fieldset style="width:50%">
    <legend>Select deselect all checkboxes Example</legend>
     <asp:GridView ID="grdmovie" runat="server" AllowPaging="true" AutoGenerateColumns="false">
        <Columns>
        <asp:TemplateField HeaderText="CheckAll">
<HeaderTemplate>
<asp:CheckBox ID="chkAll" runat="server" onclick="SelectAllChkb(this);" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkitem" runat="server" onclick="CheckChildchkb(this,0)" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField = "Name" HeaderText = "Name" />
<asp:BoundField DataField = "Genre" HeaderText = "Customer ID" />
<asp:BoundField DataField = "Budget" HeaderText = "Contact Name"/>
        </Columns>
        </asp:GridView>   
    </fieldset>            
    </div>
    </form>
</body>
</html>

Bind grid
Create a method to bind the 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

No comments:

Post a Comment