Yii 1.1: yii-bootstrap-editable

In-place editing with Twitter Bootstrap Form and Popover

Note: This extension is replaced with X-editable!

This extension joins Yii with Bootstrap Editable plugin allowing in-place editing with Twitter Bootstrap Form and Popover. It includes three widgets and one component that together give you extremely fast and easy way for creating editable interfaces.



  • EditableField - makes editable single attribute of model.
  • EditableDetailView - makes editable several attributes shown as name-value table.
  • EditableColumn - makes editable one column in GridView


  • EditableSaver - server-side part for all widgets, allows to easily handle ajax requests submited by editables.



Developed and tested on Yii 1.1.12.


Setup instructions can be found here.


In case of questions please ask on this page or create issue on github.
Your feedback / contribution will be appreciated!


Sep 25, 2012

Initial release

Total 20 comments

#16986 report it
suresh babu k at 2014/04/18 07:02am
problem in editable when used in cgrid view with multiple models

Hi, im using this widget bootstrap.widgets.TbExtendedGridView.here im getting content from two models with relation like country and state.im able to apply editable on country but not on state.can you let me know how can i do it..

#16099 report it
Markz at 2014/01/19 10:59pm
TbEditableField will return Error when loading list when there are only option given for select type

My select options are dynamic, so there are instances that there will be only option. How should i fix this one? Thanks.

#11910 report it
haymps at 2013/02/12 05:08pm
Variable types - and new types 'text', 'select', 'date' etc.

I am using this extension - grateful for it! I would like to update it to support variable types per row. This would be based on a type field in the table itself. Also, i'd like to add a color picker for one of the types.

Widgets and AJAX is foreign to me, but I'm trying to figure it out. Does anyone have any advise on where I should look to change the extension. I'm in the EditableField.php, but can't see much in there to work with.

#11604 report it
Vitalets at 2013/01/22 03:02pm
Re: Composite keys for primary key?

Hi, yes you are right, please X-editable, it works with composite keys.

#11598 report it
nath-0 at 2013/01/22 10:59am
Composite keys for primary key?


It seems that it's doesn't work with composite keys for primaryKey. bug or error of mine ?

I am using EditableColumn.


#11284 report it
Vitalets at 2013/01/03 09:26am
Re: Cannot Pass Dynamic Value In Yii Editable

@hari maliya,

could you show the whole loop?

#11282 report it
hari maliya at 2013/01/03 09:08am
Cannot Pass Dynamic Value In Yii Editable

Thanks for the great extension. We are facing a small problem with it though

We are using editable function of yii-booster. The widget is used as follows:

$dataProvider = StaffHours::model()->findAll(); 
        $start = strtotime('12:00am');
        $end = strtotime('12:45am');
        for( $i = $start; $i <= $end; $i += 900) 
            $time = date('g:i A', $i);
         foreach($dataProvider as $data)
          { $monday = unserialize($data->monday);   
            $this->widget('bootstrap.widgets.TbEditableField', array(
                        'type' => 'select',
                         'model' => $data,
                         'emptytext' => $Monday[$time],
                         'attribute' => 'monday',
                         'url' => $this->createUrl('staffhours/updatetime&time='.$time),
                         'source' => array('Open', 'Close', 'Away'),
                          'enabled' => true

This widget is in a loop. Every time when this loop runs, the value of this $time variable changes, but into this widget, every time the same value is assigned to this $time. Any pointers to why this is happening and what can be do it pass the dynamic value? Any help is highly appreciated.

Thanks, hari maliya

#10967 report it
samuel.m at 2012/12/07 03:47am
Select with group Hack

For those who need to use some select with groups you can apply this hack on assets/js/bootstrap-editable.js

replace the renderInput function ( line 699 ) by this :

renderInput:function () {
                var deferred = $.Deferred();
                this.$input = $(this.settings.template);
                this.settings.onSourceReady.call(this, function () {
                        if (typeof this.settings.source === 'object' && this.settings.source != null) {
                            $.each(this.settings.source, $.proxy(function (key, value) {
                                if( typeof key === 'string' ) {
                                  var group = $('<optgroup>', { label:key });
                                  $.each(value, $.proxy(function (k, v) {
                                    group.append($('<option>', { value:k }).text(v));
                                } else {
                                  this.$input.append($('<option>', { value:key }).text(value));
                            }, this));
                    }, function () {
                        this.errorOnRender = 'Error when loading options';
                return deferred.promise();

and setTextByValue ( line 733 )

setTextByValue:function () {
                var deferred = $.Deferred();
                this.settings.onSourceReady.call(this, function () {
                        if (typeof this.settings.source === 'object' && this.value ) {
                          var selectedValue = this.value;
                          $.each(this.settings.source, $.proxy(function (key, value) {
                            if( typeof value === 'object' ) {
                              $.each(value, $.proxy(function (k, v) {
                                if( k === selectedValue ) {
                                  return true;
                            } else {
                              if( key === this.value ) {
                               return true;
                          }, this));
                        } else {
                            //set empty string when key not found in source
                    }, function () {
                return deferred.promise();

This will not break anything , just add the possibility to render slect with groups Note that you maybe need to clean up you published assets folder to get the new file loaded.

#10919 report it
Vitalets at 2012/12/03 09:10am
Re: Alias "bootstrap.widgets.TbGridView" is invalid


please check have you installed bootstrap extension correctly.

#10915 report it
haseeb2k9 at 2012/12/03 01:34am
Alias "bootstrap.widgets.TbGridView" is invalid. Make sure it points to an existing directory or file

hi friends i am using this extinction but during run time i am facing this error "Alias "bootstrap.widgets.TbGridView" is invalid. Make sure it points to an existing directory or file."

if anyone knows about it then plz help me.....

#10627 report it
Vitalets at 2012/11/09 01:55am
RE: Can not get it to work :-/

hi, toby78

Extension directory should be editable, so looks your actions are correct.
Please, check don't you miss * in import config? should be:

'import'=>array( 'application.models.*', 'application.components.*', 'ext.editable.*' ),

JS file is included automatically by extension, no need to do it manually.
You can also try

'import'=>array(... 'application.extensions.editable.*' ),

because ext alias appeared in later Yii versions. Hope it helps!

#10625 report it
toby78 at 2012/11/08 04:53pm
Can not get it to work :-/

It is not included when I look at the source in the browser.

I did this:

'import'=>array( 'application.models.', 'application.components.', 'ext.editable.*' ),

in main.php

and tried it in folder extensions/editable as well as extensions/bootstrap-editable.

What should the directory name be in extension directory? And what else am I missing?

Does import also include the JS file?

#10227 report it
Vitalets at 2012/10/12 04:17am
Re: more questions.....

hi Daniel
1. optgroup is not available in current version, will be added in the next release
2. disable / enable of editable is also not implemented yet, I have already issue on github
It's usefull feature and I'm going also to include it in next release.

#10223 report it
Daniel at 2012/10/11 11:25pm
Re: CSRF problem is solved, more questions.....
  1. Still don't know how to implements optgroup...

  2. I solved this, by adding:

'options' => array(
    'send' => 'never',

Now, the EditableDetailView is purely served as the form to create new details. Can be more than one.

New question: I have a view.php with EditableDetailView. On this page, EditableDetailView served as the view/update not for create new data. I have no idea how can I activate and deactivate the field so that if the status is active, editable field is disabled and while the status is inactive, editable field should be activated. Any help on this?

Thanks a lot for your help.

#10202 report it
Daniel at 2012/10/10 06:07pm
CSRF problem is solved, more questions.....

Hi Vitalets,

Thank you for your help. CSRF problem is now solved. However, I am still have more questions:

  1. I cannot use optgroup on the select. Any help? it only showed, [object] [Object].

  2. I managed to make new record work. However, since I am not only add new record once, I got difficulty to clear the current value of the model being added. I used option "send" on each field to stop them being updated on every value changed. Only the button action can send the update. In addition, I want to clear the model values. I set the option "value" to "". It works that now, I can create as many records as I want but the last added value is still stay there although it seems the pk is already empty since I can create a new (different) record.

Thank you very much for your help. This extension is superb.

#10179 report it
gallyamow at 2012/10/09 06:03am
Very useful!

Thank you, this is exactly what I was looking for.

#10177 report it
Vitalets at 2012/10/09 05:51am
RE: CSRF problem on EditableDetailView

it should be inside editable section:

'attributes' => array(
            'name' => 'name',
            'editable' => array(
                'type' => 'text',
                'options' => array(
                    'params' => array('YII_CSRF_TOKEN' => Yii::app()->request->csrfToken),
#10169 report it
Daniel at 2012/10/09 12:24am
RE: CSRF problem on EditableDetailView

Is it something like this?

$this->widget('ext.editable.EditableDetailView', array(
    'id' => 'transaction-details',
    'data' => $model,
    'url' => $this->createUrl('/transaction/editableUpdate'), //common submit url for all editables
    'attributes' => array(
            'name' => 'name',
            'options' => array(
                'params' => array('YII_CSRF_TOKEN' => Yii::app()->request->csrfToken),
#10161 report it
Vitalets at 2012/10/08 08:31am
RE: CSRF problem on EditableDetailView

I think the only way is to add params option to config of each field in detailview:

'options' => array(
    'params' => array('YII_CSRF_TOKEN' => Yii::app()->request->csrfToken),

In next version I'm going to put params under root config of detailview. Then it will be possible to set it once. Hope it helps!

#10150 report it
Daniel at 2012/10/07 11:57pm
CSRF problem on EditableDetailView

How to overcome csrf problem when using EditableDetailView?




Leave a comment

Please to leave your comment.

Create extension