You must Sign In to post a response.
Category: ASP.NET
#263837
HI
Check out the below link
http://www.developer.com/net/asp/article.php/3633561
Thanks -- Vj
http://dotnetvj.blogspot.com
Thanks -- Vijaya Kadiyala
http://www.DotNetVJ.com
Microsoft MVP
Check out the below link
http://www.developer.com/net/asp/article.php/3633561
Thanks -- Vj
http://dotnetvj.blogspot.com
Thanks -- Vijaya Kadiyala
http://www.DotNetVJ.com
Microsoft MVP
#263919
Live example:- http://www.giswiz.com/nested_gridview_dropdown/
I have created an extremely simple nested GridView that uses some javascript to create the dropdown effect. I use the nested GridView to display relational data to the rows in the main GridView. I am hoping to get replies with links to other examples of how to display relational data with the GridViews and I wanted to help get this out to the community because it was so simple to implement. Most of all i would like to hear about how this can be improved upon...
What makes this different is that the nested GridView here is displayed beneath the corresponding row as opposed to it being displayed in the last column of the main GridView as in all the examples I've seen. To get this effect I simply injected some HTML (starting a line 29) to end the current row and create a new row. The nested GridView is then placed inside a <DIV> tag where the display of that <DIV> is controled by Javascript. Each <DIV> is assigned a unique ID that corresponds to the main GridView's rowID and that is passed to the javascript to control the opening and closing of the nested GridView. I have even created a double nested GridView where a third GridView is nested inside the first nested GridView.
See code for details or post a question. I created this entirely from scratch and did not see another example of it after searching Google for 30 minutes.
GridView Code:
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False" DataKeyNames="CustomerID"
DataSourceID="SqlDataSource1" OnRowDataBound="gv_RowDataBound"
AllowPaging="True" PageSize="20" >
<HeaderStyle CssClass="dataTable" />
<RowStyle CssClass="dataTable" />
<AlternatingRowStyle CssClass="dataTableAlt" />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<a href="javascript:switchViews('div<%# Eval("CustomerID") %>', 'one');">
<img id="imgdiv<%# Eval("CustomerID") %>" alt="Click to show/hide orders" border="0" src="Images/expand_button_white.jpg" />
</a>
</ItemTemplate>
<AlternatingItemTemplate>
<a href="javascript:switchViews('div<%# Eval("CustomerID") %>', 'alt');">
<img id="imgdiv<%# Eval("CustomerID") %>" alt="Click to show/hide orders" border="0" src="Images/expand_button_white_alt.jpg" /> </a>
</AlternatingItemTemplate>
</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" Width="80%"
AutoGenerateColumns="false" DataKeyNames="OrderID"
EmptyDataText="No orders for this customer." >
<HeaderStyle CssClass="dataTable" />
<AlternatingRowStyle CssClass="dataTableAlt" />
<RowStyle CssClass="dataTable" />
<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:NorthwindConnectionString2 %>"
SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [Address], [City], [PostalCode], [Phone] FROM [Customers]">
</asp:SqlDataSource>
The code to populate the nested GridView that is called on the main GridView's OnRowDataBound event (this code readily available from one of the many websites demonstrating how to do a nested GridView):
Protected Sub gv_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.DataRow Then
Dim gv As GridView = e.Row.FindControl("GridView2")
Dim dbSrc As New SqlDataSource
dbSrc.ConnectionString = ConfigurationManager.ConnectionStrings("NorthwindConnectionString2").ConnectionString
dbSrc.SelectCommand = "SELECT * FROM Orders WHERE CustomerID = '" & _
e.Row.DataItem("CustomerID").ToString & "' ORDER BY OrderDate"
gv.DataSource = dbSrc
gv.DataBind()
End If
End Sub
Here is the simple javascript to open and close the nested GridView:
function switchViews(obj,row)
{
var div = document.getElementById(obj);
var img = document.getElementById('img' + obj);
if (div.style.display=="none")
{
div.style.display = "inline";
if (row=='alt')
{
img.src="Images/expand_button_white_alt_down.jpg" mce_src="Images/expand_button_white_alt_down.jpg";
}
else
{
img.src="Images/Expand_Button_white_Down.jpg" mce_src="Images/Expand_Button_white_Down.jpg";
}
img.alt = "Close to view other customers";
}
else
{
div.style.display = "none";
if (row=='alt')
{
img.src="Images/Expand_button_white_alt.jpg" mce_src="Images/Expand_button_white_alt.jpg";
}
else
{
img.src="Images/Expand_button_white.jpg" mce_src="Images/Expand_button_white.jpg";
}
img.alt = "Expand to show orders";
}
}
I have created an extremely simple nested GridView that uses some javascript to create the dropdown effect. I use the nested GridView to display relational data to the rows in the main GridView. I am hoping to get replies with links to other examples of how to display relational data with the GridViews and I wanted to help get this out to the community because it was so simple to implement. Most of all i would like to hear about how this can be improved upon...
What makes this different is that the nested GridView here is displayed beneath the corresponding row as opposed to it being displayed in the last column of the main GridView as in all the examples I've seen. To get this effect I simply injected some HTML (starting a line 29) to end the current row and create a new row. The nested GridView is then placed inside a <DIV> tag where the display of that <DIV> is controled by Javascript. Each <DIV> is assigned a unique ID that corresponds to the main GridView's rowID and that is passed to the javascript to control the opening and closing of the nested GridView. I have even created a double nested GridView where a third GridView is nested inside the first nested GridView.
See code for details or post a question. I created this entirely from scratch and did not see another example of it after searching Google for 30 minutes.
GridView Code:
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False" DataKeyNames="CustomerID"
DataSourceID="SqlDataSource1" OnRowDataBound="gv_RowDataBound"
AllowPaging="True" PageSize="20" >
<HeaderStyle CssClass="dataTable" />
<RowStyle CssClass="dataTable" />
<AlternatingRowStyle CssClass="dataTableAlt" />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<a href="javascript:switchViews('div<%# Eval("CustomerID") %>', 'one');">
<img id="imgdiv<%# Eval("CustomerID") %>" alt="Click to show/hide orders" border="0" src="Images/expand_button_white.jpg" />
</a>
</ItemTemplate>
<AlternatingItemTemplate>
<a href="javascript:switchViews('div<%# Eval("CustomerID") %>', 'alt');">
<img id="imgdiv<%# Eval("CustomerID") %>" alt="Click to show/hide orders" border="0" src="Images/expand_button_white_alt.jpg" /> </a>
</AlternatingItemTemplate>
</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" Width="80%"
AutoGenerateColumns="false" DataKeyNames="OrderID"
EmptyDataText="No orders for this customer." >
<HeaderStyle CssClass="dataTable" />
<AlternatingRowStyle CssClass="dataTableAlt" />
<RowStyle CssClass="dataTable" />
<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:NorthwindConnectionString2 %>"
SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [Address], [City], [PostalCode], [Phone] FROM [Customers]">
</asp:SqlDataSource>
The code to populate the nested GridView that is called on the main GridView's OnRowDataBound event (this code readily available from one of the many websites demonstrating how to do a nested GridView):
Protected Sub gv_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.DataRow Then
Dim gv As GridView = e.Row.FindControl("GridView2")
Dim dbSrc As New SqlDataSource
dbSrc.ConnectionString = ConfigurationManager.ConnectionStrings("NorthwindConnectionString2").ConnectionString
dbSrc.SelectCommand = "SELECT * FROM Orders WHERE CustomerID = '" & _
e.Row.DataItem("CustomerID").ToString & "' ORDER BY OrderDate"
gv.DataSource = dbSrc
gv.DataBind()
End If
End Sub
Here is the simple javascript to open and close the nested GridView:
function switchViews(obj,row)
{
var div = document.getElementById(obj);
var img = document.getElementById('img' + obj);
if (div.style.display=="none")
{
div.style.display = "inline";
if (row=='alt')
{
img.src="Images/expand_button_white_alt_down.jpg" mce_src="Images/expand_button_white_alt_down.jpg";
}
else
{
img.src="Images/Expand_Button_white_Down.jpg" mce_src="Images/Expand_Button_white_Down.jpg";
}
img.alt = "Close to view other customers";
}
else
{
div.style.display = "none";
if (row=='alt')
{
img.src="Images/Expand_button_white_alt.jpg" mce_src="Images/Expand_button_white_alt.jpg";
}
else
{
img.src="Images/Expand_button_white.jpg" mce_src="Images/Expand_button_white.jpg";
}
img.alt = "Expand to show orders";
}
}
Thanks & Regards
G.Renganathan
Nothing is mine ,Everything is yours!!!
#282787
Hello i do as it listed but when i click the plus it'll will give me on the status bar done with error and the second grid didn't appear
Thanks for your help
Thanks for your help
Return to Return to Discussion Forum