Code Snippets: 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 ...

7 comments:

The Rk HirparaDecember 25, 2011 at 10:26 AM
Thank you very much ...
It is really very nice ..., efficient and a new commer can have an idea, not only about nested grid view but also about dataTable ..., Thank you frd ...,

You can improve your work by adding JavaScript function to show/hide child gridView in toggel fashion ....If possible do this ....
Thank you
seta hamidJanuary 6, 2012 at 8:34 AM
thank you Rk Hirpara ,

I have added the toggle in nested gridview using javascript in above article.
Ranveer Singh GodaraApril 4, 2012 at 2:55 AM
This comment has been removed by the author.
UnknownJune 19, 2012 at 1:42 AM
I like to make friends with you,haha.

----------------------------------------------------------------------------------------------------------------------------------------
Rc Helicopter|Mini Rc Helicopter|Rc Helicopters
AnonymousJune 27, 2012 at 7:36 AM
very nice work
AnonymousAugust 1, 2012 at 7:43 AM
Masha Allaah... nice job.. may Allaah bestow you with His reward
-Mahbub Abbas
http://samfas.com
AnonymousAugust 10, 2012 at 12:21 AM
Thanks for your post
Dhanraj. S

Code Snippets

Pages

Wednesday, May 4, 2011

Nested gridview In Asp.net

7 comments: