Tabular Step

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'
            ]
        ]
    ]
);
Add All Tags

 

Add all fields