ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / letacommog / letaweb / protected / extensions / yiibooster / userdoc / select2

We have included the <a href="http://ivaynberg.github.com/select2/">Select2 on roids plugin</a>
 of Igor Vaynberg.
 The following is a simple example of the amount of possible features that this plugin can do. For further
 information on its use, please visit <a href="http://ivaynberg.github.com/select2/" target="_blank">plugin docs</a>.

Basic example of usage is this:

</section>

Here's all configuration properties which you can set for <wn>TbSelect2</wn> widget.
 Note that this widget is a subclass of <yiidoc>CInputWidget</yiidoc>, so several attributes are common to all of such subclasses.

<properties>
 <property name="model" type="CModel" default="null">
 
 The data model associated with this widget.
 See <yiidoc>CInputWidget.model</yiidoc>.
 Either this property along with <pn>attribute</pn> should be defined, or the <pn>name</pn>.
 
 </property>
 <property name="attribute" type="string" default="null">
 
 If you set the <pn>model</pn> attribute,
 here you have to specify the name of the model property which you want to change with this widget.
 See <yiidoc>CInputWidget.attribute</yiidoc>.
 Either this property along with <pn>model</pn> should be defined, or the <pn>name</pn>.
 
 </property>
 <property name="name" type="string" default="null">
 
 The value of <pn>name</pn> HTML attribute of the input element.
 It must be set if you did not provide value for <pn>model</pn>.
 See <yiidoc>CInputWidget.name</yiidoc>.
 Either this property should be defined, or the <pn>model</pn> together with <pn>attribute</pn>.
 
 </property>
 <property name="value" type="string" default="null">
 
 Here you can force the initial value of the input.
 If <pn>model</pn> is provided, by default model's value is used.
 See <yiidoc>CInputWidget.value</yiidoc>.
 
 </property>
 <property name="htmlOptions" type="array" default="array()">
 
 HTML attributes of the input tag itself.
 Please note that it is not the attributes of a wrapper tag around the input.
 See <yiidoc>CInputWidget.htmlOptions</yiidoc>.
 
 </property>

<property name="form" type="TbActiveForm" default="null">
 
 You can pass the <wn>TbActiveForm</wn> instance here to help the widget automatically generate proper <pn>name</pn> attribute.
 Actually, when you make Select2 using the <code>TbActiveForm.select2Row()</code> call, the form instance gets passed to widget through this very attribute

</property>

<property name="data" type="array" default="array()">
 
 Data for list options. Elements of this array are "value" => "value label", the same as the result of <yiidoc>CHtml::listData</yiidoc>.
 
 </property>

<property name="asDropDownList" type="boolean" default="true">
 Whether to display as a dropdown list or as a tag selector.
 </property>

<property name="options" type="array" default="array()">
 
 Options for the original library. This value will be JSON-encoded and fed to <ln>select2</ln>.
 See the <a href="http://ivaynberg.github.io/select2/">library documentation</a> for list of all possible options.
 
 </property>

<property name="events" type="array" default="array()">
 
 Array of Javascript event handlers in format <code>"event_name" => "Javascript code for handler"</code>.
 This handlers will be attached to input element.
 
 
 Note that the presence of this option encourages to write Javascript code inside your view files,
 so most possibly we will completely remove it in future versions.
 
 </property>

<property name="val" type="string" default="''">
 
 The default value.
 
 </property>
 </properties>
</section>

<subheader>Initially empty dropdown (e. g. for loading it with AJAX call) with placeholder:</subheader>

<subheader id="multiple-select">Sending multiple selected elements to server</subheader>

This is the test for <github-issue id="574"/>

Select some elements in the selector, open Developer Tools in your browser (e. g. in Firefox it would be Firebug) and click on the button.
 In the details about the POST request you should see properly formatted parameters being sent to the server.

We are wrapping the multiselect into the form, to send data to endpoint in traditional way.
 Another way is to send the data formatted as you wish.
 This way you get selected elements using either <a href="http://api.jquery.com/val/"><code>.val()</code></a>
 or <a href="http://ivaynberg.github.io/select2/"><code>.select2('val')</code></a> method
 of the jQuery element representing the <code>select</code> element.

Like that:

Please, as with all other such examples, do NOT write Javascript click handlers like the above.
 This is only for illustration purposes so examples would be self-contained.
 Your Javascript handlers should always be in separate Javascript source files.

</section>
</documentation>

[+] ..
[-] empty_data.php [edit]
[-] basic.php [edit]
[-] 574_noform.php [edit]
[-] 574.php [edit]
[-] select2.xml [edit]