Expand or collapse a template grid cell

Contents[Hide]

1. Overview

When using a template grid for resizing, you can choose to add a component to a cell such as button, and a Toggle Template Cell interaction to expand & collapse the cell. When collapsed, the cell will be reduced to the size of the component and all other contents will be hidden.

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

2. Set up the template grid

This example starts from a new blank dashboard: choose Define Template Grid, and add a 2x2 grid.

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

Also set the Re-Size Mode property of the dashboard to Resize.

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

3. Set up the interaction

Select the button and choose Toggle Template Cell When Pressed in the toolbar.

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

In the 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

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.

If you view the dashboard normally to test, be aware that if you switch to Edit mode while the cell is collapsed, it will remain and be saved as collapsed.

5. 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