Sunday, April 3, 2016

Check and uncheck all records using checkbox in Gridview asp.net using Javascript

In this article I am going to expalin how to Check and uncheck all records or showing rows using checkbox control in Gridview asp.net using Javascript.

In the previous article I have explained how to generate QR code image using Google Chart API in asp.net, how to populate dropdownlist with months name in asp.net using C# and vb.net , how to get all countries list using system.globalization and bind to dropdownlist in asp.net and  how to print a web form (webpage) in asp.net using C# and VB.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 = "Genre" />
<asp:BoundField DataField = "Budget" HeaderText = "Budget"/>
        </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