HiI am a new here and found the article of Mudassar Ahmed Khan about Nested GridView Example in ASPNet using C and VBNetI tried it with a third level but have problems of binding data Does anyone know how it could work ltaspGridView ID34gvCustomers34 runat34server34 AutoGenerateColumns34false34 CssClass34Grid34 DataKeyNames34t1000customerid34 OnRowDataBound34OnRowDataBound34gt ltColumnsgt ltaspT

Nested GridView - GridView inside GridView ( Multiple Levels ) in ASP.Net

Hipp

SOLVED CLOSED ACTIVE ANSWERED
User: Hipp
Posted: on Mar 03, 2013 10:45 AM
Forum: Data Controls
Answer: 1
Views: 11289

Hi,

I am a new here and found the article of "Mudassar Ahmed Khan about Nested GridView Example in ASP.Net using C# and VB.Net

I tried it with a third level, but have problems of binding data. Does anyone know, how it could work?

<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" CssClass="Grid"
            DataKeyNames="t1000_customer_id" OnRowDataBound="OnRowDataBound">
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <img alt="" style="cursor: pointer" src="./images/plus.png" />
                        <asp:Panel ID="pnlOrders" runat="server" Style="display: none">
                            <asp:GridView ID="gvOrders" runat="server" AutoGenerateColumns="false" CssClass="ChildGrid"
                                DataKeyNames="t1001_order_id" OnRowDataBound="OnRowDataBound2">
                                <Columns>
                                    <asp:TemplateField>
                                        <ItemTemplate>
                                            <img alt="" style="cursor: pointer" src="./images/plus.png" />
                                            <asp:Panel ID="pnlInfos" runat="server" Style="display: none">
                                                <asp:GridView ID="gvInfos" runat="server" AutoGenerateColumns="false" CssClass="ChildGrid2"
                                                    DataKeyNames="t1002_t1001_id_pk" OnRowDataBound="OnRowDataBound2">
                                                    <Columns>
                                                        <asp:BoundField ItemStyle-Width="300px" DataField="t1002_info" HeaderText="Info" />
                                                    </Columns>
                                                </asp:GridView>
                                            </asp:Panel>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:BoundField ItemStyle-Width="150px" DataField="t1001_order_id" HeaderText="OrderId" />
                                    <asp:BoundField ItemStyle-Width="150px" DataField="t1001_date" HeaderText="Date" />
                                </Columns>
                            </asp:GridView>
                        </asp:Panel>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField ItemStyle-Width="150px" DataField="t1000_customer_name" HeaderText="Name" />
                <asp:BoundField ItemStyle-Width="150px" DataField="t1000_customer_region" HeaderText="Region" />
            </Columns>
        </asp:GridView>

In .cs File a added level 2 databound:

protected void OnRowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { string customerId = gvCustomers.DataKeys[e.Row.RowIndex].Value.ToString(); GridView gvOrders = e.Row.FindControl("gvOrders") as GridView; string sql = string.Format("select t1001_order_id, t1001_date from t1001_orders where t1001_t1000_id_pk={0}", customerId); gvOrders.DataSource = GetData(sql); gvOrders.DataBind(); } }

For Level 3 I tried:

protected void OnRowDataBound2(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { GridView gvOrders = e.Row.FindControl("gvOrders") as GridView; string orderId = gvOrders.DataKeys[e.Row.RowIndex].Value.ToString(); GridView gvInfos = gvOrders.FindControl("gvInfos") as GridView; string sql = string.Format("select t1002_t1001_id_pk, t1002_info from t1002_order_infos where t1002_t1001_id_pk={0}", orderId); gvInfos.DataSource = GetData(sql); gvInfos.DataBind(); } }

Best regards Hipp

Mudassar

0 1

Reply
ANSWER
User: Mudassar
Replied: on Mar 03, 2013 10:48 AM
Modified: on May 29, 2013 07:20 AM
Report

I have the solution using Northwind database

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        .Grid td
        {
            background-color: #A1DCF2;
            color: black;
            font-size: 10pt;
            line-height: 200%;
        }
        .Grid th
        {
            background-color: #3AC0F2;
            color: White;
            font-size: 10pt;
            line-height: 200%;
        }
        .ChildGrid td
        {
            background-color: #eee !important;
            color: black;
            font-size: 10pt;
            line-height: 200%;
        }
        .ChildGrid th
        {
            background-color: #6C6C6C !important;
            color: White;
            font-size: 10pt;
            line-height: 200%;
        }
         .Nested_ChildGrid td
        {
            background-color: #9FD69F !important;
            color: black;
            font-size: 10pt;
            line-height: 200%;
        }
        .Nested_ChildGrid th
        {
            background-color: #005A00 !important;
            color: White;
            font-size: 10pt;
            line-height: 200%;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("[id*=imgOrdersShow]").each(function () {
                if ($(this)[0].src.indexOf("minus") != -1) {
                    $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>");
                    $(this).next().remove();
                }
            });
            $("[id*=imgProductsShow]").each(function () {
                if ($(this)[0].src.indexOf("minus") != -1) {
                    $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>");
                    $(this).next().remove();
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" CssClass="Grid"
        DataKeyNames="CustomerID">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:ImageButton ID="imgOrdersShow" runat="server" OnClick="Show_Hide_OrdersGrid" ImageUrl="~/images/plus.png"
                        CommandArgument="Show" />
                    <asp:Panel ID="pnlOrders" runat="server" Visible="false" Style="position: relative">
                        <asp:GridView ID="gvOrders" runat="server" AutoGenerateColumns="false" PageSize="5"
                            AllowPaging="true" OnPageIndexChanging="OnOrdersGrid_PageIndexChanging" CssClass="ChildGrid"
                            DataKeyNames="OrderId">
                            <Columns>
                                <asp:TemplateField>
                                    <ItemTemplate>
                                        <asp:ImageButton ID="imgProductsShow" runat="server" OnClick="Show_Hide_ProductsGrid" ImageUrl="~/images/plus.png"
                                            CommandArgument="Show" />
                                        <asp:Panel ID="pnlProducts" runat="server" Visible="false" Style="position: relative">
                                            <asp:GridView ID="gvProducts" runat="server" AutoGenerateColumns="false" PageSize="2"
                                                AllowPaging="true" OnPageIndexChanging="OnProductsGrid_PageIndexChanging" CssClass="Nested_ChildGrid">
                                                <Columns>
                                                    <asp:BoundField ItemStyle-Width="150px" DataField="ProductId" HeaderText="Product Id" />
                                                    <asp:BoundField ItemStyle-Width="150px" DataField="ProductName" HeaderText="Product Name" />
                                                </Columns>
                                            </asp:GridView>
                                        </asp:Panel>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:BoundField ItemStyle-Width="150px" DataField="OrderId" HeaderText="Order Id" />
                                <asp:BoundField ItemStyle-Width="150px" DataField="OrderDate" HeaderText="Date" />
                            </Columns>
                        </asp:GridView>
                    </asp:Panel>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:BoundField ItemStyle-Width="150px" DataField="ContactName" HeaderText="Contact Name" />
            <asp:BoundField ItemStyle-Width="150px" DataField="City" HeaderText="City" />
        </Columns>
    </asp:GridView>
    </form>
</body>
</html>

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            gvCustomers.DataSource = GetData("select top 10 * from Customers");
            gvCustomers.DataBind();
        }
    }

    private static DataTable GetData(string query)
    {
        string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlConnection con = new SqlConnection(constr))
        {
            using (SqlCommand cmd = new SqlCommand())
            {
                cmd.CommandText = query;
                using (SqlDataAdapter sda = new SqlDataAdapter())
                {
                    cmd.Connection = con;
                    sda.SelectCommand = cmd;
                    using (DataSet ds = new DataSet())
                    {
                        DataTable dt = new DataTable();
                        sda.Fill(dt);
                        return dt;
                    }
                }
            }
        }
    }

    protected void Show_Hide_OrdersGrid(object sender, EventArgs e)
    {
        ImageButton imgShowHide = (sender as ImageButton);
        GridViewRow row = (imgShowHide.NamingContainer as GridViewRow);
        if (imgShowHide.CommandArgument == "Show")
        {
            row.FindControl("pnlOrders").Visible = true;
            imgShowHide.CommandArgument = "Hide";
            imgShowHide.ImageUrl = "~/images/minus.png";
            string customerId = gvCustomers.DataKeys[row.RowIndex].Value.ToString();
            GridView gvOrders = row.FindControl("gvOrders") as GridView;
            BindOrders(customerId, gvOrders);
        }
        else
        {
            row.FindControl("pnlOrders").Visible = false;
            imgShowHide.CommandArgument = "Show";
            imgShowHide.ImageUrl = "~/images/plus.png";
        }
    }

    protected void Show_Hide_ProductsGrid(object sender, EventArgs e)
    {
        ImageButton imgShowHide = (sender as ImageButton);
        GridViewRow row = (imgShowHide.NamingContainer as GridViewRow);
        if (imgShowHide.CommandArgument == "Show")
        {
            row.FindControl("pnlProducts").Visible = true;
            imgShowHide.CommandArgument = "Hide";
            imgShowHide.ImageUrl = "~/images/minus.png";
            int orderId = Convert.ToInt32( (row.NamingContainer as GridView).DataKeys[row.RowIndex].Value);
            GridView gvProducts = row.FindControl("gvProducts") as GridView;
            BindProducts(orderId, gvProducts);
        }
        else
        {
            row.FindControl("pnlProducts").Visible = false;
            imgShowHide.CommandArgument = "Show";
            imgShowHide.ImageUrl = "~/images/plus.png";
        }
    }

    private void BindOrders(string customerId, GridView gvOrders)
    {
        gvOrders.ToolTip = customerId;
        gvOrders.DataSource = GetData(string.Format("select * from Orders where CustomerId='{0}'", customerId));
        gvOrders.DataBind();
    }
    private void BindProducts(int orderId, GridView gvProducts)
    {
        gvProducts.ToolTip = orderId.ToString();
        gvProducts.DataSource = GetData(string.Format("SELECT ProductId, ProductName FROM Products WHERE ProductId IN (SELECT ProductId FROM [Order Details] WHERE OrderId = '{0}')", orderId));
        gvProducts.DataBind();
    }

    protected void OnOrdersGrid_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
        GridView gvOrders = (sender as GridView);
        gvOrders.PageIndex = e.NewPageIndex;
        BindOrders(gvOrders.ToolTip, gvOrders);
    }

    protected void OnProductsGrid_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
        GridView gvProducts = (sender as GridView);
        gvProducts.PageIndex = e.NewPageIndex;
        BindOrders(gvProducts.ToolTip, gvProducts);
    }

using System.Data;
using System.Data.SqlClient;
using System.Configuration;

Nested GridView - GridView inside GridView ( Multiple Levels ) in ASP.Net

Company

Explore

Follow us

Contact Us