Select2

Overview #

Select2 is a great UI control to replace the normal select box. It gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options. View examples of Select2.

To use Select2 in KoolReport, you do:

<?php
Select2::create(array(
    'name'=>"my_select2",
    "placeholder"=>"Select customer",
    "dataStore"=>$this->dataStore("customers"),
    "dataBind"=>array(
        "text"=>"customerName",
        "value"=>"customerId",
    ),
));
?>

Use manual data inputs #

If you do not want to use dataBinding, you can input select options manually.

<?php
Select2::create(array(
    'name'=>"my_select2",
    "placeholder"=>"Select customer",
    "data"=>array(
        "John Doe"=>"1",
        "Jane Doe"=>"2",
        "Whatever Doe"=>"3",
    )    

));
?>

Multiple selection in Select2 #

Select2 support multiple selection. View the multiple selection example. To enable the multi-select feature of Select2 in KoolReport, you do:

<?php
Select2::create(array(
    'name'=>"my_select2",
    "multiple"=>true,
    "placeholder"=>"Select customers",
    "dataStore"=>$this->dataStore("customers"),
    "dataBind"=>array(
        "text"=>"customerName",
        "value"=>"customerId",
    ),
));
?>

Client events #

Select2 supports following events:

namedescription
changeTriggered whenever an option is selected or removed.
change.select2Scoped version of change
select2:closingTriggered before the dropdown is closed. This event can be prevented.
select2:closeTriggered whenever the dropdown is closed. select2:closing is fired before this and can be prevented.
select2:openingTriggered before the dropdown is opened. This event can be prevented.s
select2:openTriggered whenever the dropdown is opened. select2:opening is fired before this and can be prevented.
select2:selectingTriggered before a result is selected. This event can be prevented.s
select2:selectTriggered whenever a result is selected. select2:selecting is fired before this and can be prevented.
select2:unselectingTriggered before a selection is removed. This event can be prevented.
select2:unselectTriggered whenever a selection is removed. select2:unselecting is fired before this and can be prevented.
<?php
Select2::create(array(
    ...
    "clientEvents"=>array(
        "change"=>"function(e){
            \\Do something
        }",
    )
));
?>