kartik\Select2 in GridView Filter

[kamil.c (Kamil Cierczek)]

Hi,

I’m trying to use Kartik’s widget Select2 as filter Input. Filtering works fine, but after reload dataProvider in select2 I’ve got placeholder and not selected value. Below is code I’m using in my view file. I don’t post any controller or models/searchModels code becouse I think it is irrelevant (also searching and filtering works fine). Could you guide me to right config of this extnsion?

<?= GridView::widget([

	'dataProvider' => $dataProvider,

	'filterModel' => $searchModel,

	'columns' => [

		// other columns

		[

			'attribute' => 'type',

			'value' => function($model){

				/* @var $model app\models\Object */

				return $model->typeNames()[$model->type];

			},

			'filter' => Select2::widget([

				'name' => 'ObjectSearch[type]',

				'data' => Object::typeNames(),

				'theme' => Select2::THEME_BOOTSTRAP,

				'hideSearch' => true,

				'options' => [

					'placeholder' => 'Wybierz typ obiektu...',


					// I've tried something like below but I'don't like this solution. Also it doesn't work.


					'value' => isset($_GET['ObjectSearch[type]']) ? $_GET['ObjectSearch[type]'] : null

				]

			]),

			'contentOptions' => [

				'style' => 'vertical-align: middle;'

			]

		],

		// other columns

	],

]); ?>

Thanks for your help,

Kamil

[kamil.c (Kamil Cierczek)]

Solution:

I used Select2 with name parameter. Instead this I should use it with ‘model’ and ‘attribute’ parameteres, like so (i.e. type value filter):

...

'filter' => Select2::widget([

    'model' => $searchModel,

    'attribute' => 'type',

    'data' => Object::typeNames(),

    'theme' => Select2::THEME_BOOTSTRAP,

    'hideSearch' => true,

    'options' => [

        'placeholder' => 'Wybierz typ obiektu...',

    ]

]),

...

[RogerioSoares]

Solution ajax:

...

use kartik\grid\GridView;

use kartik\select2\Select2;

use yii\web\JsExpression;

...


$formatJs = <<< 'JS'

var formatRepoEscola = function (repo) {

    if (repo.loading) {

        return repo.nome;

    }

    var markup = '<div class="row">' + 

    '<div class="col-sm-12">(' + repo.cnpj + ')'+ repo.nome + '</div>' + 

'</div>';

    return '<div style="overflow:hidden;">' + markup + '</div>';

};

var formatRepoSelectionEscola = function (repo) {

    return repo.nome ? repo.nome : repo.text;

}

JS;

 

// Register the formatting script

$this->registerJs($formatJs, \yii\web\View::POS_HEAD);


...

                'filter'=> Select2::widget([

                    'name' => 'PedidoSearch[id]',

                    'theme' => Select2::THEME_BOOTSTRAP,

                    'value' => $nomeescola,

                    'hideSearch' => true,

                    'options' => [

                        'placeholder' => 'Digite ...',

                    ],

                    'pluginOptions' => [

                        'allowClear' => true,

                        'minimumInputLength' => 3,

                        'ajax' => [

                            'url' => "/cadastro/escola/lista",

                            'dataType' => 'json',

                            'delay' => 250,

                            'data' => new JsExpression('function(params) { return {q:params.term, page: params.page}; }'),

                            'cache' => true

                        ],

                        'escapeMarkup' => new JsExpression('function (markup) { return markup; }'),

                        'templateResult' => new JsExpression('formatRepoEscola'),

                        'templateSelection' => new JsExpression('formatRepoSelectionEscola'),

                    ],

                ]),

...

[spiderbomb23 (Pnelson Tome)]

Hello,

I have the same issue.

Tried to apply your solution, but after reload it only displays the ID and not the name. For debug, I added a console log inside formatRepoSelectionEscola and the repo.nome and repo.text are both with ID.