Why with this code the first row is always expanded?

Question

i've "almost" copy and paste this code suggested here in stackoverflow and here to show a master-detail with an asp.net listview control.

This is my code.

<css>

     .collapse
    {
        background-position: left -172px;
        height: 14px;
        width: 13px;
        background-repeat: no-repeat;
        background-image: url('images/DXR.png');
        cursor: pointer;
    }
    .expand
    {
        background-position: -14px -187px;
        height: 14px;
        width: 13px;
        background-repeat: no-repeat;
        background-image: url('images/DXR.png');
        cursor: pointer;
    }
    table
    {
    }
    table td
    {
    }
    table th
    {
    }
    .SUBDIV table
    {
        border: 0px;
    }
</css>

 <script type="text/javascript">
        $(document).ready(function () {
            // THIS IS FOR HIDE ALL DETAILS ROW

            $(".SUBDIV table tr:not(:first-child)").not("tr tr").hide();            
            $(".SUBDIV .btncolexp").click(function () {
                $(this).closest('tr').next('tr').toggle();
                //this is for change img of btncolexp button
                if ($(this).attr('class').toString() == "btncolexp collapse") {
                    $(this).addClass('expand');
                    $(this).removeClass('collapse');
                }
                else {
                    $(this).removeClass('expand');
                    $(this).addClass('collapse');
                }
            });
        });  
    </script>


 <asp:ListView ID="lvDmr" runat="server" DataSourceID="dsDmr" DataKeyNames="id">
            <ItemTemplate>
                <div id="Div1" class="SUBDIV" runat="server">
                    <table style="width: 100%;" cellspacing="0" cellpadding="8">
                        <tr style="width: 100%;">
                            <td class="colonna-griglia" style="width: 3%;">
                                <div class="btncolexp collapse">
                                    &nbsp;
                                </div>
                            </td>
                            <td class="colonna-griglia" style="width: 3%;">
                                <%# IconaRispostaRichiesta(Eval("risposta_richiesta"))%>
                            </td>
                            <td class="colonna-griglia" style="width: 5%;">
                                <%# Convert.ToDateTime(Eval("data_rilevazione")).ToString("d") %>
                            </td>
                            <td class="colonna-griglia">
                                <a href='dmr.aspx?testataconcorrente=<%# Eval("rivista")%>'>
                                    <%# Eval("rivista")%></a>
                            </td>
                            <td class="colonna-griglia">
                                <a href='dmr.aspx?cliente=<%# Eval("cliente")%>'>
                                    <asp:Label runat="server" ID="lblCliente" Text='<%# Eval("cliente")%>'></asp:Label></a>
                            </td>
                            <td class="colonna-griglia">
                                <asp:HyperLink runat="server" ID="lnkFiltroAgente" Text='<%# Eval("agente") %>' Visible='<%# MostraLabelAgente(Eval("agente")) %>'
                                    NavigateUrl='<%# Eval("agente","dmr.aspx?agente={0}") %>'></asp:HyperLink>
                                <asp:DropDownList runat="server" ID="cmbAgente" DataSourceID="dsAgenti" DataTextField="agenteclienteportafoglio"
                                    DataValueField="agenteclienteportafoglio" Width="150px" AutoPostBack="true" OnSelectedIndexChanged="cmbAgente_SelectedIndexChanged"
                                    SelectedValue='<%# Eval("agente") %>' AppendDataBoundItems="true" Visible='<%# MostraComboAgente(Eval("agente")) %>'>
                                    <asp:ListItem Text="" Value=""></asp:ListItem>
                                </asp:DropDownList>
                            </td>
                            <td class="colonna-griglia">
                                <%# Eval("categoria")%>
                            </td>
                            <td class="colonna-griglia">
                                <%# Eval("sottocategoria")%>
                            </td>
                            <td class="colonna-griglia">
                                <%# Eval("prodotto")%>
                            </td>
                            <td class="colonna-griglia">
                                <%# Eval("formato")%>
                            </td>
                            <td class="colonna-griglia">
                                <%# Eval("posizionamento")%>
                            </td>
                            <td class="colonna-griglia">
                                <%# Eval("spazio")%>
                            </td>
                            <td class="colonna-griglia">
                                <asp:Label runat="server" ID="lblID" Text='<%# Eval("id")%>'></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="6">
                            </td>
                            <td colspan="6">
                                <div id="divDetail" class="toggle1" style="padding: 5px 5px 5px 5px; background-color: #DEDEDE;">
                                    <asp:UpdatePanel runat="server" ID="upPanel">
                                        <Triggers>
                                            <asp:AsyncPostBackTrigger ControlID="btnInviaCommento" EventName="Click" />
                                        </Triggers>
                                        <ContentTemplate>
                                            <asp:SqlDataSource ID="dsCommenti" runat="server" ProviderName="MySql.Data.MySqlClient"
                                                InsertCommand="INSERT INTO dmr_commenti SET id_dmr=@id_dmr, data_ora=NOW(), commento_di=@commento_di, commento=@commento">
                                                <InsertParameters>
                                                    <asp:Parameter Name="id_dmr" />
                                                    <asp:Parameter Name="commento_di" />
                                                    <asp:Parameter Name="commento" />
                                                </InsertParameters>
                                            </asp:SqlDataSource>
                                            <asp:Repeater runat="server" DataSourceID="dsCommenti" ID="repeaterCommenti">
                                                <HeaderTemplate>
                                                </HeaderTemplate>
                                                <ItemTemplate>
                                                    <table style="width: 80%;" cellpadding="4" cellspacing="4">
                                                        <tr>
                                                            <td style="width: 7%; vertical-align: top;">
                                                                <img alt="" src='images/<%# RitornaFotoUtente(Eval("commento_di")) %>' height="48px" />
                                                            </td>
                                                            <td style="width: 93%; vertical-align: top;">
                                                                <span style="font-size: 8pt;"><b>
                                                                    <%# Eval("commento_di")%></b> il <b>
                                                                        <%# Eval("data_ora")%></b> </span>
                                                                <br />
                                                                <br />
                                                                <%# Eval("commento")%>
                                                                <br />
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </ItemTemplate>
                                                <FooterTemplate>
                                                    <asp:Label runat="server" ID="lblFooter" Text=""></asp:Label>
                                                </FooterTemplate>
                                            </asp:Repeater>
                                            <asp:TextBox runat="server" ID="txtCommento" Width="90%" Height="100px" TextMode="MultiLine"></asp:TextBox>
                                            <br />
                                            <asp:Button runat="server" ID="btnInviaCommento" Text="Invia" CommandName="ScriviCommento"
                                                CommandArgument='<%# Eval("id")  %>' />
                                            &nbsp;&nbsp;
                                            <asp:CheckBox runat="server" ID="chkRichiediRisposta" Text="Richiedi risposta" Visible='<%# MostraCheckRichiediRisposta() %>' />
                                            <br />
                                            <br />
                                            <asp:Label runat="server" ID="lblMessaggioCommento" Text=""></asp:Label>
                                        </ContentTemplate>
                                    </asp:UpdatePanel>
                                </div>
                            </td>
                            <td style="width: 20%;">
                            </td>
                        </tr>
                    </table>
                </div>
            </ItemTemplate>
            <EmptyDataTemplate>
                <table id="Table1" runat="server" style="">
                    <tr>
                        <td>
                            <br />
                            <br />
                            <asp:Label ID="lblNoPost" runat="server" Font-Size="Large" Font-Bold="true" Text="Non ci sono record !"> </asp:Label>
                            <br />
                            <br />
                        </td>
                    </tr>
                </table>
            </EmptyDataTemplate>
            <LayoutTemplate>
                <table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <th class="colonna-griglia-header" style="width: 3%;">
                        </th>
                        <th class="colonna-griglia-header" style="width: 3%;">
                        </th>
                        <th class="colonna-griglia-header" style="width: 5%;">
                            Data
                        </th>
                        <th class="colonna-griglia-header">
                            Rivista
                        </th>
                        <th class="colonna-griglia-header">
                            Cliente
                        </th>
                        <th class="colonna-griglia-header">
                            Agente
                        </th>
                        <th class="colonna-griglia-header">
                            Categoria
                        </th>
                        <th class="colonna-griglia-header">
                            Sottocategoria
                        </th>
                        <th class="colonna-griglia-header">
                            Prodotto
                        </th>
                        <th class="colonna-griglia-header">
                            Formato
                        </th>
                        <th class="colonna-griglia-header">
                            Posizionamento
                        </th>
                        <th class="colonna-griglia-header">
                            Spazio
                        </th>
                        <th class="colonna-griglia-header">
                            Record
                        </th>
                    </tr>
                    <tr runat="server" id="itemPlaceholder">
                    </tr>
                </table>
                <br /><br />
                <center>
                    <asp:DataPager ID="DataPager1" runat="server" PageSize="15" QueryStringField="page">
                        <Fields>
                            <asp:NumericPagerField ButtonType="Link" NumericButtonCssClass="PageNumber" NextPreviousButtonCssClass="PageNumber"
                                NextPageText="Next" PreviousPageText="Prev" CurrentPageLabelCssClass="PageNumberCurrent" />
                        </Fields>
                    </asp:DataPager>
                </center>
                <br /><br />
            </LayoutTemplate>
        </asp:ListView>

The problem is that the first row is EVER shown ... i would like that my 'grid' start with all child collapsed and not the first row expanded.

I guess this line of code is 'responsible' but i don't know how to modify to solve my problem.

EDIT: i've update CSS source code

Thanks

Answer 1

I able to replicate the behavior of the issue and identified below points

1. First data row always visible and no expand/collapse action
2. No styles to all other rows but we can see the exp/col action.

Root cause: itemPlaceHolder's placement as a second row in header table.
Fix: Remove tr[id=itemPlaceHolder] and add div[id=itemPlaceHolder] next to header table. for more info please see important comments in Recommended Changes > HTML Changes

TestCase with original source blog snippet:

I tried to replicate the scenario with the code-snippet from link that was mentioned in the question,
and understand that due to some css classes(like collapse) conflict with other css file/fragment (in my case bootstrap.css file has .collapse{display:none;} ).

As a result we can't see below div with background-image and couldn't perform click action.

<div class="btncolexp collapse">&nbsp;</div>

The solution is change css class names from .collapse and .expand to unique class-names like .grid-list-collapse and .grid-list-expand or you can use some other unique-name. and scope all classes to some area with parent container.

Make sure that you've included jQuery script Api resource in layout or Page before your script block.

Also check browser-console for script errors, any script error can cause the stopping execution

Recommended Changes:

Css Changes

<style>
    .grid-list-container .grid-list-collapse,
    .grid-list-container .grid-list-expand {
        background-position: left -172px;
        height: 14px;
        width: 13px;
        background-repeat: no-repeat;
        background-image: url('/Content/Images/DXR.png');
        cursor: pointer;
    }

    .grid-list-container .grid-list-expand {
        background-position: -14px -187px;
    }

    .grid-list-container table {
        border: solid 1px black;
    }

    .grid-list-container table td {
        border-right: solid 1px black;
        border-bottom: solid 1px black;
    }

    .grid-list-container table th {
        border-bottom: solid 1px black;
    }

    .grid-list-container .SUBDIV table {
        border: 0;
        border-left: 1px solid black;
    }
</style>

HTML changes

1. Added Parent div with class="grid-list-container"
2. In ListView > ItemTemplate > table > div Sub-Grid Expand/Collapse div css class changed as <div class="btncolexp grid-list-collapse"> &nbsp; </div>

It'll be like below:

<div class="grid-list-container">
    <asp:ListView ID="lvDmr" runat="server" DataSourceID="dsDmr" DataKeyNames="id">
        <ItemTemplate>
            <div class="SUBDIV" runat="server">
                <table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="15px">
                           <!-- Important: The below div class must be unique -->
                            <div class="btncolexp grid-list-collapse">
                                &nbsp;
                            </div>
                        </td>
                        <!-- Other Columns-->
                    </tr>
                    <!-- No changes in Details Row-->
                </table>
            </div>
        </ItemTemplate>
        <EmptyDataTemplate><!-- No changes--></EmptyDataTemplate>
        <LayoutTemplate>
            <table width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <th width="15px"></th>
                    <!--All Header Column th(s) here -->
                </tr>
            </table>

            <!-- Important: The below div#itemPlaceHolder must be here next to header table -->
            <div runat="server" id="itemPlaceHolder"></div>

            <!-- Other Tags like Pager can be here -->
        </LayoutTemplate>
    </asp:ListView>
</div>

Script Changes

<script>
    $(function () {
        // THIS IS FOR HIDE ALL DETAILS ROW
        $(".SUBDIV table tr:not(:first-child)").not("tr tr").hide();
        $(".SUBDIV .btncolexp").click(function () {
            $(this).closest('tr').next('tr').toggle();
            //this is for change img of btncolexp button
            if ($(this).hasClass("btncolexp grid-list-collapse")) {
                $(this).addClass('grid-list-expand')
                       .removeClass('grid-list-collapse');
            }
            else {
                $(this).removeClass('grid-list-expand')
                       .addClass('grid-list-collapse');
            }
        });
    });
</script>