yii-bootstrap-editable Follow @yiiframework

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.

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

Hello,

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

I am using EditableColumn.

Nath

@hari maliya,

could you show the whole loop?

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

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.$input.addClass(this.settings.inputclass);
                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));
                                  }));
 
 
                                  this.$input.append(group);
                                } else {
                                  this.$input.append($('<option>', { value:key }).text(value));
                                }
 
                            }, this));
                        }
                        deferred.resolve();
                    }, function () {
                        this.errorOnRender = 'Error when loading options';
                        deferred.resolve();
                    });
 
                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 ) {
                                  this.$element.text(v);
                                  return true;
                                }
                              },this));
                            } else {
                              if( key === this.value ) {
                               this.$element.text(value);
                               return true;
                              }
                            }
                          }, this));
 
                        } else {
                            //set empty string when key not found in source
                            this.$element.text('');
                        }
                        deferred.resolve();
                    }, function () {
                        this.$element.text('Error!');
                        deferred.resolve();
                    });
 
                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.

hi,

please check have you installed bootstrap extension correctly.

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

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!

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?

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.
Thanks!

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.

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.

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

it should be inside editable section:

'attributes' => array(
        array(
            'name' => 'name',
            'editable' => array(
                'type' => 'text',
                'options' => array(
                    'params' => array('YII_CSRF_TOKEN' => Yii::app()->request->csrfToken),
                ),
            ),
        ),

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(
        array(
            'name' => 'name',
            'options' => array(
                'params' => array('YII_CSRF_TOKEN' => Yii::app()->request->csrfToken),
            ),
        ),
.....

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!

How to overcome csrf problem when using EditableDetailView?

Cheers,

Daniel

PS: SUPERBBBB ext!

hi, Nick

good features! It's not possible in current version but I think I will add it in next release.
The solution can be to implement "disable" and "enable" api methods of js plugin. So, to turn table into editable state you will call:

$('table a').editable("enable");

I'm wondering if it is possible to disable/enable editable functionality for certain rows (or all) from Javascript? I'm using EditableColumn widget.

Two possible scenarios where it might be useful: 1. If a record is 'locked', it shouldn't be editable. 2. The whole table in not editable by default, and become editable if an 'Edit' button is clicked.

Thoughts? Ideas?