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

Question

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?

why do you think FindControl is hell?

Adrian Iftode
– Adrian Iftode

2012-02-16 07:20:08 +00:00
Commented Feb 16, 2012 at 7:20 — Adrian Iftode
– Adrian Iftode, Commented Feb 16, 2012 at 7:20

Armstrongest · Accepted Answer · 2014-04-29 19:21:53Z

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>

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related