Question

I have a list view on a page and am trying emulate the toggling effect of a tree view. When first bound the detail elements (LBL_ActionTitle, LBL_Action, LBL_UrlTitle, LBL_Url) are set to visibility = false. I would like to have the click event of the element (LB_ExpandCollapse) toggle the visibility of detail elements directly related to it. IE not all the elements of that type on the page. I am not sure how to accomplish this, or if it can be done, and was hoping that someone could point me in the right direction. Here is the control for reference.

    <div id="logContainer">
        <asp:ListView ID=LV_Logs runat="server">
            <LayoutTemplate>
                <table border="0" cellpadding="0" cellspacing="0" style="width:100%">
                    <tr>
                        <td></td>
                        <td style="width:85%" />
                    </tr>
                    <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
                </table>
            </LayoutTemplate>
            <ItemTemplate>
                <tr>
                    <td>
                        <hr />
                        <asp:LinkButton ID="LB_ExpandCollapse" runat="server" CausesValidation="false" OnClick="expandCollapse_Click">+</asp:LinkButton>
                        <asp:Label ID="LBL_MessageType" runat="server" Text='<%# Eval("messageType") %>'></asp:Label>
                        <hr />
                    </td>
                    <td style="text-align: right">
                        <hr />
                        <asp:Label ID="LBL_Message" runat="server" Text='<%# Eval("messageTime") %>'></asp:Label>
                        <hr />
                    </td>
                </tr>

                <tr style="text-align: left">
                    <td style="padding-left: 65px">
                        <asp:Label ID="LBL_ActionTitle" Visibility="false" runat="server" Text="User Action:"></asp:Label>
                    </td>
                    <td style="padding-left: 10px">
                        <asp:Label ID="LBL_Action" Visibility="false" runat="server" Text='<%# Eval("action") %>'></asp:Label>
                    </td>
                </tr>
                <tr style="text-align: left">
                    <td style="padding-left: 65px">
                        <asp:Label ID="LBL_UrlTitle" Visibility="false" runat="server" Text="URL:"></asp:Label>
                    </td>
                    <td style="padding-left: 10px">
                        <asp:Label ID="LBL_Url" runat="server" Visibility="false" Text='<%# Eval("url") %>'></asp:Label>
                    </td>
                </tr>

           </ItemTemplate>

        </asp:ListView>
        <asp:DataPager ID="DataPagerProducts" runat="server" PagedControlID="LV_Logs"
            PageSize="20" OnPreRender="DataPagerProducts_PreRender">
            <Fields>
                <asp:NextPreviousPagerField ShowFirstPageButton="True" ShowNextPageButton="False" />
                <asp:NumericPagerField />
                <asp:NextPreviousPagerField ShowLastPageButton="True" ShowPreviousPageButton="False" />
            </Fields>
        </asp:DataPager>

Answer 1

I suggest you put the ID of the record as an ID on the TR containing the fields you want toggled. Then in your expandCollapseClick also pass the ID, so that you can set the row’s style to display:block. Of course this assumes that all the rows start out at display:none. ie.

<tr id='<%# Eval("recordId") %>' style='display:none'>

and then in Javascript (pseudo-code)

function expandCollapseClick(row)
{
    document.getElementById(row).style.display = 'block';
}

Then change your button to execute client-side as in:

<button onclick='expandCollapse(<%# Eval("recordId") %>)'>+</button> 

This will call the code to display the row, passing in the id of the correct row. Of course this assumes that the table is fully populated when the page is retrieved and all you want to do is hide/show detail.