jquery - Why with this code the first row is always expanded? -
i've "almost" re-create , paste code suggested here in stackoverflow , here show master-detail asp.net listview control.
this 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 () { // hide details row $(".subdiv table tr:not(:first-child)").not("tr tr").hide(); $(".subdiv .btncolexp").click(function () { $(this).closest('tr').next('tr').toggle(); //this alter 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"> </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 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") %>' /> <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%;"> info </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 first row ever shown ... 'grid' start kid collapsed , not first row expanded.
i guess line of code 'responsible' don't know how modify solve problem.
edit: i've update css source code
thanks
i able replicate behavior of issue , identified below points
first info row visible , no expand/collapse action no styles other rows can see exp/col action.root cause: itemplaceholder's placement sec row in header table. fix: remove tr[id=itemplaceholder] , add together div[id=itemplaceholder] next header table. more info please see important comments in recommended changes > html changes
testcase original source blog snippet:
i tried replicate scenario code-snippet link mentioned in question, , understand due css classes(like collapse) conflict other css file/fragment (in case bootstrap.css file has .collapse{display:none;} ).
as result can't see below div background-image , couldn't perform click action.
<div class="btncolexp collapse"> </div> the solution alter css class names .collapse , .expand unique class-names .grid-list-collapse , .grid-list-expand or can utilize other unique-name. , scope classes area parent container.
make sure you've included jquery script api resource in layout or page before script block.
also check browser-console script errors, script error can cause 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
added parentdiv class="grid-list-container" in listview > itemtemplate > table > div sub-grid expand/collapse div css class changed <div class="btncolexp grid-list-collapse"> </div> it'll 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: below div class must unique --> <div class="btncolexp grid-list-collapse"> </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: below div#itemplaceholder must here next header table --> <div runat="server" id="itemplaceholder"></div> <!-- other tags pager can here --> </layouttemplate> </asp:listview> </div> script changes
<script> $(function () { // hide details row $(".subdiv table tr:not(:first-child)").not("tr tr").hide(); $(".subdiv .btncolexp").click(function () { $(this).closest('tr').next('tr').toggle(); //this alter 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> jquery asp.net listview
No comments:
Post a Comment