Column Input Types

This option let us select the control we want to render when editing this field. All possible options are in following snippet. Defaults to text. In editoptions we can set all the possible attributes for this field's control.

Render as textarea on edit

$col["edittype"] = "textarea";
$col["editoptions"] = array("rows"=>2, "cols"=>20);

Render as checkbox,

With these values "checked_value:unchecked_value"

$col["edittype"] = "checkbox";
$col["editoptions"] = array("value"=>"Yes:No");

To make checkbox already in checked state while adding record

$col["editoptions"] = array("value"=>"Yes:No", defaultValue=> 'Yes');

To show column as checkbox on listing,

$col["formatter"] = "checkbox";

Render as textbox

With size 20, and initial value in textbox to 10

$col["editoptions"] = array("size"=>20, "defaultValue"=>'10');

Render as password textbox

It will render textbox as password box.

$col["edittype"] = "password";

To display hidden text (****) on listing instead of plain text, set:

$col["formatter"] = "password";

With these values "key:value;key:value;key:value"

$col["edittype"] = "select";
$col["editoptions"] = array("value"=>'10:$10;20:$20;30:$30;40:$40;50:$50');

// For multiselect, you probably need to write custom on_update handler
$col["editoptions"] = array("value"=>'10:$10;20:$20;30:$30;40:$40;50:$50', "multiple" => true);

// In case you want to use different delimiter (:) and separator (;), you can override
$col["editoptions"]["delimiter"] = ":";
$col["editoptions"]["separator"] = ";";

Property editoptions indexes are: foreign key table, foreign key id, label to show in dropdown

$col["edittype"] = "lookup";
$col["editoptions"] = array("table"=>"employees", "id"=>"employee_id", "label"=>"concat(first_name,' ',last_name)");

Above will create a query like: select employee_id as k, concat(firstname,' ',last_name) as v from employees. You can also provide your own query for dropdown by:

$col["editoptions"]["sql"] = "select employee_id as k, concat(firstname,' ',last_name) as v from employees";

$col["formatter"] = "badge";

To have a clickable badge, which will open another grid row in edit mode:

$col["formatter"] = "badge";
$col["badgeoptions"]["editurl"] = '/dev/demos/editing/index.php?grid_id=list1&col=client_id';

where index.php in url is the grid with client_id as primary key.

Rendering a colored row bar

This will show a rowbar before the text value of the column.

$col["formatter"] = "rowbar";

Render as Date & Datetime Picker

Date formatter will make this column as date input (and will show date picker control) on add or edit operations.

$col["formatter"] = "date";
$col["formatoptions"] = array("srcformat"=>'Y-m-d',"newformat"=>'d/m/Y');

Datetime formatter will make this column as date time input (and will show date time picker control) on add or edit operations.

$col["formatter"] = "datetime";
$col["formatoptions"] = array("srcformat"=>'Y-m-d',"newformat"=>'d/m/Y');

Complete date formatting shortcode can be found on this link: http://www.php.net/manual/en/function.date.php

By default, datepicker does not perform 'contains' search. If you wish to enable, you need to set following with date column. This will disable datepicker.

// contains search
$col["searchoptions"]["sopt"] = array("cn");

Format of contains search is yyyy-mm-dd, which can be changed using 'dbname' property and mysql format_date function.

// search date in format Jan 23, 2008
$col["dbname"] = "date_format(invdate,'%b %d, %Y')";

Render as button

$col["edittype"] = "button";
$col["editoptions"] = array("value"=>'Click Me');

Render Radio buttons as edittype

Radio buttons can be shown by custom method.

$col = array();
$col["title"] = "Closing Rate";
$col["name"] = "closed";
$col["width"] = "30";
$col["editable"] = true;
$col["align"] = "center";
$col["editoptions"]["dataInit"] = "function(o){edit_as_radio(o);}";
$cols[] = $col;

... and in html section, we can define custom edit-type display

<script>
function edit_as_radio(o)
{
    setTimeout(function(){
        jQuery(o).hide();
        jQuery(o).parent().append('<input title="0" type="radio" name="rd_closed" value="0" onclick="jQuery(\'#total\').val(0);"/> 0 <input title="5" type="radio" name="rd_closed" value="5" onclick="jQuery(\'#total\').val(5);"/> 5 <input title="10" type="radio" name="rd_closed" value="10" onclick="jQuery(\'#total\').val(10);"/> 10');
    },100);
}
</script>

Multiple checkboxes as edittype

$col = array();
$col["title"] = "Closed";
$col["name"] = "closed";
$col["width"] = "50";
$col["editable"] = true;
$col["editoptions"]["dataInit"] = "function(o){edit_as_custom(o);}";
$cols[] = $col;

and in html, add display function that will update the selection in main field (hidden)

<script>
    function edit_as_custom(o)
    {
        setTimeout(function(){
            jQuery(o).parent().append('<input type="checkbox" name="rd_closed" value="1" onclick="set_checkbox_value();"/> Option 1 <input type="checkbox" name="rd_closed" value="2" onclick="set_checkbox_value();"/> Option 2 <input type="checkbox" name="rd_closed" value="3" onclick="set_checkbox_value();"/> Option 3');
            jQuery(o).css('display','none');

            // here you can also read #closed value (if set) and set in checkboxes using jquery for edit mode

        },100);
    }

    function set_checkbox_value()
    {
        jQuery('#closed').val( jQuery('input[name=rd_closed]:checked').map(function(){return this.value;}).get() );
    }
</script>

Column Input Types