Why does my nested gridview only display for a split second?

Question

I have nested a gridview (grdAttachments) within a gridview (grdPreIntakes). The grdPreIntakes grid displays email messages and the grdAttachments grid displays any attachments related to each email. The data is pulling fine for both gridviews. The first column in the grdPreIntakes gridview has an asp:ImageButton (a plus sign) that I hide if there are no attachments for a particular row.

The issue I am having is that when I click on the plus sign image to show the nested gridview of attachments, the nested gridview flashes a display and then disappears. I am assuming the issue lies within my javascript, although I am not sure. I have spent several hours reading up on javascript and every SO question associated to this issue and I have not found any related help.

Thanks in advance for any assistance.

JavaScript

<asp:Content ID="conScriptContent" ContentPlaceHolderID="ScriptContent" runat="server">
    <script type="text/javascript">

        $(document).on('click','[src*=plus]', function () {
            $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
            $(this).attr("src", "../images/minus.png");
        });

        $(document).on('click','[src*=minus]', function () {
            $(this).attr("src", "../images/plus.png");
            $(this).closest("tr").next().remove();
        });

    </script>
</asp:Content>

HTML

<asp:Content ID="conPageContent" ContentPlaceHolderID="PageContent" runat="server">
    <div><h2>Incoming Mail</h2></div>
    <form id="incomingMail" runat="server">

    <asp:SqlDataSource ID="sdsPreIntakes" runat="server"
        CancelSelectOnNullParameter="false"
        ConnectionString="<%$ ConnectionStrings:IntakeSiteDB %>"
        ProviderName="<%$ ConnectionStrings:IntakeSiteDB.ProviderName %>"
        SelectCommand="SELECT * FROM pre_intakes WHERE pi_active = 1"
        SelectCommandType="Text">
    </asp:SqlDataSource>

    <asp:Button ID="btnPullMail" runat="server" Text="Pull Mail" />

        <asp:GridView ID="grdPreIntakes" runat="server" AutoGenerateColumns="False" CssClass="table table-striped table-condensed"
            DataSourceID="sdsPreIntakes" DataKeyNames="pre_intake_id" AllowSorting="True" 
            AllowPaging="True" PageSize="20"
            BorderWidth="1px" BorderColor="Black">
            <PagerStyle CssClass="cssPager" HorizontalAlign="Center" />
            <HeaderStyle CssClass="cssIntakeList" Font-Bold="true" ForeColor="#D9E4CA" BackColor="#24564A" />
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:ImageButton ID="btnPlus" runat="server" ImageUrl="../images/plus.png" />
                        <asp:Panel ID="pnlAttachments" runat="server" Style="display: none"> 
                            <asp:GridView ID="grdAttachments" runat="server" AutoGenerateColumns="false" >
                                <Columns>
                                    <asp:BoundField ItemStyle-Width="300px" DataField="original_name" />
                                </Columns>
                            </asp:GridView>
                        </asp:Panel>
                    </ItemTemplate>                
                </asp:TemplateField>
                <asp:BoundField DataField="pi_from" HeaderText="From"
                    SortExpression="pi_from" />
                <asp:BoundField DataField="pi_subject" HeaderText="Summary"
                    SortExpression="pi_subject" ItemStyle-CssClass="subject" />
                <asp:BoundField DataField="pi_date" HeaderText="Date" DataFormatString="{0:d}"
                    SortExpression="pi_date" ItemStyle-CssClass="dateCreated" />
                <asp:BoundField DataField="pi_time" HeaderText="Time"
                    SortExpression="pi_time" ItemStyle-CssClass="timeCreated" />
                <asp:CommandField ShowSelectButton="true" SelectText="Accept"
                    ItemStyle-CssClass="select-button" ControlStyle-Font-Bold="true" >
                    <ItemStyle CssClass="select-button" HorizontalAlign="Center" />
                </asp:CommandField>
            </Columns>
        </asp:GridView>
        <br />
    </form>
</asp:Content>

VB.NET

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not IsPostBack Then
        grdPreIntakes.DataBind()
    End If
End Sub

Private Sub grdPreIntakes_RowDataBound(sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles grdPreIntakes.RowDataBound
    Dim i As Integer = 0
    If e.Row.RowType = DataControlRowType.DataRow Then
        i = e.Row.RowIndex + 1
        Dim preIntakeID As String = grdPreIntakes.DataKeys(e.Row.RowIndex).Value.ToString()
        Dim grdAttachments As GridView = TryCast(e.Row.FindControl("grdAttachments"), GridView)
        Dim btnPlus As ImageButton = CType(e.Row.FindControl("btnPlus"), ImageButton)
        grdAttachments.DataSource = GetPreIntakeAttachments(preIntakeID)
        If Not IsNothing(grdAttachments.DataSource) Then
            grdAttachments.DataBind()
        Else
            If i > 0 Then btnPlus.Visible = False
        End If
    End If
End Sub

Why to removing the element, why don't you just Show and hide the element on plus and minus click. Once the element was removed on click of minus, you will not get the html again. — Anubrij Chandra

Michael Callas Michael Callas · Accepted Answer · 2020-01-02T16:32:19

I figured it out. What I did was change the <asp:ImageButton> to an <asp:Image> and it started working perfectly.

Why does my nested gridview only display for a split second?

2 Answers