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

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 />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.