Quantcast
Channel: Brian Mains Blog
Viewing all articles
Browse latest Browse all 15

Sys.UI.DataView rendered event

$
0
0

Looking at the MSDN documentation for the events pertaining to Sys.UI.DataView, I noticed that it lacked in comparison to the CHM file that comes with the MS AJAX 4.0 Preview 5 download.  One of these events is the rendered event, which fires at the end of the binding (itemRendered fires for each rendered item).  The rendered event is a great way to apply any view-wide operations using JQuery in one single shot.

For instance, if your view renders div elements with a specific class:

<ul .. class="list sys-template">
   <li>
      <span class="HeaderTemplate">Header</span>
      <div> <!-- related panel --></div>
   </li>
</ul>

Using jquery you could write some code to target every instance of this like:

view.add_rendered(function(sender, e) {
    $("span.HeaderTemplate + div").hide();
    $("span.HeaderTemplate").click(function() {
         $(this).toggle("slide", {direction: "down"}, 500);
    });
});

Note that the use of toggle requires the JQuery UI library.  The first statements finds every DIV that occurs after a SPAN.HeaderTemplate element.  The hide() method hides this immediately.  Following this, the click method adds a click event handler to the header to show/hide the div's below it.  This makes for an easy collapsible panel.


Viewing all articles
Browse latest Browse all 15

Trending Articles