• Data binding
• Bind text and value
• Adding default option
• Not use data-binding
• Setting css class
• Client Events

Select

Data binding #

In below example, the Select data will be bound to the "customerName" column of dataStore "customer".

<?php
\koolreport\inputs\Select::create(array(
    "name"=>"customer",
    "dataStore"=>$this->dataStore("customer"),
    "dataBind"=>"customerName",
));
?>

Bind text and value #

Sometime you need the text and value be different, you can bind text and value to two different columns of dataStore.

<?php
\koolreport\inputs\Select::create(array(
    "name"=>"customer",
    "dataStore"=>$this->dataStore("customer"),
    "dataBind"=>array("text"=>"customerName","value"=>"customerId"),
));
?>

Adding default option #

Sometime you will need to add default option at the beginning of the select, you can use the option defaultOption. The defaultOption will be an associate array array(text=>value).

<?php
\koolreport\inputs\Select::create(array(
    "name"=>"customer",
    "dataStore"=>$this->dataStore("customer"),
    "dataBind"=>array("text"=>"customerName","value"=>"customerId"),
    "defaultOption"=>array("--"=>""),
));
?>

Not use data-binding #

If you have pre-defined set of options, you may not need to use data binding. You can set options with data properties

<?php
\koolreport\inputs\Select::create(array(
    "name"=>"customer",
    "data"=>array(
        "John Doe"=>"1",
        "Jane Doe"=>"2",
        "Whatever Doe"=>"3",
    )    
));
?>

Setting css class #

You can easily set the css class or css style with attributes property.

<?php
\koolreport\inputs\Select::create(array(
    "name"=>"customer",
    "dataStore"=>$this->dataStore("customer"),
    "dataBind"=>array("text"=>"customerName","value"=>"customerId"),
    "attributes"=>array(
        "class"=>"form-control",
        "style"=>"margin-top:10px;"
    )
));
?>

Client Events #

TextBox supports all client events such as focus, blur, change, mouseover, mouseout.

<?php
\koolreport\inputs\Select::create(array(
    ...
    "clientEvents"=>array(
        "change"=>"function(){
            console.log($(this).val());
        }",
    )
));
?>