Skip to content

# 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";

### Render as select (dropdown)

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"] = ";";

### Render as database lookup (dropdown)

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";

### Render dropdown as a colored badge

    $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>