Yii 1.1: x-editable

Bundle of widgets and server-side component for creating editable elements


This extension allows you to create editable elements on your page.
It contains 4 widgets:

and 2 components:

Since 1.3 you can use it with YiiMongoDBSuite.

Demo, Docs & Download



Requirements depend on core library you want to use:

  • Bootstrap
    Twitter Bootstrap 2+, Yii 1.1+. You can use Yii-bootstrap extension (2.0+) or include bootstrap manually
  • jQuery UI
    • popup: Yii 1.1.13+ (as requires jQuery UI 1.9 for tooltip)
    • inline: Yii 1.1+
  • only jQuery
    Yii 1.1+


If you have any questions or ideas feel free to ask in comments or open issue on github page.

Maintainer needed! More details here.


Version 1.3.1 Aug 17, 2013

[enh] conversion nl2br no more needed for textarea (vitalets)
[enh] updated to x-editable 1.4.6 (vitalets)
[enh #63] allow usage with EDataTables (vitalets, faravaghi)
[bug #66] date & datetime are not processed if passed as timestamp string (vitalets)
[enh #19] i18n support for "clear" in date & datetime (vitalets)
[enh #40] evaluate htmlOptions for EditableColumn (horizons2, vitalets)
[enh #57] added support for CFormModel (vitalets)
[enh #55] support of inline functions in column value (vitalets)

Version 1.3.0 Jun 29, 2013

[enh #43] support for non-scalar virtual attributes (pavshuk)
[enh] update x-editable js to 1.4.5 (vitalets)
[enh] added mongoDB support (vitalets)
[enh #48] scenario is taken dynamically from model and used in EditableSaver (vitalets)
[enh #46] add liveTarget option to support live update in CListView (vitalets)

Version 1.2.0 May 29, 2013

[enh #7] column sort icons for bootstrap (vitalets)
[bug #41] if all columns have apply=false grid becomes un-editable after update (horizons2)
[enh #39] support php < 5.3 (vitalets)
[enh #37] added Editable::source method (vitalets)
[enh #38] CSRF support out of box (horizons2)
[enh #35] support of dates as timestamp (andersonamuller)
[enh] support of virtual_fields in EditableColumn (vitalets)

Version 1.1.0 May 18, 2013

[enh #33] allow apply as a PHP expression in EditableColumn (oinegue)
[enh #22] allow CArrayDataProvider for EditableColumn (ciarand)
[enh] added bootstrap datetime support (vitalets)
[enh #5] source as array is always data, not Yii route (vitalets)
[enh #9] support for namespaced models (vitalets)
[enh] updated to x-editable 1.4.4: added combodate and select2 (vitalets)
[enh #16] EditableDetailView defaults + french translation (mdeweerd)
[bug] If apply = true, attribute can be unsafe (vitalets)
[enh] Added composer support (vitalets)
[chg] EditableDetailView emptytext no more taken from nullDisplay option (vitalets)
[bug] Disable loading Yii's css for EditableDetailView in bootstrap mode (vitalets)
[enh #6] Added support of composite primary keys (vitalets)
[enh] Added Italian messages (vitalets)

Version 1.0.0 Dec 26, 2012

Initial release.

Total 20 comments

#18135 report it
Gerhard Liebenberg at 2014/09/15 04:33am
Yii error when debugging?

Fantastic extension!

Error might be a Yii issue and not a x-editable issue.

When I debug Yii, I get an error when I use EditableColumn type 'select'.

My model name is 'ar_trn18', but somewhere it is turned into 'Ar_trn18', which results in the error in YiiBase::autoload.

This happens only when I use debug in Yii config file. If I do not debug, then there is no error.

Stack trace:

exception 'CException' with message 'Class name "Ar_trn18" does not match class file "C:\xampp\htdocs\iccap\frontend\config\..\..\common\models\Ar_trn18.php".' in C:\xampp\htdocs\iccap\common\lib\Yii\YiiBase.php:418
Stack trace:
#0 [internal function]: YiiBase::autoload('Ar_trn18')
#16837 report it
Samir IZZA at 2014/04/02 10:31am
EditableField type select2 disappear with Google Chrome!!!

Hi, A big thanks for @Vitalets for this awesome ext. I have a probleme with Google Chrome. When I try to fill my EditableField select2 type The field disappear. Is there any fix for this issue?

Thanks again.

#16724 report it
Simbioziz at 2014/03/22 07:52pm
How create displayed select

Hi. I used to create drop-down lists with inactive items 'disabled'=>'disabled' ? For this, I wrote a function.

echo $form->dropDownList($model,'driver', 
CHtml::listData(Driver::model()->findAll(array('order'=>'active DESC')),'id', 'last_name'),
array('prompt'=>'Select a driver:','options'=>Truck::notactivedrivers()));
public function notactivedrivers() {
        $viborka=new CDbCriteria;
        $blabla= Driver::model()->findAll($viborka);
        $ar = array();
        foreach ($blabla as $qw) {
         $ar[$qw->id] = array('disabled'=>'disabled');
        return $ar;

How do I make now some items inactive with x-editable. An example of what I need: Your text to link here...

Where insert disabled fields array here?

              'class' => 'editable.EditableColumn',
              'name' => 'current_driver_1_id',
              'headerHtmlOptions' => array('style' => 'width: 100px'),
              'editable' => array(
                  'type'     => 'select',
                  'url'      => $this->createUrl('truck/updateUser'),
                  'source'   => Editable::source(Driver::model()->findAll(array('order'=>'active DESC')),'id', 'last_name'),
                 //onsave event handler 
                 'onSave' => 'js: function(e, params) {
                      console && console.log("saved value: "+params.newValue);


#16051 report it
le_top at 2014/01/14 05:41pm
Inserting new record.

EditableSaver does no allow the insertion of a new record as you indicate, it is for updating a record; The scenario is used and set on the model after the model has been retrieved from the DB. One typical use of a scenario is when you want the change the rule checking ('validate'). That should work.

One method that I see which could be used is to define a behavior on EditableSaver to create the record in 'onBeforeUpdate' if you would like to do so (when the PK is not found).

#16048 report it
Highmastdon at 2014/01/14 01:07pm
Composite primary key for EditableField

[edit: addition] Okay, I've found out, by scrolling trough the classes, that, to my surprise, there is a field pk which can be filled. With that the data-pk="<some JSON>" is filled (the code below is what my widget looks right now).

But then another problem rises: In short this is the code for the action.

$es = new EditableSaver('RoosterRegel');

Only there is a problem: the update doesn't allow to have a non-existing record. Although the scenario I see when debugging has a statement which should imply that there is a possibility to make an insert, but it seems to not being used for creating the model before checking it from the db. $this->scenario = yii::app()->request->getParam('scenario'); `EditableSaver.php:105'

$this->widget('editable.EditableField', array(
    'type' => 'select',
    'model' => $modelRoosterRegel,
    'pk' => $modelRoosterRegel->primaryKey,
    'attribute' => 'idItem',
    'url' => $this->createUrl('RoosterRegel/UpdateRoosterRegel'),
    'source' => Editable::source($itemSoortListData),
    'params' => array('idTeam' => $model->idTeam))



I'm trying to edit a value from a model which has a composite primary key. I can change the value on the website but it doesn't fire an Ajax request to RoosterRegel/UpdateRoosterRegel. I created this code to test it, and I can't see what I'm doing wrong. I cannot find there is any data-pk="<some JSON>" code in the HTML but I can't see where I should put it.

I hope you can help.

$itemSoortListData = CHtml::listData(Item::model()->findAllByAttributes(array('idItemSoort' => 1)), 'idItem', 'Beschrijving');
$modelRoosterRegel = new RoosterRegel();
$modelRoosterRegel->idStdActiviteit = 4;
$modelRoosterRegel->idVereiste = 1;
$modelRoosterRegel->idPlanning = 75;
$this->widget('editable.EditableField', array(
    'type' => 'select',
    'model' => $modelRoosterRegel,
    'attribute' => 'idItem',
    'url' => $this->createUrl('RoosterRegel/UpdateRoosterRegel'),
    'source' => Editable::source($itemSoortListData),
    'params' => array('idTeam' => $model->idTeam))
#14264 report it
Vitalets at 2013/07/30 02:03pm
Re: EditableDetailView

hi, mtzmedia
could you show your view and controller code?

#14196 report it
mtzmedia at 2013/07/25 12:34pm

Everything works great except the EditableDetailView widget. Not sure what's going on, it just stops loading the page with a 500 network error. I can't see anything about it in the Yii logs, either. Anyone else have this problem or any ideas about what could be causing it?? Thanks!

#13750 report it
Vitalets at 2013/06/21 02:57pm
Re: Related editables?

hi, yes you are right, you should update source of second select in success of first.
please have a look on this: http://jsfiddle.net/xBB5x/297/

#13734 report it
Helgi at 2013/06/20 08:35am
Related editables?

Good day. First I want to thank you about such a great extension, it works perfectly. But I have a question. Is it possible to DYNAMICALLY update Source of one editable select element based on value, that was set in other? For example I have two select-fields - Country and City, and after Country update via your extension, I want to update corresponding City array. It seems, that I have to do it in "success" ajax response, but I cannot find how can I update the array.

Anybody could make a tip for me? Thanks!

#13670 report it
cico at 2013/06/15 08:07am
Re: Using with mongoDB suite

Hi thank you for your fast reply i use this on my profile/view.php:

$this->widget('editable.EditableField', array(
        'type'      => 'text',
        'model'     => $model,
        'attribute' => 'profile.city',
        'url'       => $this->createUrl('user/updateUser'), 
        'placement' => 'right',

on my UsereController.php

public function actionProfile(){
$model = User::model()->findByPk( new MongoID(Yii::app()->user->id) );

on my User.php

public function rules()
        return array(
            array('email, status, profile.city', 'safe'),
    public function embeddedDocuments()
        return array(
            // property field name => class name to use for this embedded document
            'profile' => 'Profile',

i set on my embedded document Profile.php

class Profile extends EMongoEmbeddedDocument
    public $lastname;
    public $firstname;
    public $street;
    public $city;
    public $zip;
    public $phone;
    public $cellular;
     * @return array validation rules for model attributes.
    public function rules()
        return array(
            //array('lastname, firstname, street, city, zip, phone, cellular', 'required'),
            array('lastname, firstname', 'length', 'max'=>50),
            array('phone, cellular', 'numerical', 'min'=>8, 'max'=>15, 'tooSmall'=>'Campo non valido inserisci un numero corretto', 'tooBig'=>'Campo non valido inserisci un numero corretto'),
            // The following rule is used by search().
            // Please remove those attributes that should not be searched.
            array('lastname, firstname, city, zip', 'safe'),

to use this modules i also edit your file EditableSaver.php here

//loading model
        $this->model = CActiveRecord::model($this->modelClass)->findByPk(new MongoId($this->primaryKey));

and here

//saving (no validation, only changed attributes)
        if ($this->model->update($this->changedAttributes, true)) {
#13668 report it
Vitalets at 2013/06/15 07:29am
Re: apply - depending on $data value

@Edgar Kuskov,
evaluating apply is seems to be already done.
have a look on:

For invalid date - could you show the full snippet?

could you show the code how you create widget for user.profile.name?


#13667 report it
cico at 2013/06/15 06:20am
Using with mongoDB suite

Hi, i'm try to use this great extension with mongoDBsuite and it work fine!

but i have a problem with embedded document in a "root" model, i can't edit the fields of embedded document. I try to explain with my real case:

My model is User.php and my embedded document is Profile.php. If I use edidableField widget and i try to edit a filed of embedded document for example $user->profile->name the field is not editabled.

I hope it is clear.

Thank you

#13642 report it
Edgar Kuskov at 2013/06/13 07:48am
apply - depending on $data value

Hello guys,

i would like to give a tip for the "apply" value in EditableClass, just change the line 65:

if($widget->apply)) { to if(!eval('return '.$widget->apply.';')) {

and now you are able to parse some really awesome conditions like: .... 'apply'=>'($data->manualPrice && strtotime($data->toDate)>strtotime(date("Y-m-d")))', ....

Thanks for the great extension!

P.S: There is a bug by date field, when i pass there a date like 2013-06-19 the field is always showing the todays date, i think there will be good to give the valueFormat.

#13453 report it
deez at 2013/05/29 10:55am
Filter and Sort

Works like a charm. Thanks again!

#13425 report it
Vitalets at 2013/05/28 05:22pm
Re: Filter and Sort?

please have a look on updated demo of 1.2.0, there is example of sorting by related model.

#13418 report it
deez at 2013/05/28 09:55am

Thanks vitalets. Great extension by the way.

#13307 report it
Vitalets at 2013/05/21 06:34pm
Re: Filter and Sort?

hi deez,
your post bring me to some investigation of sources. I made several changes and will release 1.1.1 within a few days.


#13304 report it
deez at 2013/05/21 02:40pm
Filter and Sort?

Can anyone tell me how to filter and sort on a related model? For example:

    'class' => 'editable.EditableColumn',
    'name' => 'relation.field_id',
    'value'=> 'CHtml::value($data, "relation.field.somename")',
    'filter'=>CHtml::listData($this->getClientFields(), 'field_id','field.somename'),
    'editable' => array(
            'url' => $this->createUrl('updateEditable', array( 'model'=>'Model', 'field'=>'field_id')),
            'source' => CHtml::listData($this->getClientFields(), 'field_id', 'field.somename'),
            'placement'  => 'right',
            'inputclass' => 'span3',

In the compare statement in the Model I would normally create a pseudo element and call that in the grid, and the sort and the compare.

How do I do it with this method?

#13190 report it
Caio P. at 2013/05/13 03:32am
Replace value shown with server response

In case it helps anyone that needs to replace the user input with the actual saved value from the model.

In the controller:

/* after treatment of POSTed value into $model->value */
echo CJSON::encode(array('success' => true, 'newValue' => $model->value));

And in the view:

$this->widget('editable.EditableField', array(
    /* ... */
    'options' => array(
        'success'=>'js:function($response, $newValue) {
            var parsedResponse = JSON.parse($response);
            return { newValue: parsedResponse.newValue };
#12748 report it
Vitalets at 2013/04/09 02:14pm
re: Integrate in search form of grid view


For view please see samples.
For controller, if you are not updating model and just perform search, you just create action and use data from $_POST.

Leave a comment

Please to leave your comment.

Create extension
No downloadable files yet