Home > ASP.Net, Javascript > Collepse and Expand Gridview Row (Master and Detail) using Javascript

Collepse and Expand Gridview Row (Master and Detail) using Javascript


Hi

try this exanple to Collepse and Expand Gridview Row (Master and Detail) using Javascript

Default.aspx

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>
    <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";
            }
            else
            {
                object.style.display = "";
                img.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>

Default.aspx.cs

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

Good Luck

Advertisements
  1. niza
    February 5, 2009 at 1:12 am

    hi,
    i use your code for my expand collapse gridview. i can run it successfully but when i click on + sign, i’ve got javascript error “Object expected”. please help

  2. sergeos
    February 7, 2009 at 11:18 am

    i can’t run this example 😦

  3. sergeos
    February 7, 2009 at 11:36 am

    ops! i’m running 🙂 all ok!

  4. yasserzaid
    February 7, 2009 at 2:08 pm

    Ok sergros

    Hope this solution helps you

    Best Regards

    YZ

  5. anukit
    July 20, 2009 at 12:31 pm

    Hi Yasser..
    Fantastic article.
    Am trying to implemet a hierarchial grid applicaiton.
    Your article was helpful and so far things are good.But when I think about implemeting paging inside my child grid I go blank.I have ran out of ideas.Any input would be helpful.

  6. anukit
    July 23, 2009 at 11:47 am

    have found a workaround with the help of datakeys of parent grid.Thanks.

  7. kraig
    December 9, 2009 at 10:50 pm

    i have been using this code for a while. thanks for the help. how would i implement expand all / collapse all functionality?

  8. yasserzaid
    January 15, 2010 at 10:18 pm

    @kraig , @anukit
    Thank you
    and i hope that my post could help you

    Best Regards,
    Yasser

    • kraig
      January 15, 2010 at 11:02 pm

      how could i implement a expand all and collapse all functionality to this code? thanks.

      • yasserzaid
        January 20, 2010 at 8:15 am

        @kraig it is better to do it in client side rather than in server side and i will try to give you a solution for your question

        Thank you

      • kraig
        January 20, 2010 at 1:28 pm

        yeah, i figured client-side is the way to do it. but i just can’t figure out how. i look forward to your solution. thanks!

  9. September 8, 2012 at 11:58 am

    Great, I have been very useful. Thanks for sharing.

  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: