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” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml” >
<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
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
Comment by niza — February 5, 2009 @ 1:12 am
i can’t run this example
Comment by sergeos — February 7, 2009 @ 11:18 am
ops! i’m running
all ok!
Comment by sergeos — February 7, 2009 @ 11:36 am
Ok sergros
Hope this solution helps you
Best Regards
YZ
Comment by yasserzaid — February 7, 2009 @ 2:08 pm