Настройка EditableColumn в виджете Gridview от Kartik

[webgrig]

Настроил GridView от Kartik так, что бы можно было редактировать поле с помощью select.

Код: Выделить всё

[
    'class' => '\kartik\grid\EditableColumn',
    'attribute' => 'status',
    'format' => 'html',
    'editableOptions' => [
        'value' => 1,
        'asPopover' => false,
        'inputType' => \kartik\editable\Editable::INPUT_DROPDOWN_LIST,
        'data' => [
            0 => 'No active',
            1 => 'Active'
        ],
        'options' => ['class'=>'form-control', 'prompt'=>'Select status...'],
        'displayValueConfig'=> [
            '0' => '<i class="glyphicon glyphicon-remove text-danger"></i>',
            '1' => '<i class="glyphicon glyphicon-ok text-success"></i>',
        ],
    ],
    'headerOptions' => ['width' => '150'],
    'filterType' => GridView::FILTER_SELECT2,
],

Это код генерирует обычный select:

Код: Выделить всё

<select id="languages-1-status" class="form-control kv-editable-input" name="Languages[1][status]" aria-invalid="false">
	<option value="">Select status...</option>
	<option value="0">No active</option>
	<option value="1" selected="">Active</option>
</select>

но теперь стоит задача вместо текстовых строк пунктов селекта "No active" и "Active" отобразить соответствующие иконки в селектею Для этого пытаюсь сделать так:

Код: Выделить всё

'data' => [
    0 => '<i class="glyphicon glyphicon-remove text-danger"></i>',
    1 => '<i class="glyphicon glyphicon-ok text-success"></i>'
],

я надеялся получить следующий селект:

Код: Выделить всё

<select id="languages-1-status" class="form-control kv-editable-input" name="Languages[1][status]">
	<option value="">Select status...</option>
	<option value="0"><i class="glyphicon glyphicon-remove text-danger"/></option>
	<option value="1" selected><i class="glyphicon glyphicon-ok text-success"/></option>
</select>

но вместо этого я получаю html-сущтости в теге <option>

Код: Выделить всё

<select id="languages-1-status" class="form-control kv-editable-input" name="Languages[1][status]">
	<option value="">Select status...</option>
	<option value="0">&lt;i class=&quot;glyphicon glyphicon-remove text-danger&quot;&gt;&lt;/i&gt;</option>
	<option value="1" selected>&lt;i class=&quot;glyphicon glyphicon-ok text-success&quot;&gt;&lt;/i&gt;</option>
</select>

Подскажите пожалуйста как это исправить.

[urichalex]

В option нельзя выводить ничего кроме текста. Можно заюзать Select2

[webgrig]

В option нельзя выводить ничего кроме текста. Можно заюзать Select2

как?

[urichalex]

http://demos.krajee.com/widget-details/ ... e-advanced

[webgrig]

Но как Select2 заюзать совместно с GridView?
В каком именно параметре GridView нужно прописать настройки, которые описаны здесь:
http://demos.krajee.com/widget-details/ ... e-advanced

[Alexum]

Включить виджет можно изменив inputType:

Код: Выделить всё

...
        'inputType' => \kartik\editable\Editable::INPUT_SELECT2,
...

С настройкой сложнее, почитайте документацию: http://demos.krajee.com/editable

[webgrig]

Ни фига не получается разобраться. Help please!
сделал так как написано здесь http://demos.krajee.com/editable#usage-inline :

Код: Выделить всё

[
    'class' => '\kartik\grid\EditableColumn',
    'attribute' => 'status',
    'editableOptions' => [
        'asPopover' => false,
        'inputType' => Editable::INPUT_DEPDROP,
        'displayValueConfig'=> [
            '0' => '<i class="glyphicon glyphicon-remove text-danger"></i>',
            '1' => '<i class="glyphicon glyphicon-ok text-success"></i>',
        ],
        'options' => [
            'type' => DepDrop::TYPE_SELECT2,
            'select2Options'=> ['pluginOptions'=>['allowClear'=>true]],
            'options' => ['id'=>'subcat-id-i', 'placeholder' => 'Select status...'],
            'pluginOptions'=>[
                'depends'=>['cat-id-i'],
                'url' => Url::to(['/site/subcat'])
            ]
        ]
    ],
    'headerOptions' => ['width' => '150'],
    'filterType' => GridView::FILTER_SELECT2,
],

но в результате select в окне редактирования вообще не отображается,
т.е. он в принципе генерируется, но у него стиль display: none и он имеет всего только один пункт "Select status" а должно быть еще два пункта

[webgrig]

Вот решение:
сначала определяем переменные

Код: Выделить всё

//    $format = <<< SCRIPT
//        function format(status) {
//            return status.text;
//        }
//SCRIPT;
    $escape = new JsExpression("function(m) { return m; }");
//    $this->registerJs($format, View::POS_HEAD);
    $statusData = [
        0 => '<i class="glyphicon glyphicon-remove text-danger"></i>',
        1 => '<i class="glyphicon glyphicon-ok text-success"></i>',
    ];

затем определяем конфиг:

Код: Выделить всё

            [
                'class' => '\kartik\grid\EditableColumn',
                'attribute' => 'status',
                'headerOptions' => ['width' => '150'],
                'filterType' => GridView::FILTER_SELECT2,
                'filterWidgetOptions' => [
                    'data' => $statusData,
                    'hideSearch' => true,
                    'pluginOptions'=>[
                        //'templateResult' => new JsExpression('format'),
                        //'templateSelection' => new JsExpression('format'),
                        'escapeMarkup' => $escape,
                        'placeholder' => 'Select status ...',
                        'multiple' => true,
                    ],
                ],
                'editableOptions' => [
                    'asPopover' => false,
                    'pluginEvents' => [
                        "editableChange" => "function(e, val) {
                            $(this).find('.kv-editable-submit').click();
                        }",
                    ],
                    'inlineSettings' => [
                        'options' => [
                            'style' => 'margin: 0',
                        ],
                        'templateAfter' =>  '<div class="form-group">
                                                <div style="display: none">{buttons}</div>{close}
                                             </div>
                                            </div>',
                    ],
                    'displayValueConfig'=> $statusData,
                    'inputType' => Editable::INPUT_SELECT2,
                    'options' => [
                        'data' => $statusData,
                        'hideSearch' => true,
                        'pluginOptions'=>[
                            'escapeMarkup' => $escape,
                        ],
                    ],
                ],
            ],

и еще не забыть в Search-модели в rules для этого поля 'status' - (которое мы настраивали выше в GridView), установить валидатор 'safe'. Иначе мультиселектовый фильтр для этого поля не будет работать.

P/S

Вообще Kartik - красава.
Плагины у него просто ахриненные!!!!!!!
Чего только один GridView стоит.
Я хоть и помучился пока разобрался со всеми параметрами, но абсолютно не жалею об этом, потому что этот плагин бомба'!!!!!!!
Всем советую.