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

#18985 report it
le_top at 2015/02/18 06:41am
Seems to break in Yii 1.1.16

Hi For info to other users: the extension (popups in jQueryui mode at least) seem to break in 1.1.16 because of the upgrade to a very recent jQuery and the use of the internal jQuery '_find' function.

Fixed it by changing the tip code where the '_find' call is made.

tip: function() {
        return this.container()? $('#'+this.container().element.attr('aria-describedby')):null;
#18544 report it
nirmalroka at 2014/11/13 09:20pm
Hi any one could help, I got response is undefined error in console

Hi When I tried to update using editable form it just shows TypeError: response is undefined in console please could any body help me. See the drop box link below of print screen of error.


#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?

Leave a comment

Please to leave your comment.

Create extension
No downloadable files yet