Hi Kartik!

Thanks for all your hard work!
I really like your Yii extensions!

When I use the INPUT_TIME widget in yii2-editable I get the following error:

'Cannot read property 'offsetWidth' of undefined'

All the other input types are working fine.

I use the editable widget in a foreach loop to display events.
This is my code:

    <?php foreach ($model->calendar as $calendar) { ?>
        <div class="event">
            <?= Editable::widget([
                'name' => 'date',
                'value' => date('d-m-Y', $calendar->workshop_date),
                'size' => 'md',
                'inputType' => Editable::INPUT_DATE
            ]) ?>
            <br />
            <?= Editable::widget([
                'name' => 'start',
                'value' => date('h:i', strtotime($calendar->start)),
                'size' => 'md',
                'inputType' => Editable::INPUT_TIME
            ]) ?>
            <br />
            <?= Editable::widget([
                'name' => 'location',
                'value' =>$calendar->location,
                'size' => 'md',
                'inputType' => Editable::INPUT_TEXT
            ]) ?>
        </div>
    <?php } ?>

Maybe you can tell me what is wrong with the code?

Thanks!

Richard

Successfull request:

Changed Value [object Object]
POST http://URL 200 OK
Submitted Value [object Object]
Successful submission of value [object Object]

error request:

Changed Value [object Object]
index.p...approve (Zeile 948)
POST http://URL 500 Internal Server Error
Submitted Value [object Object]

event bindings: (from your examples)

'pluginEvents' => [
                                "editableChange"=>"function(val) { console.log('Changed Value ' + val); }",
                                "editableSubmit"=>"function(val) { console.log('Submitted Value ' + val); }",
                                "editableReset"=>"function() { console.log('Reset editable form'); }",
                                "editableSuccess"=>"function(val) { console.log('Successful submission of value ' + val); }",
                                "editableError"=>"function(val) { console.log('Error while submission of value ' + val); }",
                            ],

the event editableError isnt fired.

Hi Kartik,

I was wondering how I can display several Editable widgets for several instances of the same model and same attribute. I tried it but since the IDs of the different parts of the widget are the same (same model name and same attribute), the popover that shows is always the one from the first instance of all my models.
I tried to set the ID myself using the options but that doesn't work. any idea ?

Also is there a way to display the editable button as disabled like you can do with fields and other bootstrap buttons ? I added ['disabled' => true] to the editableButtonOptions which actually prevent the user from using the button but doesn't display a nice cursor like disabled fields.
Also the button turns square instead of round as it seems that setting the editableButtonOptions property remove the btn, btn-sm and btn-default CSS classes from the button.

Thanks for your help with those questions.

Thanks for wonderful widgets!
I want to use this with Yii2 DetailView, is it possible?
I want to avoid any third party DetaiViews if possible
Thank you!

• New asPopover boolean property added.
• Enhanced inline form styles
• INLINE templates and settings to control how content should be rendered
• Two built in inline templates Editable::INLINE_1 & Editable::INLINE_2

           'attribute'=>'contact_email',
            'format'=>'raw',

            'value'=>Editable::widget([
                'model'=>$model, 
                'attribute' => 'contact_email',
                'type'=>'primary',
                'format' => Editable::FORMAT_BUTTON,
                'inputType' => Editable::INPUT_DROPDOWN_LIST,
                'data'=>[1=>'Allow', 0=>'Forbid'],
                'displayValueConfig'=>[0=>Yii::t('app','Forbidden'), 1=>Yii::t('app','Allowed')],
                'editableValueOptions'=>['class'=>'text-success pad15-right'],
                'formOptions'=>[
                    'action'=>url::to(['member/usercp', 'id'=>$model->id])
                ],
                'pluginEvents' => [
                    "editableSuccess"=>"function(event, val) { 
                        //console.log('Successful submission of value ' + val); 
                    }",
                ],

That is relevant part of widget and It works fine. But after ajax change it shows 0/1 instead of allowed/forbidden. Is that normal? IMHO it should apply formula to that thing. Or at least expose the display container in pluginEven something like below so that one can simly do what he wants

                 'pluginEvents' => [
                    "editableSuccess"=>"function(event, val, displayer) { 
                        $(displayer).val(val);
                    }",

Enhancments and Changes that may mildly break BC .

• The editable widget will now be initialized on the editable container Editable::$containerOptions['id'] and NOT via the editable input
• A new boolean property autoGuessInput is added. The options for the input will be auto detected for all HTML inputs, Krajee Input widgets and DateControl - if autoGuessInput is set to true. If you use a custom widget that does not have options in one of the above -- then you can set autoGuessInput to false and necessarily add the CSS class kv-editable-input to your base input - so that the editable plugin can detect the input correctly.

The above changes will ensure consistency in editable maintenance - parsing the editable values and displayValueConfig correctly, and also consistency in usage of kartik\grid\EditableColumn.

Create dependency of all common components on yii2-krajee-base.

Hi!
I cant initializate a submit button from form when i choose 'inputType' is 'Editable::<widget_name>'.
Submit button is shown, but its hasnt event on click, change etc
My example (from base class EditableColumn):
" 'name'=>'spinWidget',

                    'inputType' => Editable::INPUT_SPIN,
                    'options' => [
                        'options'=> ['id'=>'spin-'.$index],
                        'pluginOptions' => ['step' => 0.1, 'decimals' => 1, 'min'=>0.8, 'max'=>1.2]
                    ],"

When I choosin a simple textinput, form is workin normally.
Thankes, have a good day

Loving your work on this.

Do you plan to add an optional inline editing mode (rather than just popover) like x-editable allows?

I have question
I use this code
Address
'; $editable = Editable::begin([ 'model'=>$model, 'attribute'=>'address', 'size'=>'md', 'displayValue' => '15th Main, OK, 10322', 'options'=>['placeholder'=>'Enter address...'] ]); $form = $editable->getForm(); echo Html::hiddenInput('kv-complex', '1'); $editable->afterInput = $form->field($model, 'province_id')->widget(\kartik\widgets\Select2::classname(), [ 'data'=>ArrayHelper::map($modelProvince, 'province_id', 'province_name'), 'options'=>['placeholder'=>'Enter province...'], 'pluginOptions'=>['allowClear'=>true] ]) . "\n" . $form->field($model, 'zipcode')->textInput(['placeholder'=>'Enter zip code...']); Editable::end(); ?>

When I submit data, in Controller I validate data by use below function.
ActiveForm::validate($model)

and return validated data as below
{"usershop-address":["Address cannot be blank."],"usershop-province_id":["Province cannot be blank."],"usershop-zipcode":["Zipcode cannot be blank."]}

Question is, How to show each error message to each input field?

Thanks,

Enhance events to include additional data for advanced use cases

• editableSubmit: pass the editable form jquery element in addition to editable input element value
• editableSuccess: pass ajax response data and editable form jquery element in addition to editable input element value
• editableError: pass ajax response data editable form jquery elementin addition to editable input element value

Hi Kartik,

I'm using the yii2-editable widget with the input type 'widget' and the yii2-password widget to allow my users to change their password while controlling the strength.

It works great when the user input is valid. However when the password doesn't validate, the error message is displayed correctly but it seems it's not reset when another value is typed in the input. Even if the user type a valid password, the previous error is still displayed and the yii2-editable widget doesn't close.
I check the AJAX response in that case and the JSON is correct : output contains the text I want to display instead of password and message is empty.
If I reset the yii2-editable form with the button, the error goes away and it works again with a valid password.

Do you have an idea why it's behaving that way ? Am I doing something wrong ? Maybe the was the yii2-password widget works doesn't allow the Editable widget to reset the error ?

Thank you for your help solving that issue !

Hi,

I'm trying to use Editable::INPUT_WIDGET input type (inside an EditableColumn but I think the problem exists also in Editable widget).

This line (https://github.com/kartik-v/yii2-editable/blob/master/editable/Editable.php#L394) is never reached because INPUT_WIDGET is in array $_inputList

/* ... *.
private static $_inputsList = [
        self::INPUT_HIDDEN => 'hiddenInput',
/*.....*/
        self::INPUT_WIDGET => 'widget',
    ];

/*.....*/
 if ($this->inputType === self::INPUT_HTML5_INPUT) {
            echo $this->renderHtml5Input();
        } elseif (in_array($this->inputType, static::$_inputsList)) {
            echo $this->renderInput();
        } elseif (in_array($this->inputType, static::$_inputWidgets)) {
            echo $this->renderWidget($this->inputType);
        } elseif ($this->inputType === self::INPUT_WIDGET) {
            $class = ArrayHelper::remove($this->_inputOptions, 'class', '');

So, I tried to remove it from the array, and now, I have another problem when the widget is created.
You are using class entry in the option array, but this entry is also used for Css.
I suggest to rename it to widgetClass

Here's a portion of my code:

[
                        'class' => EditableColumn::className(),
                        'attribute' => 'date',
                        'header' => 'Date',
                        'format' => ['date', 'php:d/m/Y'],
                        'hAlign' => GridView::ALIGN_CENTER,
                        'options' => [
                            'class' => 'col-md-1',
                        ],
                        'editableOptions' => function ($model, $key, $index) {
                            return [
                                'format' => Editable::FORMAT_LINK,
                                'header' => 'Date du créneau',
                                'preHeader' => Icon::show('pencil'),
                                'size' => 'sm',
                                'placement' => PopoverX::ALIGN_TOP,
                                'inputType' => Editable::INPUT_WIDGET,

                                'options' => [
                                    'class' => DateControl::className(),
                                    'pluginOptions' => [
                                        'language' => 'fr',
                                    ],
                                ],
                                'submitButton' => [
                                    'label' => Icon::show('check') . 'Appliquer',
                                    'class' => 'btn btn-primary'
                                ]
                            ];
                        }
                    ],

I'll send you a PR with my changes.

Thanks.

Extension to undergo some changes for ensuring Editable widget works seamlessly in grids/tabular layouts as part of EditableColumn - to trigger client validation in ActiveForms the right way.

Hi,
why do you return an empty message every time if the operation is successful?

A question: is it possible to hide the reset button?
Tried 'resetButton'=>null but a not styled reset button is till shown.
Sometimes a reset button doesn't make sense and will only confuse users, would be nice to diable it.

Add editableChange, editableSubmit, editableReset, editableSuccess, and editableError events.

Line 367

if (is_array($this->displayValueConfig) && !empty($this->displayValueConfig[$value])) {
    $this->displayValue = $this->displayValueConfig[$value];
}

Illegal offset type in isset or empty when the $value is array variable.

Hi !

• Before when using jquery-ui:
  
• After when using jquery-ui, there is an error follwing:
  
  =>This mean that there is a clash between jquery of editable and jquery-ui.
  But, i don't want to give up jquery-ui.js in my project.
  Is there any ways help me this ? thanks. :)
  Lau.

Widget is used with default options in GridView, model and attribute options are set.
If i enter invalid data and submit form, i get the following JSON output:
output - "", message - "Validation error".
As expected the input field fills with red color and validation error message appears.
Then when i enter valid data, the JSON changes to:
output - "value", message - "".
So the value was successfully updated in database, but in the form the validation error message is still shown.
If I completely reload the page I see the updated value.
So the only possible workaround that I found is to click "Reset" button and submit valid data again, after that the popover closes and the value in cell updates.
But clicking each time the reset button does not seem to be user friendly to me.
Is it conceived to work like this or is it just a bug?

Hi
i updated to latest packages.
after starting migrating i get the following stack:

Hi,
Before this issue I use v3.3.2 it work perfect,
after update to v3.3.4 I found this error

TypeError: this.$dialog is undefined
this.$dialog.on('mousedown.dismiss.bs.modal', function () {
bootstrap.js (line 972, col 4)

TypeError: this.$dialog is undefined
this.$dialog.off('mousedown.dismiss.bs.modal')
bootstrap.js (line 1035, col 4)

I use Yii2 framework with this widget https://github.com/kartik-v/yii2-editable

HI !
I have a problem. I need to load editable-widget, using AJAX.

//controller
public function actionItem(){
   return $this->renderAjax('_item');
}

// views/main.php
<div id = "cloneDiv">
<?=Yii::$app->controller->renderPartial('_item')?>
</div>
<input type="button" value="Click" onclick="a()">
<script>
function a(){
    $.post('item', function(data){
            $("#cloneDiv").html(data);
     });
}
</script>

// views/_item.php
<?
$widgetParams = [
    'type'=>'primary',
    'size'=>'md',
    'editableValueOptions'=>['class'=>'text-success']
];

echo \kartik\editable\Editable::widget(
    array_merge($widgetParams, [
        'id'=>'asdf',
        'name' => 'asd',
        'inputType'=>\kartik\editable\Editable::INPUT_TEXT,
    ])
);

When I click to the button, editable-widget loads to '#cloneDiv', but widget doesn't work..
I tried to use renderAjax, renderPartial in my Action - no results.

New ajaxSettings property that can be used to merge additional ajax settings/options for editable submission.

0 integer value is treated as "null" and "not set" message appears.
This is because of this empty check:

if (empty($this->valueIfNull)) {
    $this->valueIfNull = '<em>' . Yii::t('kveditable', '(not set)') . '</em>';
}

The workaround I used is setting 'valueIfNull' option to some html string, for example like this: <span>0</span>. As i remember in framework itself the value is treated as "not set" only if it's null.
Does not seem like a big problem, but I think it's better to display 'not set' only if value is null by default.

New boolean property autoGuessInput that will auto guess the input type for HTML inputs or krajee widgets including DateControl and set the core input options (CSS class to kv-editable-input). For any custom / third party widgets, this can be set to false and one needs to manually add the kv-editable-input class correctly to the input markup.

My Code in "/manage/shop/index"
'shop-form', 'action' => ['/manage/shop/update'], 'options' => ['class' => 'form-horizontal'], 'fieldConfig' => [ 'template' => "{label}\n

When i click Apply, It's request GET to url /manage/shop/index

Also I read you demo page and document many time.

Let's say we have boolean value to edit (or integer values tied up with constants). Values in database are 0 for false and 1 for true.
To display user friendly values I wrote simple method which returns string 'yes' or 'no' according to attribute value. But when the value gets updated after ajax request, the new value becomes 0 or 1. That means it was directly taken from the JSON output and we must convert it to string by ourselves during JSON return.
I think it wiil be more flexible if we can just pass array like that [0 => 'No', 1 => 'Yes'] without creating dedicated method in model. For more complex arrays we can still use the method in model to retrieve array (or closure maybe). And if that array was set the value from the server after update will be automatically converted to proper string.
Or maybe it will be even better to have the separate options for array and single value and only one of them must be set.

(This used to work)

When clicking on the editable column in a grid, nothing happens - the popup form does not show.
Using the grid column definition as follows:

[
    'class' => 'kartik\grid\EditableColumn',
    'attribute'=>'Fullname', 
    'editableOptions' => [
        'header' => 'Name', 
        'inputType' => Editable::INPUT_TEXT,
    ]
],

I followed the information on the editable page for editableSuccess process, but I'm not getting a value back. I'm not getting a val back, instead I'm getting [object Object]. I did a console dump of val and couldn't find a portion of the object to grab the output value returned. I'm trying to update a calculation field after the editable is updated.

Here is what I have.

controller JSON return

echo Json::encode(['output'=>$value, 'message'=>'','success'=>true]);

view

Editable::widget([
.............
'pluginEvents' => [
     'editableSuccess'=>'function(val) {
          document.getElementById("totalval").innerHTML = val;
     }',
],
.............

Hello,

I want to change the value of the input before "submitting" the form.

My situation:
I create a gridview. There I have a column which is formattet like this: "key1"=>"value1","key2"=>"value2" (hstore in PostgreSQL).
The output in the gridview is correct. I want to edit this value like an array:
| INPUT FOR KEY | = | INPUT FOR VALUE |
...
I add rows for a new key-value pair with javascript.
Now I want to format it to the syntax of the hstore.

Is there a way to trigger a "beforeSubmit"-method for formatting the "new" inputs?

Thanks and best regards from Germany,

Heddy147

SImple example:

<?php \yii\widgets\Pjax::begin(); ?>
<?= GridView::widget([
        'dataProvider' => $dataProvider,
        'toolbar' => false,
        'filterModel' => $searchModel,
        'columns' => [
        [
               'class' => 'kartik\grid\EditableColumn',
               'attribute' => 'url',
               'readonly'=>function($model, $key, $index, $widget) {
                              return false;
               },
               'editableOptions' => [
                       'inputType' => \kartik\editable\Editable::INPUT_TEXT,
                       'options' => [
                       ],
               ],
               'format' => 'url',
        ],
]);?>
<?php \yii\widgets\Pjax::end(); ?>

When we click grid view column header for sorting or type something in filter field, grid view will be updated using ajax (because it placed inside pjax widget). After update, editable field not works.

The root of problem is an event binding method, used in javascript file https://github.com/kartik-v/yii2-editable/blob/master/assets/js/editable.js. Example:
$form.on('submit', function (ev) { not works after ajax update
$(document).on('submit', $form, function (ev) { works after ajax update.
Reason: when DOM element replaced by another HTML content, all children are removed (all event bindings lost) and after removing, new content placed to element (without any event bindings). When we use $(document).on... construction, event bindings will be saved by jQuery and field will work correctly after ajax update.

Sorry my english :)

Special styling when editableButtonOptions['disabled'] = true

Hi,
I have use Editable widget in gridview successfully:
'value' => function($model,$attribute,$index,$widget){
return kartik\editable\Editable::widget([
'name' => 'quantity-' . $index,
'value'=> $model['quantity'],
'type'=>'default',
'size'=>'md',
'placement'=>'top',
'containerOptions'=>['style'=>'min-width:200px;width:200px;text-align:center;'],
'contentOptions'=>['style'=>'width:200px;text-align:center;'],
'inputType'=>kartik\editable\Editable::INPUT_SPIN,
'editableValueOptions'=>['class'=>'text-success h2'],
]);
},
I have tried a lot of attributes but i have not known how to set some attributes for Popover and Spin such as:

• Can not align text center in Spin itsself
• Set width for Spin is ok, but for Popover is not.(I'd like custom 'size'=>'md')
• Do not know how to hidden Reset button.
• Do not know how to use client events and submit ajax for Spin widget
• How to add button to footer
  May you give me some suggestions ?Thanks.

Enhance beforeInput & afterInput to be passed as callback function.

"valueIfNull" option is not working

I setup Gridview Editable Column with basic input support.

The input pops up successfully but it has no default value, just a blank value.

 [
     'class' => 'kartik\grid\EditableColumn',
     'attribute' => 'CollectionNotes',
     'value' => 'CollectionNotes',
    'width' => '30%',
     'editableOptions' => function ($model, $key, $index) {
        return [
            'header' => 'Notes',
            'size' => 'md',
            'name' => 'CollectionNotes',
            'afterInput' => Html::hiddenInput('PropertyID', $key),
            'displayValue' => $model->CollectionNotes,
     ];
     }
 ],

I had to Edit, yii2-Editable\Editable.php:

$value = $this->hasModel() ? Html::getAttributeValue($this->model, $this->attribute) : $this->value;

        if (!isset($this->displayValue)) {
            $this->displayValue = $value;
        }
        if (!isset($this->value))
        {
            $this->value = $this->displayValue;
        }

Not sure if I missed something or if this is my error?

Enhancements to the widget to allow reinitalization of popover-x plugin when rendering via Pjax. A new property pjaxContainerId would need to be added for handling such scenarios.

How to translate label kveditable->Apply ? Or how to set a default button label in global config />

JSLint changes and include option to extend Editable Constructor.