Code sample
//View code
use buttflattery\formwizard\FormWizard;
echo FormWizard::widget(
[
'formOptions' => [
'id' => 'my_form_tabular'
],
'steps' => [
[
//should be a single model or array of Activerecord model objects but for a single model only see wiki on github
'model' => [$shootTag],
//set step type to tabular
'type' => FormWizard::STEP_TYPE_TABULAR,
'fieldConfig' => [
'shoot_id' => [
'containerOptions' => [
'class' => 'form-group'
],
'options' => [
'type' => 'dropdown',
'itemsList' => ArrayHelper::map(Shoots::find()->all(), 'id', 'name'),
'prompt' => 'Please select a value'
]
],
'tag_id' => [
'widget' => Select2::class,
'containerOptions' => [
'class' => 'form-group'
],
'options' => [
'data' => ArrayHelper::map(Tags::find()->all(), 'id', 'name'),
'options' => [
'class' => 'form-control'
],
'theme' => Select2::THEME_BOOTSTRAP,
'pluginOptions' => [
'allowClear' => true,
'placeholder' => 'Select Tag'
]
],
//set tabular events for select2 fix which doesnot work correctly after cloning
'tabularEvents' => [
'beforeClone' => "function(event, params){
//fix for select2 destroy the plugin
let element = $(this);
element.select2('destroy');
}",
"afterClone" => "function(event, params){
//bind select2 again after clone
let element = $(this);
let elementId = $(this).attr('id');
let dataKrajee = eval(element.data('krajee-select2'));
let dataSelect2Options = element.data('s2-options');
$.when(element.select2(dataKrajee)).done(initS2Loading(elementId, dataSelect2Options));
}",
"afterInsert" => "function(event,params){
//initialize the options for the select2 after initializing
let selectElement = $(this).find('.field-shoottag-'+params.rowIndex+'-tag_id > select');
let dataKrajee = eval(selectElement.data('krajee-select2'));
//update the dataset attribute to the
if (typeof selectElement[0].dataset.select2Id !== 'undefined') {
//get the old dataset which has the old id of the input the select2 is bind to
let oldDataSelect2Id = selectElement[0].dataset.select2Id;
//delete the old dataset
delete selectElement[0].dataset.select2Id;
//add the new dataselect pointing to the new id of the cloned element
let newDataSelect2Id = oldDataSelect2Id.replace(
/\-([\d]+)\-/,
'-' + parseInt(params.rowIndex) + '-'
);
//add the new dataset with the new cloned input id
selectElement[0].dataset.select2Id= newDataSelect2Id;
}
selectElement.select2(dataKrajee);
}"
]
]
]
],
[
'model' => $shootsModel,
'title' => 'My Shoots',
'description' => 'Add your shoots',
'formInfoText' => 'Add all fields'
]
]
]
);