Home > AJAX, ASP.Net > AJAX Collapsible Panel with Gridview (Master and Detail)

AJAX Collapsible Panel with Gridview (Master and Detail)


Hi

try this example:

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "<a href="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head runat="server">
    <title>Untitled Page</title>
    <link type="text/css" rel="Stylesheet" href="Assets/css/dialog.css" />
    <link type="text/css" rel="Stylesheet" href="Assets/css/pager.css" />
    <link type="text/css" rel="Stylesheet" href="Assets/css/grid.css" />
</head>
<body>
    <form id="form1" runat="server">
        <ajaxToolkit:ToolkitScriptManager ID="ScriptManager1" runat="server" />
        <asp:SqlDataSource ID="sqlDsCustomers" runat="server" ConnectionString="<%$ ConnectionStrings:Northwind %>"
            SelectCommand="SELECT [Customers].[CustomerID], [Customers].[CompanyName], COUNT([OrderID]) TotalOrders FROM [Customers] INNER JOIN [Orders] ON [Customers].[CustomerID]=[Orders].[CustomerID] Group By [Customers].[CustomerID], [Customers].[CompanyName]">
        </asp:SqlDataSource>
        <div id="dlg" class="dialog" style="width: 700px">
            <div class="header" style="cursor: default">
                <div class="outer">
                    <div class="inner">
                        <div class="content">
                            <h2>
                                Northwind: Orders By Customer</h2>
                        </div>
                    </div>
                </div>
            </div>
            <div class="body">
                <div class="outer">
                    <div class="inner">
                        <div class="content">
                            <asp: Panel CssClass="grid" ID="pnlCust" runat="server">
                                <asp:UpdatePanel ID="pnlUpdate" runat="server">
                                    <ContentTemplate>
                                        <asp: GridView Width="100%" AllowPaging="True" ID="gvCustomers" AutoGenerateColumns="False"
                                            DataSourceID="sqlDsCustomers" runat="server" ShowHeader="False" OnRowCreated="gvCustomers_RowCreated">
                                            <Columns>
                                                <asp:TemplateField>
                                                    <ItemTemplate>
                                                        <asp: Panel CssClass="group" ID="pnlCustomer" runat="server">
                                                            <asp:Image ID="imgCollapsible" CssClass="first" ImageUrl="~/Assets/img/plus.png"
                                                                Style="margin-right: 5px;" runat="server" /><span class="header">
                                                                    <%#Eval("CustomerID")%>
                                                                    :
                                                                    <%#Eval("CompanyName")%>
                                                                    (<%#Eval("TotalOrders")%>
                                                                    Orders) </span>
                                                        </asp: Panel>
                                                        <asp:SqlDataSource ID="sqlDsOrders" runat="server" ConnectionString="<%$ ConnectionStrings:Northwind %>"
                                                            SelectCommand="SELECT [OrderID], [OrderDate], [RequiredDate], [Freight], [ShippedDate] FROM [Orders] WHERE ([CustomerID] = @CustomerID)">
                                                            <SelectParameters>
                                                                <asp: Parameter Name="CustomerID" Type="String" DefaultValue="" />
                                                            </SelectParameters>
                                                        </asp:SqlDataSource>
                                                        <asp: Panel Style="margin-left: 20px; margin-right: 20px" ID="pnlOrders" runat="server">
                                                            <asp:GridView AutoGenerateColumns="False" CssClass="grid" ID="gvOrders" DataSourceID="sqlDsOrders"
                                                                runat="server" EnableViewState="False">
                                                                <RowStyle CssClass="row" />
                                                                <AlternatingRowStyle CssClass="altrow" />
                                                                <Columns>
                                                                    <asp:TemplateField>
                                                                        <ItemTemplate>
                                                                            <%# Container.DataItemIndex + 1 %>
                                                                        </ItemTemplate>
                                                                        <ItemStyle CssClass="rownum" />
                                                                    </asp:TemplateField>
                                                                    <asp:BoundField HeaderText="Order ID" DataField="OrderID" >
                                                                        <ItemStyle Width="80px" />
                                                                    </asp:BoundField>
                                                                    <asp:BoundField HeaderText="Date Ordered" DataField="OrderDate" DataFormatString="{0:dd/MM/yyyy}" >
                                                                        <ItemStyle Width="100px" />
                                                                    </asp:BoundField>
                                                                    <asp:BoundField HeaderText="Date Required" DataField="RequiredDate" DataFormatString="{0:dd/MM/yyyy}" >
                                                                        <ItemStyle Width="110px" />
                                                                    </asp:BoundField>
                                                                    <asp:BoundField HeaderText="Freight" DataField="Freight" DataFormatString="{0:c}" >
                                                                        <ItemStyle HorizontalAlign="Right" Width="50px" />
                                                                    </asp:BoundField>
                                                                    <asp:BoundField HeaderText="Date Shipped" DataField="ShippedDate" DataFormatString="{0:dd/MM/yyyy}" >
                                                                        <ItemStyle Width="100px" />
                                                                    </asp:BoundField>
                                                                </Columns>
                                                            </asp:GridView>
                                                        </asp: Panel>
                                                        <ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server" TargetControlID="pnlOrders"
                                                            CollapsedSize="0" Collapsed="True" ExpandControlID="pnlCustomer" CollapseControlID="pnlCustomer"
                                                            AutoCollapse="False" AutoExpand="False" ScrollContents="false" ImageControlID="imgCollapsible"
                                                            ExpandedImage="~/Assets/img/minus.png" CollapsedImage="~/Assets/img/plus.png"
                                                            ExpandDirection="Vertical" />
                                                    </ItemTemplate>
                                                </asp:TemplateField>
                                            </Columns>
                                        </asp:GridView>
                                    </ContentTemplate>
                                </asp:UpdatePanel>
                            </asp: Panel>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer">
                <div class="outer">
                    <div class="inner">
                        <div class="content">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

Default.aspx.cs

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{
    protected void gvCustomers_RowCreated(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            SqlDataSource ctrl = e.Row.FindControl("sqlDsOrders") as SqlDataSource;
            if (ctrl != null && e.Row.DataItem != null)
            {
                ctrl.SelectParameters["CustomerID"].DefaultValue = ((DataRowView)e.Row.DataItem)["CustomerID"].ToString();
            }
        }
    }
}

in web.config

<connectionStrings>
  <add name="Northwind" connectionString="Data Source=.;Initial Catalog=Northwind;Integrated Security=True" providerName="System.Data.SqlClient"/>
 </connectionStrings>

Hope it helps

Good Luck

Advertisements
  1. December 29, 2008 at 6:06 pm

    fYnyUf Thanks for good post

  2. yasserzaid
    December 30, 2008 at 6:29 pm

    You are welcome Johnny

    Hope it help you

    you can also check this post to collapse and expand Gridview row using Javascript
    https://yasserzaid.wordpress.com/2008/12/30/collepse-and-expand-gridview-row-master-and-detail-using-javascript/

    Good Luck

  3. Mhmd
    January 4, 2009 at 11:46 am

    Thanks For your effort
    it was helpful

  4. yasserzaid
    January 15, 2009 at 9:10 pm

    Thank you Mhmd for your comment

    Hope my post helps you

    Good Luck

  5. Ike
    February 5, 2009 at 3:04 pm

    Great stuff.

    Do you have an example on inserting new rows using the footer template in the child gridview?

  6. Paul
    June 8, 2012 at 3:33 am

    Where are the CSS Files ?

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: