ASP.NET - Collapsable inside nested gridview

I need to implement a functionality where one of the columns of the gridview would contain '+'.

Clicking on the '+' sign would expand the panel and show the related data of that row.

I know, i need to use AJAX collapsable Panel, but not sure how to use it wrt the scenario mentioned.

please guide me!

Follow this link-

http://www.codeproject.com/KB/ajax/ExpandPanelGridView.aspx

• http://www.codeproject.com/KB/ajax/ExpandPanelGridView/ExpandPanelGridView_src.zip

HI

HI

No. you don't need to use AJAX Collapsible Panel.

try this


1.Create a folder in your project called "Images" and put two images

arrowright.jpg and arrowdown.jpg which are arrows pointing to the defined directions.

2.Create a ConnectionString named "NorthWindConnectionString" in the web.config pointing to the Northwind DB in your system

In ASPX Page

<asp:GridView ID="GridView1" runat="server"
AllowPaging="True"
AutoGenerateColumns="False"
DataKeyNames="CustomerID"
DataSourceID="SqlDataSource1"
PageSize="20"
OnRowDataBound="GridView1_RowDataBound" 
CellPadding="4" 
ForeColor="#333333" 
GridLines="None">
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<a href="javascript:ShowChildGrid('div<%# Eval("CustomerID") %>');">
<img id="imgdiv<%# Eval("CustomerID") %>" 
alt="Click to show/hide orders" 
border="0" 
src="Images/arrowright.jpg"/>
</a>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" />
<asp:BoundField DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName" />
<asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" />
<asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
<asp:BoundField DataField="PostalCode" HeaderText="PostalCode" SortExpression="PostalCode" />
<asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" />
<asp:TemplateField>
<ItemTemplate>
</td>
</tr>
<tr>
<td colspan="100%">
<div id="div<%# Eval("CustomerID") %>" style="display:none;position:relative;left:25px;" >
<asp:GridView ID="GridView2" runat="server"
AutoGenerateColumns="false"
DataKeyNames="OrderID"
EmptyDataText="No orders for this customer."
Width="80%" 
CellPadding="4" 
ForeColor="#333333" 
GridLines="None">
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<Columns>
<asp:BoundField DataField="OrderDate" HeaderText="Order Date" DataFormatString="{0:MMM-dd-yyyy}" HtmlEncode="False" />
<asp:BoundField DataField="ShippedDate" HeaderText="Shipped Date" DataFormatString="{0:MMM-dd-yyyy}" HtmlEncode="False" />
<asp:BoundField DataField="ShipCity" HeaderText="Shipped To" />
</Columns>
</asp:GridView>
</div>
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
</Columns>        
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
ConnectionString="<%$ ConnectionStrings:NorthWindConnectionString %>"
SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [Address], [City], [PostalCode], [Phone] FROM [Customers]">
</asp:SqlDataSource>

In ASPX.CS Page

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if(e.Row.RowType == DataControlRowType.DataRow)
{
GridView gv = (GridView)e.Row.FindControl("GridView2");
SqlDataSource dbSrc = new SqlDataSource();
dbSrc.ConnectionString = ConfigurationManager.ConnectionStrings["NorthWindConnectionString"].ConnectionString;
dbSrc.SelectCommand = "SELECT * FROM Orders WHERE CustomerID = '" + GridView1.DataKeys[e.Row.RowIndex].Value + "' ORDER BY OrderDate";
gv.DataSource = dbSrc;
gv.DataBind();
}
}

Put this JavaScript in the header of your ASPX Page

function ShowChildGrid(obj)
{
var div = document.getElementById(obj);
var img = document.getElementById('img' + obj);
var theFlag = div.style.display == "none";
div.style.display = (theFlag) ? "inline" : "none";
img.src = (theFlag) ? "Images/arrowdown.jpg" : "Images/arrowright.jpg";
}

I have done a similar example in datalist, In template column place a hyperlink with text Read More

Place the content that you want to show on hyperlink click in DIV,

In the below pass the DIV ID to JS function to have a Collpsable effect,

i have used JQuery to show and hide on click of Hyperlink, it has got a smooth effect

Here is the function


Try this approach and let me know

Hi,

One is http://www.codeproject.com/KB/webforms/CollapsibleGridControl.aspx

Other one :
http://www.codeproject.com/KB/aspnet/CollapsiblePaneInGridView.aspx

http://www.c-sharpcorner.com/UploadFile/raghavau/3571/