Home > ASP.Net > Expand and Collapse row of a Gridview

Expand and Collapse row of a Gridview


Hi all

Try this example using Northwind Database to Expand and Collapse row of a Gridview for Master and Details:

In Page Design :-


<head runat="server">
    <title>Untitled Page</title>
    <script language="javascript" type="text/javascript">
        function OpenTable(table, img)
        {
            object = document.getElementById(table);
            if (object.style.display=="")
            {
                object.style.display = "none";
                img.src="plus.gif" mce_src="plus.gif";
            }
            else
            {
                object.style.display = "";
                img.src="minus.gif" mce_src="minus.gif";
            }
        }
        </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
         <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="False" DataKeyNames="CustomerID"
            DataSourceID="sqlDsCustomers" AllowPaging="True" OnRowCreated="gvCustomers_RowCreated" CellPadding="4" ForeColor="#333333" ShowHeader="False">
            <Columns>
                <asp:TemplateField HeaderText="CompanyName" SortExpression="CompanyName">

                    <ItemTemplate>
                    <img src="plus.gif" onclick='OpenTable("<%# CreateID(Eval("CustomerID"))%>", this);'/>
                   <asp:Label ID="Label1" runat="server" Text='<%# Bind("CompanyName") %>'></asp:Label>
                        Orders (<asp:Label ID="Label2" runat="server" Text='<%# Eval("TotalOrders") %>'></asp:Label>)<table width=100% style="display:none;" id='<%# CreateID(Eval("CustomerID"))%>'>
                    <tr>
                    <td>
                     <asp:SqlDataSource ID="sqlDsOrders" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                    SelectCommand="SELECT [OrderID], [OrderDate], [RequiredDate], [Freight], [ShippedDate] FROM [Orders] WHERE ([CustomerID] = @CustomerID)">
                    <SelectParameters>
                        <asp: Parameter Name="CustomerID" Type="String" DefaultValue="" />
                    </SelectParameters>
                </asp:SqlDataSource>
                <asp:GridView AutoGenerateColumns="False" CssClass="grid" ID="gvOrders" DataSourceID="sqlDsOrders"
                        runat="server" EnableViewState="False" CellPadding="4" ForeColor="#333333">
                        <RowStyle CssClass="row" BackColor="#EFF3FB" />
                        <AlternatingRowStyle CssClass="altrow" BackColor="White" />
                        <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>
                    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                    <EditRowStyle BackColor="#2461BF" />
                    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
                    <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                    </asp:GridView>
                    </td>
                    </tr>
                    </table>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
            <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <RowStyle BackColor="#EFF3FB" />
            <EditRowStyle BackColor="#2461BF" />
            <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
            <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
            <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <AlternatingRowStyle BackColor="White" />
        </asp:GridView>
        <asp:SqlDataSource ID="sqlDsCustomers" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            ProviderName="<%$ ConnectionStrings:NorthwindConnectionString.ProviderName %>"
            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>
    </form>
</body>
</html>

and in code behind :-


using System;
using System.Data;
using System.Configuration;
using System.Collections;
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
{
    public string CreateID(object value)
    {
        return "Table_" + value.ToString();
    }

    protected void Page_Load(object sender, EventArgs e)
    {

    }

    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();
            }
        }
    }
}

hope this helps

Good Luck

Advertisements
Categories: ASP.Net
  1. kv Reddy
    April 18, 2012 at 8:41 pm

    helped me lot., thank you so much..

  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: