Pages

Wednesday, May 4, 2011

Checking All CheckBoxes in a GridView By JavaScript


Checking All CheckBoxes in a GridView 

In the code you can  checking All CheckBoxes in a GridView follwing is the image of interface .


Using the Client Side Javascript checking the header checkbox would check all checkboxes in the GridView and after unchecking the
header checkbox would uncheck all checkboxes in the GridView .


Copy the following javascript code and put it inside the head tag .

Javascript Code for ASP.Net GridView Check All Checkbox

<script type="text/javascript">
  function chkAllCheckbox(obj) {
            var gv = document.getElementById('<%=GVMain.ClientID %>');
                for (var i = 0; i < gv.all.length; i++) {
                     var node = gv.all[i];
                     node.checked = obj.checked;               
                   }          
              }
 </script>

HTML Code for ASP.Net GridView Check All Checkbox

<asp:GridView ID="GVMain" runat="server" AutoGenerateColumns="False" BackColor="White"
            BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3">
            <RowStyle ForeColor="#000066" />
            <Columns>
                <asp:TemplateField HeaderText="Select All">
                    <HeaderTemplate>
                        <asp:CheckBox ID="chkSelectAll" onClick="javascript:chkAllCheckbox(this);" Text="Select All" runat="server" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:CheckBox ID="chkSelect" runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="ID">
                    <ItemTemplate>
                        <asp:Label ID="lblID" Text='<%# Eval("ID") %>' runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Name">
                    <ItemTemplate>
                        <asp:Label ID="lblName" Text='<%# Eval("Name") %>' runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
            <FooterStyle BackColor="White" ForeColor="#000066" />
            <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
            <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
        </asp:GridView>

Related Other posts

10 comments

Nested gridview In Asp.net

Nested Gridview In Asp.net C# with toggle  

Introduction : This article describe you how add nested gridview in asp.net . Many times we require to add nested gridview .

Nested Gridview Code : I have written the html code and code behind code for binding the nested gridview .which is shown below .It is very easy to implement nested gridview in your application just you need to add it and change the connection string and query as per you requirement . I have added the toggle for nested gridview too.its toggle using javascript code.
Html code nested gridview :
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="NestedGridview.aspx.cs" Inherits="HamidSite.NestedGridview" %>

<!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></title>
    <script type="text/javascript" language="javascript">
        function toggle(toggeldivid, toggeltext) {                    
            var divelement = document.getElementById(toggeldivid);
            var lbltext = document.getElementById(toggeltext);
            if (divelement.style.display == "block")
             {
                divelement.style.display = "none";              
                lbltext.innerHTML = "+ Show Orders";
            }
            else {
                divelement.style.display = "block";                
                lbltext.innerHTML = "- Hide Orders";
            }
        }
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GVMain" runat="server" AutoGenerateColumns="False" BackColor="#DEBA84"
            BorderColor="#DEBA84" BorderStyle="Double" BorderWidth="3px" CellPadding="5" 
            OnRowDataBound="GVMain_RowDataBound" CellSpacing="2">
            <RowStyle ForeColor="#8C4510" BackColor="#FFF7E7" />
            <Columns>
                <asp:TemplateField HeaderText="ID">
                    <ItemTemplate>
                        <asp:Label ID="lblID" Text='<%# Eval("CustomerID") %>' runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Customer Name">
                    <ItemTemplate>
                        <asp:Label ID="lblName" Text='<%# Eval("CustomerName") %>' runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Orders">
                    <ItemTemplate>
                        <asp:Label ID="lbltoggel" runat="server" >+ Hide Orders</asp:Label>
                        <asp:Label ID="lblCustomerID" Visible="false" Text='<%# Eval("CustomerID") %>' runat="server"></asp:Label>
                        <asp:GridView ID="GVChild" style="display:block" runat="server" AutoGenerateColumns="False" BackColor="White"
                            BorderColor="#E7E7FF" BorderStyle="Solid" BorderWidth="1px" CellPadding="5" GridLines="Horizontal">
                            <RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
                            <Columns>
                                <asp:TemplateField HeaderText="Order No">
                                    <ItemTemplate>
                                        <asp:Label ID="lblOrderID" Text='<%# Eval("Orderid") %>' runat="server"></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Description">
                                    <ItemTemplate>
                                        <asp:Label ID="lblTotal" Text='<%# Eval("description") %>' runat="server"></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                            <FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
                            <PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" HorizontalAlign="Right" />
                            <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" />
                            <HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
                            <AlternatingRowStyle BackColor="#F7F7F7" />
                        </asp:GridView>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
            <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
            <PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
            <SortedAscendingCellStyle BackColor="#FFF1D4" />
            <SortedAscendingHeaderStyle BackColor="#B95C30" />
            <SortedDescendingCellStyle BackColor="#F1E5CE" />
            <SortedDescendingHeaderStyle BackColor="#93451F" />
        </asp:GridView>
    </div>
    </form>
</body>
</html>

Code Behind Code :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;

namespace HamidSite
{
    public partial class NestedGridview : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                bindGridview();
            }
        }
        private void bindGridview()
        {
            try
            {
                DataSet Ds = GetDataSet("Select * from Customers");
                GVMain.DataSource = Ds;                // Set DataSource Here
                GVMain.DataBind();
            }
            catch (Exception) { }
        }
        private void bindChildGridview(int customerId, GridView ChildGridview)
        {
            try
            {
                DataSet Ds = GetDataSet("Select * from CustomerOrder where customerid = "+customerId);
                ChildGridview.DataSource = Ds;                // Set DataSource Here
                ChildGridview.DataBind();
            }
            catch (Exception) { }
        }
        private DataSet GetDataSet(string Query)
        {
            DataSet Ds = new DataSet();
            try
            {
                string strCon = @"Data Source=ServerName;Initial Catalog=Test;Integrated Security=True;";  //Conntection String
                SqlConnection Con = new SqlConnection(strCon);
                SqlDataAdapter Da = new SqlDataAdapter(Query, Con);
                Da.Fill(Ds);
            }
            catch (Exception) { }
            return Ds;
        }
        protected void GVMain_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                Label lblCustomerID = (Label)e.Row.FindControl("lblCustomerID");
                Label lbltoggel = (Label)e.Row.FindControl("lbltoggel");
                
                GridView GvChild = (GridView)e.Row.FindControl("GVChild");
                bindChildGridview(Convert.ToInt32(lblCustomerID.Text), GvChild); //Bind the child gridvie here ..

                lbltoggel.Attributes.Add("onClick", "toggle('" + GvChild.ClientID + "' ,'"+lbltoggel.ClientID+"');");
            }
        }
    }
}
Happy Codding ...

Related Other posts
7 comments

Create a DataTable Dynamically In C# .

Create a DataTable Dynamically In C# .

Introduction : In this article i will show you how to create DataTable Dynamically in c# .Many times we require to create a DataTable Dynamically in our code .It is very easy you just need to declare all the DataColumn and need to add in Datatable.

Dynamic DataTable code in c# : 

//--Decalration Of Data Table ---//
DataTable Dt = new DataTable();

//--Decalration Of Data Column-----//
DataColumn DCID = new DataColumn("ID", typeof(Int32));
DataColumn DCName = new DataColumn("Name", typeof(String));
DataColumn DCCustomerID = new DataColumn("CustomerID", typeof(Int32));

//-- Add Data Column to DataTable --//
Dt.Columns.Add(DCID);
Dt.Columns.Add(DCName);
Dt.Columns.Add(DCCustomerID);


//-- Add Data Rows to DataTable --//
DataRow Dr1 = Dt.NewRow();
Dr1["ID"] = 1;
Dr1["Name"] = "Hamid Seta";
Dr1["CustomerID"] = 1;

DataRow Dr2 = Dt.NewRow();
Dr2["ID"] = 2;
Dr2["Name"] = "Ankur Shah";
Dr2["CustomerID"] = 2;

Dt.Rows.Add(Dr1);
Dt.Rows.Add(Dr2);


Related Other posts
2 comments
Subscribe to: Posts (Atom)