CODEWITHSUNDEEP
jqueryasp.netlistviewnested
A.B. User
A.B. User

Reputation: 473

Nested ASP.NET ListView + Jquery .show() .hide() persistence

I have something like this:

<div>
    <asp:ListView>
        <div>
            <asp:ListView>
                <div>
                    <asp:ListView>
                    </asp:ListView>
                </div>
            </asp:ListView>
        <div>
    </asp:ListView>
</div>

Of course the above is just pseudo-code, but basically it's like that. 3-Levels of DataBound ListViews (each connected to an SqlDataSource). All my ListViews fully utilize the control's built-in functionalities, meaning Select/Insert/Update/Delete are all on .aspx (ItemCommand) through the SqlDataSource. I do not have any Code-behind.

What I'm trying to do is make this layered ListView into something like a TreeView using JQuery. My first step is to .show()/.hide() the child ListViews but as expected, when a PostBack happens, the .show()/.hide() states don't persist.

I'm about to attempt using <asp:HiddenField> to be set during OnItemCommand from the ListViews to be used by JQuery during document.ready, but I think it will be a .FindControl() Hell.

Do you have an elegant solution in mind?

Upvotes: 0

Views: 858

Answers (1)

James
James

Reputation: 12806

How about using server hidden inputs which will persist state over post backs and then have an initialization script that will re-assign visibility after a post back occurs. Here is some code that conveys the idea (untested). If you don't like all of the hidden inputs you could us one and pack the data in some string and parse it out, but this is more work than the solution below.

<div>
    <asp:ListView>
        <div>
            <asp:HiddenField id="level2IsVisible" value="true" class="algc-level-visiblity" />
            <asp:ListView>
                <div>
                  <asp:HiddenField id="level3IsVisible" value="true" class="algc-level-visiblity" />
                    <asp:ListView>
                    </asp:ListView>
                </div>
            </asp:ListView>
        <div>
    </asp:ListView>
</div>


<script type="text/javascript">

// Initialization logic
$(function(){
   $("input.algc-level-visiblity").each(function() {
     if ($(this).val())
        $(this).closest("div").show();
     else
        $(this).closest("div").hide();
    // TODO: Add other rules that dictate parent div visibility toggle.
   });
});

</script>

Upvotes: 1

Related Questions