CODEWITHSUNDEEP
javascriptjqueryasp.netlistview
stighy
stighy

Reputation: 7170

How to show / hide row of a ListView using jquery

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

Upvotes: 1

Views: 1712

Answers (4)

Arindam Nayak
Arindam Nayak

Reputation: 7462

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.

Upvotes: 1

heavyd
heavyd

Reputation: 17731

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();
});

Upvotes: 1

wayzz
wayzz

Reputation: 627

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/

Upvotes: 0

Geert
Geert

Reputation: 1227

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

Upvotes: 0

Related Questions