Check All and Uncheck All Gridview pada ASP.Net C# and VB

 

HTML Code

<asp:GridView ID=”GridView1″ runat=”server” HeaderStyle-BackColor=”#3AC0F2″
    HeaderStyle-ForeColor=”White” AutoGenerateColumns=”false”>
    <Columns>
        <asp:TemplateField>
            <HeaderTemplate>
                <asp:CheckBox ID=”chkHeader” runat=”server” />
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox ID=”chkRow” runat=”server” />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField=”Name” HeaderText=”Name” ItemStyle-Width=”150″ />
        <asp:BoundField DataField=”Country” HeaderText=”Country” ItemStyle-Width=”150″ />
    </Columns>
</asp:GridView>
<hr />
<asp:GridView ID=”GridView2″ runat=”server” HeaderStyle-BackColor=”#3AC0F2″
    HeaderStyle-ForeColor=”White” AutoGenerateColumns=”false”>
    <Columns>
        <asp:TemplateField>
            <HeaderTemplate>
                <asp:CheckBox ID=”chkHeader” runat=”server” />
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox ID=”chkRow” runat=”server” />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField=”Name” HeaderText=”Name” ItemStyle-Width=”150″ />
        <asp:BoundField DataField=”Country” HeaderText=”Country” ItemStyle-Width=”150″ />
    </Columns>
</asp:GridView>
<hr />
<asp:GridView ID=”GridView3″ runat=”server” HeaderStyle-BackColor=”#3AC0F2″
    HeaderStyle-ForeColor=”White” AutoGenerateColumns=”false”>
    <Columns>
        <asp:TemplateField>
            <HeaderTemplate>
                <asp:CheckBox ID=”chkHeader” runat=”server” />
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox ID=”chkRow” runat=”server” />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField=”Name” HeaderText=”Name” ItemStyle-Width=”150″/>
        <asp:BoundField DataField=”Country” HeaderText=”Country” ItemStyle-Width=”150″/>
    </Columns>
</asp:GridView>
C # Code
using System.Data;
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[2] { new DataColumn(“Name”), new DataColumn(“Country”) });
        dt.Rows.Add(“John Hammond”, “Canada”);
        dt.Rows.Add(“Rick Stewards”, “United States”);
        dt.Rows.Add(“Huang He”, “China”);
        dt.Rows.Add(“Mudassar Khan”, “India”);
        GridView1.DataSource = dt;
        GridView1.DataBind();
        dt.Rows.Clear();
        dt.Rows.Add(“Wills Smith”, “United States”);
        dt.Rows.Add(“Raj Shekaran”, “India”);
        dt.Rows.Add(“Rob Mills”, “Russia”);
        GridView2.DataSource = dt;
        GridView2.DataBind();
        dt.Rows.Clear();
        dt.Rows.Add(“Jason Mathews”, “Canada”);
        dt.Rows.Add(“Asim Iqbal”, “UAE”);
        dt.Rows.Add(“Bravo Samuels”, “Brazil”);
        dt.Rows.Add(“Walter Slater”, “Mexico”);
        GridView3.DataSource = dt;
        GridView3.DataBind();
    }
}
VB Code
Protected Sub Page_Load(sender As Object, e As EventArgs)
If Not Me.IsPostBack Then
Dim dt As New DataTable()
dt.Columns.AddRange(New DataColumn(1) {New DataColumn(“Name”), New DataColumn(“Country”)})
dt.Rows.Add(“John Hammond”, “Canada”)
dt.Rows.Add(“Rick Stewards”, “United States”)
dt.Rows.Add(“Huang He”, “China”)
dt.Rows.Add(“Mudassar Khan”, “India”)
GridView1.DataSource = dt
GridView1.DataBind()
dt.Rows.Clear()
dt.Rows.Add(“Wills Smith”, “United States”)
dt.Rows.Add(“Raj Shekaran”, “India”)
dt.Rows.Add(“Rob Mills”, “Russia”)
GridView2.DataSource = dt
GridView2.DataBind()
dt.Rows.Clear()
dt.Rows.Add(“Jason Mathews”, “Canada”)
dt.Rows.Add(“Asim Iqbal”, “UAE”)
dt.Rows.Add(“Bravo Samuels”, “Brazil”)
dt.Rows.Add(“Walter Slater”, “Mexico”)
GridView3.DataSource = dt
GridView3.DataBind()
End If
End Sub
java script diletakan pada bada code html
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
<script type=”text/javascript”>
    $(“[id*=chkHeader]”).live(“click”, function () {
        var chkHeader = $(this);
        var grid = $(this).closest(“table”);
        $(“input[type=checkbox]”, grid).each(function () {
            if (chkHeader.is(“:checked”)) {
                $(this).attr(“checked”, “checked”);
                $(“td”, $(this).closest(“tr”)).addClass(“selected”);
            } else {
                $(this).removeAttr(“checked”);
                $(“td”, $(this).closest(“tr”)).removeClass(“selected”);
            }
        });
    });
    $(“[id*=chkRow]”).live(“click”, function () {
        var grid = $(this).closest(“table”);
        var chkHeader = $(“[id*=chkHeader]”, grid);
        if (!$(this).is(“:checked”)) {
            $(“td”, $(this).closest(“tr”)).removeClass(“selected”);
            chkHeader.removeAttr(“checked”);
        } else {
            $(“td”, $(this).closest(“tr”)).addClass(“selected”);
            if ($(“[id*=chkRow]”, grid).length == $(“[id*=chkRow]:checked”, grid).length) {
                chkHeader.attr(“checked”, “checked”);
            }
        }
    });
</script>
CSS
<style type=”text/css”>
    body
    {
        font-family: Arial;
        font-size: 10pt;
    }
    .selected
    {
        background-color: #A1DCF2;
    }
</style>
sumber : aspsnippets

 

Share This:Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on Pinterest

Leave a Reply

Your email address will not be published. Required fields are marked *