Behavior: Dropdown

posted Jan 19, 2012, 1:46 PM by Eric Patrick   [ updated Jun 13, 2017, 6:27 AM ]
HTML select statements can be rendered from the database using the 'Dropdown' behavior:

<select id="Status" name="Status" data-behavior="Dropdown" data-dropdown-options="{{
 'url': 'Application/ObjectStatus.ashx/List?output=Json',
 'jsonEval': 'ObjectStatusCollection.ObjectStatusItem',
 'value': 'ObjectStatus',
 'text': 'Label',
 'selected': 'MyCurrentValue', 
 'data': {{ 'Object': 'Loan', 'cache': '300' }} }}">
 <option value="">--</option>
</select>

The options passed to the behavior comprise:
  • url: the URL to call to populate the select element
  • jsonEval: a Json expression that, when evaluated, returns an array of 'option' objects corresponding to each select option tag
  • value: the option object property to use as the option element's value
  • text: the option object property to use as the option element's HTML
  • data: parameters to pass to the url
The qbo3.DropdownType object contains the standard options for commonly used drop down lists, including:
  • ObjectStatus
  • ObjectType
  • State
To leverage these predefined options, specify a 'type' in the behavior options. For example:

<select id="Status" name="Status" data-behavior="Dropdown" data-dropdown-options="{{ 
'type': 'ObjectStatus' , 
'data': {{ 'Object': 'Loan' }} }}">
<option value="">--</option>
</select>


Comments