How the Grid Was Configured in Video GM12
Description
A guide to configuring the video GM12 on how to use a Grid to implement a typical 'Store Finder' application.
Grid Properties
To place the Search Part to the Left of the Grid part, check the 'Use a master layout template' property and set the 'Master layout template style' to 'Table - Horizontal Layout'.
Search Properties
To turn off the Search Part toolbar, in 'Search Options' set the 'Toolbar position' to 'none'.
Search Field Property
To turn off the label that appears to the left of the map, select the map field and set the 'Row label' to blank.
Map Properties - These are the properties that were set for the Map field in the Search Part
'Search type' - set to 'Radius'
'Sort radius search by distance from center point' - checked
'Show search results on map' - checked, then fill in the 'Latitude expression' and 'Longitude expression'
'Marker icons' - select 'Built-in image sequence' and then 'Green:1-20'
'Center Map' prompt instructions - set to 'Enter a city name or zip code<br>'
'Center Map' button bubble help - set to 'Center the map on an address'
'Center Map' execute button text - 'Find the closest airports'
'Center Map' prompt initial state - set to 'Open'
'Hide 'Center Map' prompt after execute' - Uncheck this. This will leave the 'Center Map' prompt open after the user has centered a map on a new point. By default, the prompt is hidden when the user executes the action, and then the user must click the 'Center' button to re-display the prompt.
'onSetMapCenterPoint event' - set to 'userSetRadius' - (note: in the vide this prompt is called 'onSet event') this is the name of a Javascript function to call when the user clicks the button to set a new center point for the map. When the user clicks this button we want two things to happen: a) the map should be centered on the new address, and b) the search should actually be executed. We do not want the user to have to click the Search Part's 'Search' button (which has been hidden). The name of the function you specify here is completely arbitrary. If could just as well be 'foo'. You will then need do go the 'Javascript Functions' section in the Grid to define this function.
'Initial map radius' - set to 10 miles.
'Map circle color' - set ot #d9e2d9 - this makes the map circle that is drawn around the map center point invisible. In this particular application, we don't want to actually see the circle drawn around the map center point.
'Toolbar position' - set to 'Above'
'Customize map toolbar template' - set to:
<span style="display:none;">{toolbarParts.setRadius}</span> {toolbarParts.centerMapPrompt}The {toolbarParts.centerMapPrompt} placeholder represents the textbox where the user types in the address on which the map should be centered. This placeholder also includes the button that the user clicks to do the action.
The {toolbarParts.setRadius} placeholder represents the prompt where the user enters the search radius and the button that the user clicks to set a new radius on the map. In this application, we don't want to display this prompt or show the 'Set' button because we have hard-coded the search to use a 10 mile radius. However, we can't simply leave the prompt out of the toolbar because then the search will fail. That's because when the search is executed the radius of the search area needs to be submitted to the server and if the radius field is not in the Search Part, no radius value is submitted. Therefore we MUST include the {toolbar.setRadius} placeholder, but we can hide it, which we do by wrapping it in <span> tags and setting the style on the <span> to display:none.
Javascript
In the Javascript Functions section, define this event:
function userSetRadius() { {grid.Object}.submitSearchForm() }Icons in the Grid
To place icons in the Grid so that there is matching icon in each Grid row to the icons shown in the Search Part, go to the Grid, Fields section and click the 'Insert...' hyperlink. Insert a new 'Image' control and set the image to use the same built-in image sequence as the Search Part.