Greetings members,
i would like you to help me with a problem that i have. I have a gridview and in each row of the gridview there is a nested gridview. What i want i to insert paging functionality, to the nested Gridview control.
Thanks in advance,
Alexander
Jump to PostCan you post your code
Can you post your code
here is the .aspx code that i have fore the gridview:
<asp:GridView ID="ItemsGrid" runat="server" AutoGenerateColumns="False"
CellPadding="4" ForeColor="#333333" GridLines="None"
onrowdatabound="ItemsGrid_RowDataBound" Width="466px">
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<Columns>
<asp:TemplateField HeaderText="Expand Details">
<ItemTemplate>
<asp:HyperLink ID="ExpandCollapse" runat="server" Text="+"></asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Items">
<ItemTemplate>
<asp:Label ID="lblStatTitle" runat="server"></asp:Label>
<asp:Panel ID="ItemDetails" runat="server" Style="display:none">
<asp:GridView ID="SubGridView" runat="server" AutoGenerateColumns="true" AllowPaging="true" PageSize="5" OnPageIndexChanging="SubGrid_PageIndexChanging">
<Columns>
</Columns>
</asp:GridView>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#999999" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</asp:GridView>what i would like to do is to add the paging functionality to the 'Subgrid' Gridview.
On ASPX
<!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 type="text/javascript" language="javascript" src="JScript.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:LocalConnectionString %>"
SelectCommand="SELECT * FROM [tablename]"></asp:SqlDataSource>
<br />
<br />
<br />
<asp:GridView ID="GridView1" runat="server" AllowPaging="True"
AutoGenerateColumns="False" DataKeyNames="ID" 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("ID") %>');">
<img id="imgdiv<%# Eval("ID") %>"
alt="Click to show/hide orders"
border="0"
src="Images/arrowright.jpg"/>
</a>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="a" HeaderText="a"
SortExpression="a" />
<asp:BoundField DataField="b" HeaderText="b"
SortExpression="b" />
<asp:BoundField DataField="c" HeaderText="c"
SortExpression="c" />
<asp:BoundField DataField="ID" HeaderText="ID" ReadOnly="True"
SortExpression="ID" />
<asp:TemplateField>
<ItemTemplate>
</td>
</tr>
<tr>
<td colspan="100%">
<div id="div<%# Eval("ID") %>" style="display:none;position:relative;left:25px;" >
<asp:GridView ID="GridView2" runat="server"
AllowPaging="true"
AutoGenerateColumns="false"
DataKeyNames="CustomerId"
Width="80%"
CellPadding="4"
ForeColor="#333333"
GridLines="None"
PageSize="5"
OnPageIndexChanging="GridView2_PageIndexChanging">
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<Columns>
<asp:BoundField DataField="Alias" HeaderText="CustomerName"
SortExpression="Alias" />
<asp:BoundField DataField="Code" HeaderText="Code" SortExpression="Code" />
<asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description" />
<asp:BoundField DataField="Fee" HeaderText="Fee"
SortExpression="Fee" />
</Columns>
</asp:GridView>
</div>
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<br />
<br />
<br />
</div>
</form>
</body>
</html>On ASPX.CS
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) {
if (e.Row.RowType == DataControlRowType.DataRow) {
BindGridToDS(GridView1.DataKeys[e.Row.RowIndex].Value.ToString(), (GridView)e.Row.FindControl("GridView2"));
}
}
protected void GridView2_PageIndexChanging(object sender, GridViewPageEventArgs e) {
GridView gvwChild = ((GridView)sender);
GridViewRow gvRowParent = ((GridView)sender).Parent.Parent as GridViewRow;
gvwChild.PageIndex = e.NewPageIndex;
BindGridToDS(GridView1.DataKeys[gvRowParent.RowIndex].Value.ToString(), gvwChild);
//show the div again after postback
string strDIVID = "div" + GridView1.DataKeys[gvRowParent.RowIndex].Value.ToString();
string cScript = "<script type=\"text/javascript\">ShowChildGrid('" + strDIVID + "');</script>";
ClientScript.RegisterStartupScript(typeof(Page), "clientscript", cScript);
}
private void BindGridToDS(string strCustomerID, GridView gv) {
SqlDataSource dbSrc = new SqlDataSource();
dbSrc.ConnectionString = ConfigurationManager.ConnectionStrings["LocalConnectionString"].ConnectionString;
dbSrc.SelectCommand = "SELECT * FROM Customer";// WHERE ProviderID = '" + strCustomerID + "' ORDER BY created";
gv.DataSource = dbSrc;
gv.DataBind();
}On the JS File JScript.js
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.jpeg" : "Images/arrowright.jpeg";
}Dont forget to add two images arrowright.jpeg and arrowdown.jpeg to an Images folder in your Solution.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.