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:-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
| <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]) TotalOrdersFROM [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:-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| 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
Post a Comment