Expand Collapse Nested Gridview in ASP.NET

Expand Collapse Nested Gridview in ASP.NET : In this article we show you how to bind nested gridview in asp.net. Bind Nested GridView from two different tables with Expand Collapse.

In previous articles we explained Search Location in Google Map API, WPF Multithreading Backgroundworker, Auto Refresh Page Every 5 Seconds, Color Picker using JavaScript, Hindi TextBox using Google Transliterate API, Image Gallery, Responsive Slider, and many more. Now we will move on Expand Collapse Nested Gridview in ASP.NET.

Following are the steps to create expand collapse nested gridview in ASP.NET

ADD SCRIPT IN HEADER

<script language="javascript" type="text/javascript">
    function divexpandcollapse(divname) {
        var div = document.getElementById(divname);
        var img = document.getElementById('img' + divname);
        if (div.style.display == "none") {
            div.style.display = "inline";
            img.src = "../Images/minus.gif";
        } else {
            div.style.display = "none";
            img.src = "../Images/plus.gif";
        }
    }
    function divexpandcollapseChild(divname) {
        var div1 = document.getElementById(divname);
        var img = document.getElementById('img' + divname);
        if (div1.style.display == "none") {
            div1.style.display = "inline";
            img.src = "../Images/minus.gif";
        } else {
            div1.style.display = "none";
            img.src = "../Images/plus.gif"; ;
        }
    }
</script>

ADD HTML MARKUP

<div style="font-size: 30px; padding: 10px; text-align: center; font-family: Aharoni;">
    Create Dynamic Nested GridView In ASP.NET- Code Scratcher
</div>
<hr />
<div style="width: 900px; margin: 0 auto;">
    <div style="float: left; width: 300px;">
        <span><b>Table Data 1</b></span><br />
        <br />
        <asp:GridView ID="gvOne" runat="server" CellPadding="2">
        </asp:GridView>
    </div>
    <div style="float: left; width: 600px;">
        <span><b>Table Data 2</b></span><br />
        <br />
        <asp:GridView ID="gvTwo" runat="server" CellPadding="2">
        </asp:GridView>
    </div>
    <div style="clear: both;">
        <br />
    </div>
</div>
<hr />
<br />
<div style="width: 800px; margin: 0 auto; text-align:center;">
    <asp:Button ID="btnBindGrid" runat="server" Text="Create Nested GridView" Font-Size="20px"
        Width="250px" OnClick="btnBindGrid_Click" />
    <br />
    <br />
    <asp:Label ID="lblMsg" runat="server" Visible="false">
        <span style="font-size:25px;"><b>Nested Grid view generated table Data</b></span></asp:Label><br />
    <br />
    <asp:GridView ID="gvProduct" runat="server" AutoGenerateColumns="false" Width="800px"
        OnRowDataBound="gvProduct_RowDataBound">
        <Columns>
            <asp:TemplateField ItemStyle-Width="20px">
                <ItemTemplate>
                    <a href="JavaScript:divexpandcollapse('div<%# Eval("PRCODE") %>');">
                        <img id="imgdiv<%# Eval("PRCODE") %>" width="9px" border="1" src="../Images/plus.gif"
                            alt="" /></a>
                </ItemTemplate>
                <ItemStyle Width="20px" VerticalAlign="Middle"></ItemStyle>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Product Code">
                <ItemTemplate>
                    <asp:Label ID="lblPrCode" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,
                                                                "PRCODE") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Product Name">
                <ItemTemplate>
                    <asp:Label ID="lblPrName" runat="server" Text='<%# Eval("PRNAME") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Product Type">
                <ItemTemplate>
                    <asp:Label ID="Label12" runat="server" Text='<%# Eval("PRTYPE").ToString() %>'></asp:Label>
                    </td>
                    <tr>
                        <td colspan="100%">
                            <div id="div<%# Eval("PRCODE") %>" style="overflow: auto; display: none; position: relative;
                                left: 15px; overflow: auto">
                                <asp:GridView ID="gvAst" runat="server" Width="760px" AutoGenerateColumns="false">
                                    <Columns>
                                        <asp:BoundField DataField="ASTCODE" HeaderText="Asset Code" />
                                        <asp:BoundField DataField="BRAND" HeaderText="Brand" />
                                        <asp:BoundField DataField="SUPPLIER" HeaderText="Supplier" />
                                        <asp:BoundField DataField="INVOICEDATE" HeaderText="Purchase Date" DataFormatString="{0:dd-MM-yyyy}" />
                                        <asp:BoundField DataField="AMOUNT" ItemStyle-CssClass="cls1" HeaderText="Amount(RS.)" />
                                    </Columns>
                                    <HeaderStyle BackColor="#95B4CA" ForeColor="White" />
                                </asp:GridView>
                            </div>
                        </td>
                    </tr>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
        <HeaderStyle BackColor="#0063A6" ForeColor="White" />
    </asp:GridView>
</div>

ADD CODE-BEHIND FILE

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

namespace Nested_Gridview_Concept
{
    public partial class Nesteed_Gridview : System.Web.UI.Page
    {
        DataTable dtProduct = new DataTable();
        DataTable dtAssets = new DataTable();
        protected void Page_Load(object sender, EventArgs e)
        {
            //Product Table...........
            dtProduct.Columns.Add("PRCODE", typeof(string));
            dtProduct.Columns.Add("PRNAME", typeof(string));
            dtProduct.Columns.Add("PRTYPE", typeof(string));
            dtProduct.Rows.Add("A0001", "AC", "Electronic");
            dtProduct.Rows.Add("B0001", "Bike", "Vehicle");
            dtProduct.Rows.Add("T0001", "Table", "Furniture");
            dtProduct.Rows.Add("P0001", "Printer", "Electronic");

            //Assets Table...............
            dtAssets.Columns.Add("ASTCODE", typeof(string));
            dtAssets.Columns.Add("PRCODE", typeof(string));
            dtAssets.Columns.Add("BRAND", typeof(string));
            dtAssets.Columns.Add("SUPPLIER", typeof(string));
            dtAssets.Columns.Add("INVOICEDATE", typeof(DateTime));
            dtAssets.Columns.Add("AMOUNT", typeof(int));
            dtAssets.Rows.Add("AC0001", "A0001", "LG", "XYZ Electronics", DateTime.Now, 25000);
            dtAssets.Rows.Add("AC0002", "A0001", "OGeneral", "XYZ Electronics", DateTime.Now, 45000);
            dtAssets.Rows.Add("BI0001", "B0001", "Bajaj", "Amin Bajaj", DateTime.Now, 55000);
            dtAssets.Rows.Add("TA0001", "T0001", "Godrej", "ABC Furniture", DateTime.Now, 3500);
            dtAssets.Rows.Add("PR0001", "P0001", "Canon", "PQR Electronics", DateTime.Now, 7500);
            dtAssets.Rows.Add("PR0002", "P0001", "LG", "XYZ Electronics", DateTime.Now, 4000);

            if (!IsPostBack)
            {
                //Product Table Bind..........
                gvOne.DataSource = dtProduct;
                gvOne.DataBind();

                //Product Table Bind..........
                gvTwo.DataSource = dtAssets;
                gvTwo.DataBind();
            }
        }

        protected void gvProduct_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                Label lblPrCode = (Label)e.Row.FindControl("lblPrCode");
                GridView gvAst = (GridView)e.Row.FindControl("gvAst");
                DataTable dtNew = dtAssets.Clone();
                foreach (DataRow row in dtAssets.Rows)
                {
                    if (row["PRCODE"].ToString()  == lblPrCode.Text)
                        dtNew.Rows.Add(row.ItemArray);
                }
                gvAst.DataSource = dtNew;
                gvAst.DataBind();
            }

        }

        protected void btnBindGrid_Click(object sender, EventArgs e)
        {
            lblMsg.Visible = true; 
            gvProduct.DataSource = dtProduct;
            gvProduct.DataBind();
        }
    }
}

RUN PROJECT AND CHECK FINAL OUTPUT

Expand Collapse Nested Gridview in ASP.NET – Output

Incoming search terms

Expand Collapse Nested Gridview in ASP.NET, Nested GridView in ASP.NET, ASP.Net Nested GridViews, Expand Collapsible Nested GridView, GridView inside DetailsView with expand collapse in ASP.NET, Gridview inside gridview in asp.net, How to add Expand/Collapse to a nested Gridview, Nested GridView Example In Asp.Net With Expand Collapse, Expand/Collapse nested gridview, Nested Gridview with Expand/Collapse Functionality, Nested GridView in Show/Hide effect using C# in Asp.Net, Create Nested Gridview with Expand and Collapse features, A Simple Example Of Nested GridView With Expand, Collapase.

The post Expand Collapse Nested Gridview in ASP.NET appeared first on Code Scratcher.