How to show / hide row of a ListView using jquery

Question

i'm using an Asp.net Listview to show data in a "grid". This is my code

  <asp:ListView ID="lvDmr" runat="server" DataSourceID="dsDmr" DataKeyNames="id">
            <ItemTemplate>
                <table style="width: 100%;">
                    <tr style="width: 100%; border-bottom:1px solid gray;">
                        <td class="colonna-griglia">
                            <a href="#" ..'here javascript'>Expand/Hide Div</a><br /><br />
                        </td>
                        <td class="colonna-griglia">
                            <%# Eval("rivista")%>
                        </td>
                        <td class="colonna-griglia">
                            <a href='dmr.aspx?cliente=<%# Eval("cliente")%>'>
                                <%# Eval("cliente")%></a>
                        </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">
                            <%# Eval("id")%>
                        </td>
                    </tr>
                </table>
                <div runat="server" id="divDetail" class="toggle1" style="display:none;padding: 5px 5px 5px 5px; background-color:#DEDEDE;">
                    Dettaglio
                </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 id="Table2" runat="server" style="width: 100%;" cellpadding="2" cellspacing="2">
                    <thead>
                        <tr runat="server" id="headerRow"  >
                            <th class="colonna-griglia">

                            </th>
                            <th class="colonna-griglia">
                                Rivista
                            </th>
                            <th class="colonna-griglia">
                                Cliente
                            </th>
                            <th class="colonna-griglia">
                                Categoria
                            </th>
                            <th class="colonna-griglia">
                                Sottocategoria
                            </th>
                            <th class="colonna-griglia">
                                Prodotto
                            </th>
                            <th class="colonna-griglia">
                                Formato
                            </th>
                            <th class="colonna-griglia">
                                Posizionamento
                            </th>
                            <th class="colonna-griglia">
                                Spazio
                            </th>
                            <th class="colonna-griglia">
                                id
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr runat="server" id="itemPlaceholder" />
                    </tbody>
                    <tr id="Tr3" runat="server">
                        <td id="Td2" runat="server" style="text-align: center; font-size: medium;">
                            <br />
                            <asp:DataPager ID="DataPager1" runat="server" PageSize="24" QueryStringField="page">
                                <Fields>
                                    <asp:NumericPagerField ButtonType="Link" NumericButtonCssClass="PageNumber" NextPreviousButtonCssClass="PageNumber"
                                        NextPageText="Next" PreviousPageText="Prev" CurrentPageLabelCssClass="PageNumberCurrent" />
                                </Fields>
                            </asp:DataPager>
                        </td>
                    </tr>
                </table>
            </LayoutTemplate>
        </asp:ListView>

I would like to allow user to Show / Hide the div divDetail under each row (like a master detail) clicking an icon/button near each row.

The problem is that the each div change his name after asp.net render it (because i use runat=server). So how can i use jquery or javascript to show hide ONLY the div under the correct row ?

Is it possible ?

Thanks

Not sure what you are trying to achieve. Would you like to append a <div> below each <tr> element of your view? And what about the 'toggle' part? How should the toggle be triggered? — panepeter
– panepeter, Commented Oct 16, 2014 at 10:07
you can use the jquery to toggle the hide/show and user $("#myListview tr #button_id").toggle() — Robin
– Robin, Commented Oct 16, 2014 at 10:16

Arindam Nayak · Accepted Answer · 2014-10-23 05:59:15Z

You need to use correct jQuery selector to achieve this. I have used following, and it worked.

In ListView use this.

<asp:ListView ID="lvDmr" runat="server"  DataKeyNames="id">
    <ItemTemplate>
        <table style="width: 100%;">
            <tr style="width: 100%; border-bottom: 1px solid gray;">
                <td class="colonna-griglia">
                    <a href="#" onclick='ShowHide(this);'>Expand/Hide Div</a><br />
                    <br />

See, i have used ShowHide . Then use following JS function.

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
    function ShowHide(element) {
        $(element).parent().parent().parent().parent().next().toggle();
    }
</script>

Make , sure you include jQuery , any version will do, i have used 2.1.1.

Following is the output.

enter image description here

Explanation for JS - a href is 4 level down inside table i.e. table->tbody->tr->td, so i have used .parent() 4 times, then .next is used get next div i.e. divDetail. Then just invoke toggle() to make it work.

heavyd · Accepted Answer · 2014-10-22 10:09:52Z

1

Your jQuery code needs to lookup the div element relative to the button that gets clicked (see fiddle). Something like this might work for you assuming you give your "Expand/Hide Div" link the class toggleButton:

$(".toggleButton").click(function(){
  $(this).closest("table").next(".toggle1").toggle();
});

answered Oct 22, 2014 at 10:09

heavyd

17.8k5 gold badges59 silver badges76 bronze badges

2 Comments

stighy Over a year ago

Hello, it seems not working, again because asp.net render DIV with a different name for each child of a listview ...

heavyd Over a year ago

Is ASP.NET changing the class "toggle1" on the div?

Geert · Accepted Answer · 2014-10-22 08:27:33Z

0

You could use data attributes for it.

On your toggle button add something like the following:

data-toggle-id="<id of record>"

On the div you want to toggle add something like the following:

data-id="<id of record>"

Then you can add a click handler to your buttons:

$(".toggle_button").on("click", function(e) {

    toggle_id = $(this).data("toggle-id");

    $("div[data-id='" + toggle_id + "']").toggle();

});

Just a quick write of code, should work like this. But you may have to rename certain variables

answered Oct 22, 2014 at 8:27

Geert

1,2178 silver badges20 bronze badges

Comments

wayzz · Accepted Answer · 2014-10-22 08:47:28Z

0

You can give a a class to each row. When class is clicked you can get the 'id' of the clicked class and then use either .show()/.hide() or .toggle() with jQuery, your choice. I created a small example on jsFiddle - http://jsfiddle.net/9gnq34ct/

edited Oct 22, 2014 at 8:47

answered Oct 22, 2014 at 8:13

wayzz

6279 silver badges26 bronze badges

3 Comments

stighy Over a year ago

I can't give a class to each row because aps.net render each row with a different name, but AFTER rendering... you don't know before, at coding time !

wayzz Over a year ago

jsfiddle.net/9gnq34ct this is an example of what I am talking about. I am not sure if you can use the same principle.

stighy Over a year ago

Wayzz, no, because it lacks all the asp.net pronlem. In asp.net webforms you can't 'predict' how a control will be named after rendering...

Collectives™ on Stack Overflow

How to show / hide row of a ListView using jquery

4 Answers 4

Comments

2 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related