Customize JQueryUI Accordion Click

So I put together a page with several sections and sub-items.  The sections are report groupings and the sub items are reports themselves.  Users can click on the report name to run the report (which they will do 96.5% of the time) or they can expand out the details for the report and view a description, or perform actions like staring the report as a favorite.  So I decided to use the JqueryUI accordion control.  And to allow the user to navigate by clicking on the report name, I set the accordion event to be the mouseover (that way clicking on the report name would take them to the run report page).  Turns out this was a bad idea – the page was jumpier than a cat in a room full of rockers…  Just moving your mouse around would cause the page to resize and redraw.

After the usability review, it was decided to leave the accordions in place and to change the expand event to a click.  But in order to allow the user to navigate, the click had to be confined to the accordion’s icon…


Turns out that wasn’t so easy…  And none of the answers on stackoverflow seemed like what I was looking for.  So I started digging into the accordion source and came up with this solution:

1. $(document).ready(function () { 2. $(".categoryBox #accordion").accordion({ 3. active: false, 4. collapsible: true, 5. event: "" 6. });


8. $(".ui-accordion-header .ui-icon").bind("click.accordion", function (evt) { 9. var header = $(this.parentNode); 10. var current = $(this.parentNode.parentNode).data("accordion"); 11. evt.currentTarget = null; 12., evt, header); 13. evt.preventDefault();

14. });

15. });

So the accordion is a jquery widget control and is built as such (see  The method that’s called when the event (whichever the user specified) occurs is “_clickHandler”.  But widget functions that begin with “_” are hidden functions – hard to get at.  The handy “.data” function comes to the rescue – it will return the original object!

Nothing is out of the ordinary in the control constructor except for the event option (line 5), which is suspiciously blank.  This is noticed in the accordion’s “_create” function, and prevents events from being attached to the header.  Then I find all the accordion icons that were added during the create, and I bind a click event to them (line 8).    When the click is fired, I get the header control (line 9) and the current accordion object (line 10).  Because I used the “data” method to get the object, I can now call those tasty hidden functions it contains = in my case it’s “_clickHandler” (line 12).  Setting the event’s currentTarget to null (line 11) is very important though.  The “_clickHandler” function in the accordion source uses javascript’s coalesce operator thusly:

var clicked = $( event.currentTarget || target )

(where “target” is a parameter on the _clickHandler method).  So to get the click to show the proper control, I set the currentTarget to null and pass in the header control as the target.  The header control is then set as the “clicked” object, and everything works as planned!


MS Reporting services cross platform

The scuttlebutt on BI is that Microsoft is going to implement the services in a cross-platform way.  Color me skeptical, but they also said that reporting services was cross-browser for 2005, and it really wasn’t, so I’m going to wait and see how cross-platform SSRS works out.  It will be cool if they can pull it off though.  The master plan is:

  1. Get SSRS, PerformancePoint, and Excel services to work in browsers on iOS (includes IPad and IPhone I assume) by June next year.
  2. Add touch support the above offerings by December of next year.
  3. Add all the above to the new Windows 8 OS sometime in 2013.