Trick to synchronize the hovering/selection of multiple scorecards

December 8, 2010 by: David Lai

Recently for one of my clients, I had to figure out a way to synchronize the selection of multiple scorecard components. The tables needed to be separated but at the same time we needed to make sure that when hover over a row on one table, that the other tables would have the same row highlighted.

The easiest way to accomplish this is to have a separator column to separate each table, and then overlay a background or rectangle on the blank column. However the rectangle/background looks very ugly as what I have shown on the video.

Please watch the video for a detailed example on how to accomplish the synchronization trick with multiple scorecards.

I’ve also outlined the steps to accomplish this if you click on “More”

Step 1: Have 2 or more scorecards lined up side by side on the canvas

Step 2: Stretch the scorecards to the maximum vertical length that you think will be possible. For example it might be a maximum of 20 rows. The reason why we have to do this is because the table doesn’t automatically shrink even if we ignore blank row cells.

Step 3: Put the scorecards inside a canvas of your desired vertical length. Make sure that “vertical scrollbar” is automatic and “horizontal scrollbar” is Off for the Scroll Bar Options of the Canvas container.

Step 4: On the scorecard components, uncheck the rows selectable option and column sorting

Step 5: Overlay a list box selector on top of the scorecards and make it the same size and length starting from after the header.  It is important to make sure that the text in both the list box selector and the scorecard components are the same.

Step 6: Set the transparency on the list box selector to about 80-85% and create a dummy column that has a “.” if there exists a value for the scorecard and blank if there is none.  Right justify the list box selector text so we don’t see the “.”

There you go! now when you hover over one scorecard row, it looks like all the scorecard rows are being hovered in sync!

You can download the example xlf file from here


One Response to “Trick to synchronize the hovering/selection of multiple scorecards”

Leave a Reply

nine − 1 =