Expand or collapse a template grid cell

Contents[Hide]

1. Overview

If you're designing a dashboard with a template grid (which is useful for resizing controls using a grid layout), one of the things you can do is place a component such as button within one of the cells, and then add a Toggle Template Cell interaction to the component so that when the component is clicked, the template grid cell will collapse itself to the size of the component. Any other controls within the cell will be hidden when the cell is collapsed.

This walkthrough shows you how to set up a button to expand or collapse a template grid cell without any scripting.

2. Walkthrough

2.1. Define a template grid

Create a new blank dashboard. Go to the toolbar and click Define Template Grid. Mark out a 2x2 grid.

Also set the Re-Size mode of the dashboard to resize.

Define a 2x2 template grid
Define a 2x2 template grid

2.2. Add controls to cells

Add a button and a small chart to the first cell. Then add a second chart that fills up the second cell.

Add controls to the cells
Add controls to the cells

2.3. Set up the interaction

Select the button and go to the toolbar. Click Toggle Template Cell When Pressed.

Click Toggle Template Cell When Pressed
Click Toggle Template Cell When Pressed

In the setup dialog, select the option to Expand / Collapse Horizontally. This option forces the expand/collapse to work horizontally only instead of in both directions (vertical and horizontal).

Set up the interaction
Set up the interaction

2.4. View the dashboard

Click Sandbox View to test the dashboard. 

View the dashboard
View the dashboard

Click the button to collapse the first cell horizontally. Observe that the first chart is now hidden and the second chart expands to fill up the extra space.

First cell is collapsed horizontally
First cell is collapsed horizontally

Click the button again to expand the first cell.

You can use regular View mode to test as well except be aware that if you switch to Edit mode while the cell is collapsed, it will remain collapsed and its controls will be hidden.

3. See also

Dundas Data Visualization, Inc.
500-250 Ferrand Drive
Toronto, ON, Canada
M3C 3G8

North America: 1.800.463.1492
International: 1.416.467.5100

Dundas Support Hours: 7am-6pm, ET, Mon-Fri