Select Input
Last Updated: August 10, 2015
- class tethys_sdk.gizmos.SelectInput(name, display_text='', initial=None, multiple=False, original=False, select2_options=None, options='', disabled=False, error='', success='', attributes=None, classes='')
Select inputs are used to select values from an given set of values. Use this gizmo to create select inputs and multi select inputs. This uses the Select2 functionality.
- original
If True, Select2 reference functionality will be turned off
- Type:
bool
- initial
List of keys or values that represent the initial selected values or a string representing a singular initial selected value.
- Type:
list or str
- attributes
A dictionary representing additional HTML attributes to add to the primary element (e.g. {"onclick": "run_me();"}).
- Type:
dict
- classes
Additional classes to add to the primary HTML element (e.g. "example-class another-class").
- Type:
str
Controller Example
from tethys_sdk.gizmos import SelectInput select_input2 = SelectInput(display_text='Select2', name='select2', multiple=False, options=[('One', '1'), ('Two', '2'), ('Three', '3')], initial=['Three'], select2_options={'placeholder': 'Select a number', 'allowClear': True}) select_input2_multiple = SelectInput(display_text='Select2 Multiple', name='select21', multiple=True, options=[('One', '1'), ('Two', '2'), ('Three', '3')], initial=['Two', 'One']) select_input2_error = SelectInput(display_text='Select2 Disabled', name='select22', multiple=False, options=[('One', '1'), ('Two', '2'), ('Three', '3')], disabled=True, error='Here is my error text') select_input = SelectInput(display_text='Select', name='select1', multiple=False, original=True, options=[('One', '1'), ('Two', '2'), ('Three', '3')], initial=['Three']) select_input_multiple = SelectInput(display_text='Select Multiple', name='select11', multiple=True, original=True, options=[('One', '1'), ('Two', '2'), ('Three', '3')]) context = { 'select_input2': select_input2, 'select_input2_multiple': select_input2_multiple, 'select_input2_error': select_input2_error, 'select_input': select_input, 'select_input_multiple': select_input_multiple, }
Template Example
{% gizmo select_input2 %} {% gizmo select_input2_multiple %} {% gizmo select_input2_error %} {% gizmo select_input %} {% gizmo select_input_multiple %}
AJAX
Often dynamically loading in a select input can be useful. Here is a description of how to do so with the SelectInput gizmo.
Note
In order to use this, you will either need to use a SelectInput
gizmo on
the main page or register the dependencies in the main html template page
using the import_gizmo_dependency
tag with the select_input
name
in the import_gizmos
block.
For example:
{% block import_gizmos %}
{% import_gizmo_dependency select_input %}
{% endblock %}
Three elements are required:
A controller for the AJAX call with a SelectInput gizmo.
from tethys_sdk.gizmos import SelectInput
@controller(
url="app_name/select",
)
def select_input_ajax(request):
"""
Controller for the bokeh ajax request.
"""
select_input2 = SelectInput(display_text="Select2",
name="select2",
multiple=False,
options=[("One", "1"), ("Two", "2"), ("Three", "3")],
initial=["Three"])
context = {"select_input2": select_input2}
return render(request, "app_name/select_input_ajax.html", context)
A template for with the tethys gizmo (e.g. select_input_ajax.html)
{% load tethys_gizmos %}
{% gizmo select_input2 %}
The AJAX call in the javascript
Note
You only need to call the init function if you are using select2.
$(function() { //wait for page to load
$.ajax({
url: 'select',
method: 'GET',
success: function(data) {
// add to page
$("#select_div").html(data);
// initialize if using select2
$("#select_div").find('.select2').select2();
}
});
});