Let start by admitting that I’m not a javascript expert, so some of this code might be sub-optimal. And I’ve only tested it with IE (7 to 9).
Anny suggestions are offcourse very welcome.

1. Creating and showing the menu

The menu is a DIV that contains a table, with in each row a menu-item:

  • DIV id=’popMenu’
    • Table
      • Tablebody
        • Tablerow
          • table column
            • DIV
        • Tablerow
          • table column
            • DIV

The basic structure is created in the function createMenu:

 

Menuitems are added with the function addMenuItem

2. One function to rule them all

To make things easy I’ve added one function that alows you to create menu’s with 1 to 7 menuitems.
This function takes three parameters for each menu-item (cfr user guide).

3. Keeping track of the mouse position & dropping the menu when you click outside it

Because we’re acting on click’s in reporting services, the javascript event object is not available when SSRS fires the action (and the window.event object is empty).
To cover this we provide a function that records the mouse position every time the page is clicked (actually when the form is clicked).

This function also takes care of hidding (= deleting) the menu when the user clickes outside the menu.

3. Layout and hover effect

All layout is handled by a CSS file.

As you can see we provide a hover layout for the menu-items AND a hover class.
The first will work with IE9, the second simulates a hover effect for previous versions of IE.
The simmultion is achieved by adding the function xxx to the mouseover event of the menu-items.

This function changes the class off the menu-item to

By adding the function xxx to the mouseout event of the menu-items, the original layout is restored when the mouse leaves the menu-item.

The css file is loaded by the js file (to keep things simple).

4. Adding the javascript and CSS file to SSRS

Now that we have a js and css file that provide all the necessary functionality we need to add this to SSRS.

The least intrusive way is to inject both form the report (ref. xxx), this works, but it implies that the user first hast to click a button in the report to activate the menu functionality (injecting the js and css files) before it will be activated.
We can’t add the injection together with showing the menu because we need to inject before we know the mouse position.

So I chose a bit more intrusive way by adding the functionality to the ReportViewer.aspx and Report.aspx pages.

The ReportViewer.aspx is a straightforward HTML page, we add one script reference to the head section:

 

The Report.aspx page is bit special, but simply adding a script reference will do the trick.

 

The reference to the js file (and to the css file) are made through the reportserver website, so that you only have to keep one copy of both.

Last edited Jan 11, 2015 at 7:45 PM by Antoon1, version 1