ViewBox as a Basic List Control
Description
You can format a ViewBox to look and act like a List Control.
For more information on creating a ViewBox that looks like a List Control watch this video or follow the guide below.
Create a ViewBox that Acts like a List Control.
In the UX Builder open the Properties page. In the UX Properties section click on the
button next to the 'Style name' property.
From the Location menu select the 'System' option. Select the 'iOS7' style and click OK,
Open the UX Controls page. In the page's toolbar check the 'Mobile' checkbox.
Open the Panels menu. Click on the [Panel Card] option to add a Panel Card to the component.
Highlight the Panel Card and open the 'Data Controls' menu. Click on [ViewBox] to add a ViewBox control to the Panel Card.
Highlight the ViewBox control. In the properties list on the right scroll down to the ViewBox Properties section. Check the 'Fill container' property.
Click the
button next to the 'ViewBox properties' property in order to open the ViewBox Builder.
On the 'Data Source' pane click the
button next to the 'ViewBox type' property and select 'Data'.
Set the 'Datasource type' property in the ViewBox Data section to 'Static JSON'.
Click the
button next to the 'Static JSON' property.
Click the 'Sample data' button in the lower left and select the 'Menu choices' option.
Click OK.
Open the ViewBox Layout pane and click the 'Add Item' button.
In the 'Category' list select 'Data Controls'. In the 'Control' list select [Label]. Highlight the 'MenuName' and 'Image' data fields on the right and click OK.
In the ViewBox Layout tree highlight the Image field and click the blue 'up' arrow in the toolbar to move it to the top of the tree.
In the 'Image' field's properties list on the right click the
button next to the 'Control type' property. Select [CSSIcon-DataBound: Image] and click OK.
Highlight both fields in the tree and click the 'Add item' button again.
In the 'Category' list select 'Containers'. From the 'Control' list select the [ListRowContainer] option and click 'Insert Around'.
At the top of the ViewBox Layout pane check the 'Freeform editor' option. The code should look like this.
Open the 'Items' pane. Highlight the '_AARow' item. In the Javascript section click the
button next to the onClick property.
Add the following javascript to the onClick event and click OK:
alert('you clicked on: '+v);
Open the ViewBox Properties pane. In the Scrolling section check the 'Drag scrolling' checkbox.
Set the 'Drag scrolling axis' property to 'Vertical' and click OK.
Run the component in Live Preview. The ViewBox should appear like a List Control.
When you click on a row the onClick event should fire and state which row was clicked on.
The vertical scrollbar should work.
