Asp.net programming we consider all important topic for knowledge about controls,web Services, JSON, Ajax, database, and interview related Question. In this Asp.net and sql server tutorial blog we give many examples of jquery as like How Play YouTube Video in Your Asp.net Website by URL, How to Play YouTube Videos in Asp.net by using Jquery , Jquery Change div background on mouseover in asp.net , JQuery UI Datepicker (Calendar) etc.

Friday, August 1, 2014

Example of Header Checkbox

Example of Header Check box in GridView Control:

In this post we consider a Example in asp.net programming language.Here we consider a list if friend with check box in Grid view and one header check box also.this header check box work as controller means if you select header check box then auto select all rows check box and when unchecked then all unchecked automatically .

Check box in GridView Control



<asp:GridView ID="Grid_All" runat="server" AutoGenerateColumns="False"                                             Width="100%" DataSourceID="SqlDataSource1" EnableModelValidation="True">
<Columns>
<asp:TemplateField HeaderText="Select">
<ItemTemplate>
<asp:CheckBox ID="chkBxSelect" runat="server" />
</ItemTemplate>
<HeaderStyle HorizontalAlign="Left" VerticalAlign="Middle" Width="50px" />
<ItemStyle HorizontalAlign="Left" VerticalAlign="Middle" Width="50px" />
<HeaderTemplate>
<asp:CheckBox ID="chkBxHeader" onclick="javascript:HeaderClick(this);" runat="server" />
</HeaderTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ID" HeaderText="ID" SortExpression="ID" />
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
</Columns>                                           
</asp:GridView> 
.

Example of Window.onload JavaScript function:

<script type="text/javascript">
        var TotalChkBx;
        var Counter;
        window.onload = function ()
         {
            //Get total no. of CheckBoxes in side the GridView.
            TotalChkBx = parseInt('<%= this.Grid_All.Rows.Count %>');
            //Get total no. of checked CheckBoxes in side the GridView.
            Counter = 0;
        }
       
 </script>  

Example of GridView with header checkbox Control:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="checkboxwithinGrid.aspx.cs" Inherits="checkboxwithinGrid" %>

<!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>checkboxwithinGrid</title>
    <script type="text/javascript">
        var TotalChkBx;
        var Counter;

        window.onload = function () {
            //Get total no. of CheckBoxes in side the GridView.
            TotalChkBx = parseInt('<%= this.Grid_All.Rows.Count %>');
            //Get total no. of checked CheckBoxes in side the GridView.
            Counter = 0;
        }

        function HeaderClick(CheckBox) {
            //Get target base & child control.
            var TargetBaseControl = document.getElementById('<%= this.Grid_All.ClientID %>');
            var TargetChildControl = "chkBxSelect";

            //Get all the control of the type INPUT in the base control.
            var Inputs = TargetBaseControl.getElementsByTagName("input");

            //Checked/Unchecked all the checkBoxes in side the GridView.
            for (var n = 0; n < Inputs.length; ++n)
                if (Inputs[n].type == 'checkbox' && Inputs[n].id.indexOf(TargetChildControl, 0) >= 0)
                    Inputs[n].checked = CheckBox.checked;
            //Reset Counter
            Counter = CheckBox.checked ? TotalChkBx : 0;
        }

        function ChildClick(CheckBox, HCheckBox) {
            //get target base & child control.
            var HeaderCheckBox = document.getElementById(HCheckBox);

            //Modifiy Counter;           
            if (CheckBox.checked && Counter < TotalChkBx)
                Counter++;
            else if (Counter > 0)
                Counter--;

            //Change state of the header CheckBox.
            if (Counter < TotalChkBx)
                HeaderCheckBox.checked = false;
            else if (Counter == TotalChkBx)
                HeaderCheckBox.checked = true;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table style="width: 100%">
        <tr>
            <td style="width: 20%">
            </td>
            <td style="width: 60%" align="center">
                <h1>
                    <strong>List Of All Friends</strong></h1>
            </td>
            <td style="width: 20%">
            </td>
        </tr>
        <tr>
            <td style="width: 20%">
                &nbsp;
            </td>
            <td style="width: 60%">
                <table width="100%">
                    <tr>
                        <td align="center">
                            <table style="Width: 100%">
                                <tr>
                                    <td style="Width: 60%" valign="top">
                                        <br />

                            <asp:Label ID="Msg" runat="server" Font-Bold="True" ForeColor="Red"></asp:Label>
                            <br />
                            <asp:Button ID="btnSubmit" runat="server" Text="Send Request" CssClass="Sam_btn_menu"
                                            Height="38px" onclick="btnSubmit_Click" />
                                    </td>
                                    <td style="Width: 40%">
                                        <asp:GridView ID="Grid_All" runat="server" AutoGenerateColumns="False" RowStyle-HorizontalAlign="Center"
                                            Width="100%" DataSourceID="SqlDataSource1" EnableModelValidation="True">
                                            <Columns>

                                            <asp:TemplateField HeaderText="Select">
                                                    <ItemTemplate>
                                                        <asp:CheckBox ID="chkBxSelect" runat="server" />
                                                    </ItemTemplate>
                                                    <HeaderStyle HorizontalAlign="Left" VerticalAlign="Middle" Width="50px" />
                                                    <ItemStyle HorizontalAlign="Left" VerticalAlign="Middle" Width="50px" />
                                                    <HeaderTemplate>
                                                        <asp:CheckBox ID="chkBxHeader" onclick="javascript:HeaderClick(this);" runat="server" />
                                                    </HeaderTemplate>
                                                </asp:TemplateField>

                                                <asp:BoundField DataField="ID" HeaderText="ID" SortExpression="ID" />
                                                <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
                                            </Columns>
                                            <RowStyle BackColor="#FFCC99" />
                                            <HeaderStyle BackColor="#FF6D00" Font-Bold="True" ForeColor="White" />
                                            <AlternatingRowStyle BackColor="White" />
                                            <HeaderStyle HorizontalAlign="Center"></HeaderStyle>
                                            <RowStyle HorizontalAlign="Center"></RowStyle>
                                        </asp:GridView>
                                        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
                                            ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
                                            SelectCommand="SELECT * FROM [Friends]"></asp:SqlDataSource>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    </table>
            </td>
            <td style="width: 20%">
                &nbsp;
            </td>
        </tr>
    </table>
    </div>
    </form>
</body>
</html>

C# code Header Check box in GridView:




using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class checkboxwithinGrid : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        Boolean b = false;

        int count = 0;
        for (int i = 0; i < Grid_All.Rows.Count; i++)
        {
            GridViewRow row = Grid_All.Rows[i];
           
            CheckBox chkBxSelect = (CheckBox)row.FindControl("chkBxSelect");

            if (chkBxSelect.Checked == true)
            {
                b = true;
                count = count + 1;
            }
        }

        if (b == false)
        {
            Msg.Text = "Select at list one....";
        }
        else
        {
            Msg.Text = count+"  friend Select ";
        }
    }
}


Asp.net checkbox in gridview
Asp.net checkbox in gridview

Download full code click here

Gridview Related Post:

No comments:

Post a Comment