retain visible property of control through paging of nested gridview

Question

I have a grid view within a grid view. When I click on edit of parent grid view the child grid view displays a checkbox. When I click on next page button of child grid view the controls that were made visible become invisible again. This is not the behaviour I require. I would like the controls that are made visible by clicking edit to remain visible through paging of the child grid view while parent grid view is in edit mode.

My markup:

<asp:GridView 
    ID="grdImages" 
    runat="server"
    AllowPaging="true"
    ShowFooter="true"
    PageSize="5"
    AutoGenerateColumns="false"
    OnPageIndexChanging="grdImages_PageIndexChanging"
    OnRowCancelingEdit="grdImages_RowCancelingEdit"
    OnRowCommand="grdImages_RowCommand"
    OnRowEditing="grdImages_RowEditing"
    OnRowUpdating="grdImages_RowUpdating"
    OnRowDeleting="grdImages_RowDeleting" 
    EmptyDataText="No Data Available at this Time" 
    OnRowDataBound="grdImages_RowDataBound"  
                DataKeyNames="productID" RowStyle-VerticalAlign="Top" RowStyle-HorizontalAlign="Center">
    <AlternatingRowStyle BackColor="White" ForeColor="#284775"></AlternatingRowStyle>        


    <Columns>

        <asp:TemplateField AccessibleHeaderText="Product ID" HeaderText="Product ID" FooterText="Product ID">
            <ItemTemplate>
                <asp:Label ID="lblProdId" runat="server" Text='<%# Eval("ProductId") %>' ></asp:Label>
            </ItemTemplate>
            <FooterTemplate>
                <asp:DropDownList ID="lstAddProdId" runat="server"  AppendDataBoundItems="true" >
                    <asp:ListItem>Select a product</asp:ListItem>
                </asp:DropDownList>
            </FooterTemplate>
        </asp:TemplateField>
        <asp:TemplateField AccessibleHeaderText="Product Main Image" FooterText="Product Main Image" HeaderText="Product Main Image">
            <ItemTemplate>
                <asp:Label ID="lblMainImgId" runat="server" Text='<%# Eval("ImageId") %>' ></asp:Label> &nbsp;
                <asp:Label ID="lblMainImgName" runat="server" Text='<%# Eval("ImageName") %>' ></asp:Label> <br />
                <asp:Image ID="imgMain" runat="server" Height="250" Width="250" ImageUrl='<%# Eval("ImagePath") %>' />
            </ItemTemplate>
            <EditItemTemplate>
                <asp:Label runat="server" Font-Bold="true" Text="Current main image" ></asp:Label> <br />
                <asp:Image ID="imgMain" runat="server" Height="250" Width="250" ImageUrl='<%# Eval("ImagePath") %>' /> <br />
                <asp:Label runat="server" Font-Bold="true" Text="Upload a new image to replace the current main image." ></asp:Label> <br />
                <asp:FileUpload ID="flupEditMain" runat="server" />
            </EditItemTemplate>
            <FooterTemplate>
                <asp:FileUpload ID="flupMain" runat="server" AllowMultiple="false" />
            </FooterTemplate>
        </asp:TemplateField>
        <asp:TemplateField AccessibleHeaderText="Supporting Images" FooterText="Supporting Images" HeaderText="Supporting Images">
            <ItemTemplate>
                <asp:Label ID="lblSupImages" runat="server" Visible="false" Font-Bold="true" Text="Select images to delete"></asp:Label><br />
                <asp:GridView 
                    ID="grdSupImages" 
                    runat="server" 
                    ShowHeader="false" 
                    CellPadding="4" 
                    ForeColor="#333333" 
                    GridLines="None" 
                    AutoGenerateColumns="False"                         
                    AllowPaging="true" 
                    PageSize="4"
                    OnPageIndexChanging="grdSupImages_PageIndexChanging"
                    OnRowEditing="grdSupImages_RowEditing"
                    EnableViewState="true"
                    DataKeyNames="productID" 
                    RowStyle-VerticalAlign="Top" 
                    RowStyle-HorizontalAlign="Center" 
                    EmptyDataText="No Supporting Images Found">
                    <AlternatingRowStyle BackColor="White" ForeColor="#284775"></AlternatingRowStyle>
                    <Columns>
                        <asp:TemplateField >
                            <ItemTemplate>                                    
                                <asp:Image ID="imgSup" runat="server" ToolTip='<%# Eval("ImgId") %>' AlternateText='<%# Eval("ImageName") %>' ImageUrl='<%# Eval("ImagePath") %>' Height="125" Width="125" />
                                <asp:Label ID="imgSupName" runat="server" Text='<%# Eval("ImageName") %>' AssociatedControlID="imgSup"></asp:Label>
                                <asp:CheckBox ID="chkSupImages" runat="server" Visible="false" Text="Select Image" CommandName="Select" />
                            </ItemTemplate>

                        </asp:TemplateField>
                    </Columns>
                    <EditRowStyle BackColor="#999999"></EditRowStyle>

                    <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White"></FooterStyle>

                    <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White"></HeaderStyle>

                    <PagerStyle HorizontalAlign="Center" BackColor="#284775" ForeColor="White"></PagerStyle>

                    <RowStyle BackColor="#F7F6F3" ForeColor="#333333"></RowStyle>

                    <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333"></SelectedRowStyle>

                    <SortedAscendingCellStyle BackColor="#E9E7E2"></SortedAscendingCellStyle>

                    <SortedAscendingHeaderStyle BackColor="#506C8C"></SortedAscendingHeaderStyle>

                    <SortedDescendingCellStyle BackColor="#FFFDF8"></SortedDescendingCellStyle>

                    <SortedDescendingHeaderStyle BackColor="#6F8DAE"></SortedDescendingHeaderStyle>
                </asp:GridView>
                <div style="clear:both;">&nbsp;</div>
                <asp:Label ID="lblFlupSupImages" runat="server" Font-Bold="true" Text="Add extra images" Visible="false" />
                <br />
                <asp:FileUpload ID="flupSupImages" runat="server" AllowMultiple="true" Visible="false" />
            </ItemTemplate>

            <FooterTemplate>
                <asp:FileUpload ID="flupExtra" runat="server" AllowMultiple="true" />
            </FooterTemplate>
        </asp:TemplateField>
         <asp:TemplateField HeaderText="Edit">
            <ItemTemplate>
                <asp:LinkButton ID="btnEdit" Text="Edit" runat="server" CommandName="Edit" />
                <br />
                <span onclick="return confirm('Are you sure you want to delete these images?')">
                    <asp:LinkButton ID="btnDelete" Text="Delete" runat="server" CommandName="Delete" />
                </span>
            </ItemTemplate>
            <EditItemTemplate>
                <asp:LinkButton ID="btnUpdate" Text="Update" runat="server" CommandName="Update" />
                <br />
                <asp:LinkButton ID="btnCancel" Text="Cancel" runat="server" CommandName="Cancel" />
            </EditItemTemplate>
            <FooterTemplate>
                <asp:Button ID="btnAddRecord" runat="server" Text="Add" CommandName="Add"></asp:Button>
            </FooterTemplate>
        </asp:TemplateField>
    </Columns>

    <EditRowStyle BackColor="#999999"></EditRowStyle>

    <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White"></FooterStyle>

    <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White"></HeaderStyle>

    <PagerStyle HorizontalAlign="Center" BackColor="#284775" ForeColor="White"></PagerStyle>

    <RowStyle BackColor="#F7F6F3" ForeColor="#333333"></RowStyle>

    <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333"></SelectedRowStyle>

    <SortedAscendingCellStyle BackColor="#E9E7E2"></SortedAscendingCellStyle>

    <SortedAscendingHeaderStyle BackColor="#506C8C"></SortedAscendingHeaderStyle>

    <SortedDescendingCellStyle BackColor="#FFFDF8"></SortedDescendingCellStyle>

    <SortedDescendingHeaderStyle BackColor="#6F8DAE"></SortedDescendingHeaderStyle>
</asp:GridView>

My code behind:

protected void grdImages_RowDataBound(object sender, GridViewRowEventArgs e)
{



        if (e.Row.RowType == DataControlRowType.DataRow)
        {

            GridView grd = (GridView)e.Row.FindControl("grdSupImages"); // find controls
            Label prodId = (Label)e.Row.FindControl("lblProdId");
            grd.ToolTip = prodId.Text;
            int product = Convert.ToInt32(prodId.Text);        // assign values to variables.
            BindNestedGrid(product, grd);      // call the function.
        }

        if (e.Row.RowType == DataControlRowType.DataRow && e.Row.RowIndex == grdImages.EditIndex)
        {
            //Find Child GridView
            GridView supImagesGrd = (GridView)e.Row.Cells[2].FindControl("grdSupImages");
            if (supImagesGrd != null)
            {
                // find grid header label and make visible
                Label gridHead = (Label)e.Row.Cells[2].FindControl("lblSupImages");
                gridHead.Visible = true;
                // find fileupload header label and make visible.
                Label fileUpHead = (Label)e.Row.Cells[2].FindControl("lblFlupSupImages");
                fileUpHead.Visible = true;
                // find fileupload control and make it visible.
                FileUpload flup = (FileUpload)e.Row.Cells[2].FindControl("flupSupImages");
                flup.Visible = true;
                //Loop through the GridView 
                foreach (GridViewRow row in supImagesGrd.Rows)
                {
                    if (row.RowType == DataControlRowType.DataRow)
                    {
                        //Find the CheckBox
                        CheckBox chb = (CheckBox)row.Cells[0].FindControl("chkSupImages");
                        if (chb != null)
                        {
                            chb.Visible = true;
                        }
                    }
                }
            }
        }


}
protected void grdSupImages_PageIndexChanging(object sender, GridViewPageEventArgs e)
{

    GridView gv = (GridView)sender;        
    gv.PageIndex = e.NewPageIndex;        
    BindNestedGrid(Convert.ToInt32(gv.ToolTip), gv);        

}

If any more information or code is required please let me know.

Answer 1

For anyone who wants to know, I disabled paging of the child grid when edit button is clicked so all check boxes show on all rows of child grid now.