How to translate this into Yii2 select2 kartik widget? I think the "data" attribute from the select2 kartik widget only allows for id -> text. Is there a way to get this done using the widget?
var data = [{
id: 0,
text: 'enhancement',
html: '<div style="color:green">enhancement</div>'
}, {
id: 1,
text: 'bug',
html: '<div style="color:red">bug</div><div><small>This is some small text on a new line</small></div>'
}];
function template(data) {
return data.html;
}
$("select").select2({
data: data,
templateResult: template,
escapeMarkup: function(m) {
return m;
}
});
The solution is to use the "data" attribute within the "pluginOptions" array:
echo $form->field($model, 'id_customer')->label(false)->widget(Select2::classname(), [
'data' => [],
'options' => ['placeholder' => Yii::t('app', 'Select a customer')],
'pluginOptions' => [
'allowClear' => true,
'data' => $customerList,
'escapeMarkup' => new JsExpression('function (markup) { return markup; }'),
'templateResult' => new JsExpression('formatTemplateResult'),
'templateSelection' => new JsExpression('formatSelection'),
],
]);
Related
I've used kartiks select2 many time with ajax before. Now when I tried to implement it again this error is thrown in console:
jquery.js:3850 Uncaught Error: Option 'ajax' is not allowed for Select2 when attached to a <select> element.
There is no other errors. My implementation looks like:
<?php
echo $form->field($model, 'destination_from')->widget(Select2::class, [
'initValueText' => isset($_GET['MassManagementSearch']) ? $_GET['MassManagementSearch']['destination_from'] : [], // set the initial display text
'options' => [
'placeholder' => 'Destination from ...',
'multiple' => true
],
'pluginOptions' => [
'allowClear' => true,
'minimumInputLength' => 3,
'language' => [
'errorLoading' => new JsExpression("function () { return 'Waiting for results...'; }"),
],
'ajax' => [
'url' => \yii\helpers\Url::to(['destination-from']),
'dataType' => 'json',
'data' => new JsExpression('function(params) { return {q:params.term}; }')
],
'escapeMarkup' => new JsExpression('function (markup) { return markup; }'),
'templateResult' => new JsExpression('function(city) { return city.text; }'),
'templateSelection' => new JsExpression('function (city) { return city.text; }'),
],
]); ?>
EDIT This my select2 version in composer.json:
"kartik-v/yii2-widget-select2": "#dev"
<?=
$form->field($model, 'contributors')->widget(Select2::classname(), [
'initValueText' => '',
'options' => ['placeholder' => 'Search for a Contributor ...'],
'pluginOptions' => [
'allowClear' => true,
'minimumInputLength' => 3,
'ajax' => [
'url' => \yii\helpers\Url::to(['data2']),
'dataType' => 'json',
'data' => new JsExpression('function(params) { return {q:params.term}; }')
],
'escapeMarkup' => new JsExpression('function (markup) { return markup; }'),
'templateResult' => new JsExpression('function(contributor_id) { return contributor_id.text; }'),
'templateSelection' => new JsExpression('function (contributor_id) { return contributor_id.text; }'),
],
])->label('Contributors');
?>
How to show selected value, now it shows id as a selected.
please anyone help me.
UPDATE
Sorry for late reply didn't notice you need to set the initial text for the select2 as you are using the ajax option so you should use the option initValueText. According to the docs
initValueText : The text to displayed in Select2 widget for the
initial value. This is useful and applicable when you are using the
widget with ajax loaded data AND/OR you are not providing the data.
Check the ajax usage section for an example.
So you need to use it like below add this line inside your controller action and pass it to the view or add it inside the view before the select2
$contributorName = empty($model->contributors) ? '' : Contributors::findOne($model->contributors)->name;
<?=
$form->field($model, 'contributors')->widget(Select2::classname(), [
'initValueText' => $contributorName, // set the initial display text
'options' => ['placeholder' => 'Search for a Contributor ...'],
'data'=>yii\helpers\ArrayHelper::map(Contributors::find()->all(),'id','name')
'pluginOptions' => [
'allowClear' => true,
'minimumInputLength' => 3,
'ajax' => [
'url' => \yii\helpers\Url::to(['data2']),
'dataType' => 'json',
'data' => new JsExpression('function(params) { return {q:params.term}; }')
],
'escapeMarkup' => new JsExpression('function (markup) { return markup; }'),
'templateResult' => new JsExpression('function(contributor_id) { return contributor_id.text; }'),
'templateSelection' => new JsExpression('function (contributor_id) { return contributor_id.text; }'),
],
])->label('Contributors');
?>
You need to provide the data option to the set of values from which the selected value would be shown you want the text to be shown instead of the id, provide the data options in form of an array with key=>value pairs.
Looking at your code you want to show the contributor name against the id in database table so you should use ArrayHelper:map() along with querying your Contributors model, see below and update your field names for the Contributors model/table inside the ArrayHelper::map()
<?=
$form->field($model, 'contributors')->widget(Select2::classname(), [
'options' => ['placeholder' => 'Search for a Contributor ...'],
'data'=>yii\helpers\ArrayHelper::map(Contributors::find()->all(),'id','name')
'pluginOptions' => [
'allowClear' => true,
'minimumInputLength' => 3,
'ajax' => [
'url' => \yii\helpers\Url::to(['data2']),
'dataType' => 'json',
'data' => new JsExpression('function(params) { return {q:params.term}; }')
],
'escapeMarkup' => new JsExpression('function (markup) { return markup; }'),
'templateResult' => new JsExpression('function(contributor_id) { return contributor_id.text; }'),
'templateSelection' => new JsExpression('function (contributor_id) { return contributor_id.text; }'),
],
])->label('Contributors');
?>
I have this code in my gridview
....
[
'label'=>'Read',
'format' => 'html',
'value'=>function ($data) {
return Html::a('Read',Url::to(['readmessage/read/','q'=>$data->message_id]), ['data' => ['confirm' => 'My confirm question here?']]);
},
],
....
But above code is not generate data-confirm option in anchor link, and I have tried [data-confirm => 'My confirm question here?'] not working too.
What's wrong with my code?
Change the format to 'raw':
[
'label'=>'Read',
'format' => 'raw',
'value'=>function ($data) {
return Html::a('Read',Url::to(['readmessage/read/','q'=>$data->message_id]), ['data' => ['confirm' => 'My confirm question here?']]);
},
],
Just use "data-confirm"
[
'label'=>'Read',
'format' => 'html',
'value'=>function ($data) {
return Html::a('Read',Url::to(['readmessage/read/','q'=>$data->message_id]), ['data-confirm' => 'My confirm question here?']);
},
],
I am using two select2 ajax loading dropdown list using Yii2 kartik widget. I need to change selection of second dropdown while changing selection of first dropdown.
First Dropdown
<?php
$qtnno = '';
$qtn = ServiceQuotation::find()->where(['UDNO' => $model->QTN_UDNO])->one();
if($qtn != null) $qtnno = $qtn->UDNO;
echo $form->field($model, 'QTN_UDNO')->widget(Select2::classname(), [
'initValueText' => $qtnno, // set the initial display text
'options' => ['placeholder' => 'Search for a Quotation ...',
'onchange'=>'
$.getJSON( "'.Url::toRoute('getqtndetails').'", { id: $("#servicejobcard-qtn_udno").val() } )
.done(function( data ) {
$( "#'.Html::getInputId($model, 'QTNNO').'" ).val( data.qtnno );
$( "#'.Html::getInputId($model, 'QTNDATE').'" ).val( data.qtndate );
$( "#'.Html::getInputId($model, 'PCODE').'" ).select2({ data: [{id: data.pcode, text: data.pname}]});;
$( "#'.Html::getInputId($model, 'PCODE').'" ).select2("val",data.pcode);
$( "#'.Html::getInputId($model, 'PROJECTNAME').'" ).val( data.projectname );
}
);'
],
'pluginOptions' => [
'allowClear' => true,
'minimumInputLength' => 3,
'ajax' => [
'url' => $urlQtn,
'dataType' => 'json',
'data' => new JsExpression('function(params) { return {q:params.term}; }')
],
'escapeMarkup' => new JsExpression('function (markup) { return markup; }'),
'templateResult' => new JsExpression('function(data) { return data.text; }'),
'templateSelection' => new JsExpression('function (data) { return data.text; }'),
],
]);
?>
Second Drop Down
<?php
$cusName = empty($model->PCODE) ? '' : Customer::findOne($model->PCODE)->PNAME;
echo $form->field($model, 'PCODE')->widget(Select2::classname(), [
'initValueText' => $cusName, // set the initial display text
'options' => ['placeholder' => 'Search for a Customer ...',
],
'pluginOptions' => [
'allowClear' => true,
'minimumInputLength' => 3,
'ajax' => [
'url' => $url,
'dataType' => 'json',
'data' => new JsExpression('function(params) { return {q:params.term}; }')
],
'escapeMarkup' => new JsExpression('function (markup) { return markup; }'),
'templateResult' => new JsExpression('function(party) { return party.text; }'),
'templateSelection' => new JsExpression('function (party) { return party.text; }'),
],
]);
?>
Using the above code i'm able to change the selection in second dropdown. But after the change, i'm not able to make selection in second dropdown.
Please help...
Try to use onchange event this way:
[
'options' => [],
// other settings
'pluginEvents' => [
'change' => "function() { alert('change'); }",
]
]
You can find additional information on that page http://demos.krajee.com/widget-details/select2
If you are not restricted to using only Select2 widget, I would suggest you use the Kartik V's DepDrop Widget specifically created for dependent drop-downs.
Since you have not given a lot of context to what your code is actually doing, I am giving a simple 2 level dependency example (slightly modified version of example given in Kartik V's depdrop widget page).
/*
* 2-level dependency example
*/
// THE VIEW
use kartik\widgets\DepDrop;
// Parent
echo $form->field($model, 'cat')->dropDownList($catList, ['id'=>'cat-id']);
// Dependent Dropdown (Child)
echo $form->field($model, 'subcat')->widget(DepDrop::classname(), [
'options'=>['id'=>'subcat-id'],
'pluginOptions'=>[
'depends'=>['cat-id'],
'placeholder'=>'Select...',
'url'=>Url::to(['/site/subcat'])
]
]);
// THE SITE CONTROLLER (/site/subcat)
public function actionSubcat() {
$out = [];
if (isset($_POST['depdrop_parents'])) {
$parents = $_POST['depdrop_parents'];
if ($parents != null) {
$cat_id = $parents[0];
$out = self::getSubCatList($cat_id);
// the getSubCatList function will query the database based on the
// cat_id and return an array like below:
// [
// ['id'=>'<sub-cat-id-1>', 'name'=>'<sub-cat-name1>'],
// ['id'=>'<sub-cat_id_2>', 'name'=>'<sub-cat-name2>']
// ]
echo Json::encode(['output'=>$out, 'selected'=>'']);
return;
}
}
echo Json::encode(['output'=>'', 'selected'=>'']);
}
The above code can be customized to your requirements.
Here is the link for more details: http://demos.krajee.com/widget-details/depdrop
you can add this kind of query to make the job.
$cusname=QtnUdno::find()->select('PCODE')->where(['UDNO'=>$model->QTN_UDNO])->one();
use kartik\widgets\Select2;
echo Select2::widget([
'model' => $myModel,
'name' => 'company[]',
'options' => [
'placeholder' => 'Select a company ...',
'multiple' => true,
],
'value' => 6, //doesn't work
'initValueText' => '6', //doesn't work
'pluginOptions' => [
'allowClear' => true,
'ajax' => [
'url' => Url::to(['/company/default/get-company-list']),
'dataType' => 'json',
'data' => new JsExpression('function(term,page) {
return {term : term.term};
}'),
'results' => new JsExpression('function(data,page) {return {results:data.results}; }'),
],
'initSelection' => new JsExpression('function(element, callback) {
$(element).val(6); //doen't work
callback({"text" : "Vendor B", "id" : 6}); // it does only set text, not id
}'),
],
]);
... many many select2 form below too, that named 'company[]'
After form submit, if user come back to this page, I want to set what user selected as default.
How can I set default value for Select2 widget?
When you update the model, it will automatically have the last selected value.
$myModel = new \app\models\myModel;
$myModel->attributes = \Yii::$app->request->post('myModel');