Nested widgets

[kaarleenzz]

Could you update the "Hypothetical Scenario", "View" and "Controller" to show how to use the nested widget functionality properly?

I'm having trouble figuring out how to save/update nested widget values properly reflecting their relations.

[wbraganca]

Ok

[kaarleenzz]

Thank you, looking forward to it :+1:

[wbraganca]

You could put here of the code of your "view"?

[kaarleenzz]

I tried to implement the nested manner, but couldn't get it to work the way I wanted so I fell back to one level for now. Could you do it through an example?

Here's could be hypothetical scenario: A PERSON can have many HOUSES, each house, can have multiple ROOMS.

I need to be able to add multiple HOUSES to the PERSON on the first level; and then add ROOMS to the added HOUSES on the second level.

So basically HOUSES would have a foreign key 'person_id' and ROOMS would have a foreign key 'house_id'.

The idea is exactly what you have in the first image "Create Nested Items" I just need to know how to implement that type of logic, how to go "deeper" in levels.

[skeeran]

looking also forward to that example code

[kaarleenzz]

Any updates on this? :)

[skeeran]

also waiting and checking evryday :)

[kaarleenzz]

yeah... same here :D

[wennaspeedy]

Its done? I need to go depeer in levels too...

[cloudcaptain]

I'm having a problem with Nested Widgets using the following code. It won't assign incremental ID's to the subform records.

<div class="receipt-deposit-form">

<!-- The Deposit Information    -->
    <?php $form = ActiveForm::begin(['id' => 'deposit-form']); ?>
    <div class="row">
        <div class="col-sm-4">
            <?= $form->field($modelDeposit, 'effective_date')->textInput(['maxlength' => true]) ?>
        </div>
        <div class="col-sm-4">
            <?= $form->field($modelDeposit, 'staff_id')->textInput(['maxlength' => true]) ?>
        </div>
        <div class="col-sm-4">
            <?= $form->field($modelDeposit, 'billing_currency_id')->textInput(['maxlength' => true]) ?>
        </div>
    </div>

<!-- The Receipts on the Deposit -->
    <div class="row panel-body">
        <?php DynamicFormWidget::begin([
            'widgetContainer' => 'dynamicform_wrapper', // required: only alphanumeric characters plus "_" [A-Za-z0-9_]
            'widgetBody' => '.container-payments', // required: css class selector
            'widgetItem' => '.payment-item', // required: css class
            'insertButton' => '.add-payment', // css class
            'deleteButton' => '.del-payment', // css class
            'model' => $modelsPayment[0],
            'formId' => 'deposit-form',
            'formFields' => [
                'created_date',
                'cash_receipt_id',
                'receipt_voided',
            ],
        ]); ?>

        <h4>Deposit Receipts</h4>
        <table class="table table-bordered">
            <thead>
                <tr class="info">
                    <td></td>
                    <td><?= Html::activeLabel($modelsPaymentLoads[0], 'created_date'); ?></td>
                    <td><?= Html::activeLabel($modelsPaymentLoads[0], 'cash_receipt_id'); ?></td>
                    <td><?= Html::activeLabel($modelsPaymentLoads[0], 'receipt_voided'); ?></td>
                    <td><label class="control-label">Receipt Items</label></td>
                </tr>
            </thead>

            <tbody class="container-payments"><!-- widgetContainer -->
            <?php foreach ($modelsPayment as $i => $modelPayment): ?>
                <tr class="payment-item"><!-- widgetBody -->
                    <?php
                        // necessary for update action.
                        if (! $modelPayment->isNewRecord) {
                            echo Html::activeHiddenInput($modelPayment, "[{$i}]id");
                        }
                    ?>

                        <td>
                            <button type="button" class="del-payment btn btn-danger btn-xs"><i class="glyphicon glyphicon-minus"></i></button>
                        </td>
                        <td>
                            <?= Html::activeTextInput($modelPayment, "[{$i}]created_date",
                                                ['maxlength' => true, 'class' => 'form-control']); ?>
                        </td>
                        <td>
                            <?= Html::activeTextInput($modelPayment, "[{$i}]cash_receipt_id",
                                                ['maxlength' => true, 'class' => 'form-control']); ?>
                        </td>
                        <td>
                            <?= Html::activeCheckbox($modelPayment, "[{$i}]receipt_voided",
                                                ['class' => 'form-control']); ?>
                        </td>

<!-- The Items on the Receipt -->
                        <td>

                            <?php DynamicFormWidget::begin([
                                'widgetContainer' => 'dynamicform_inner', // required: only alphanumeric characters plus "_" [A-Za-z0-9_]
                                'widgetBody' => '.container-loads', // required: css class selector
                                'widgetItem' => '.load-item', // required: css class
                                'insertButton' => '.add-load', // css class
                                'deleteButton' => '.del-load', // css class
                                'model' => $modelsPaymentLoads[0],
                                'formId' => 'deposit-form',
                                'formFields' => [
                                    'departure_nav_waypt_airport_id',
                                    'destination_nav_waypt_airport_id',
                                    'load_rate_id',
                                    'price_ttl_price_target',
                                ],
                            ]); 
                            // FIX: Each line is not getting a new ID.  All are ID'd as [0]
                            ?>

                            <table class="table table-bordered">
                                <thead>
                                    <tr class="active">
                                        <td></td>
                                        <td><?= Html::activeLabel($modelsPaymentLoads[0], 'departure_nav_waypt_airport_id'); ?></td>
                                        <td><?= Html::activeLabel($modelsPaymentLoads[0], 'destination_nav_waypt_airport_id'); ?></td>
                                        <td><?= Html::activeLabel($modelsPaymentLoads[0], 'load_rate_id'); ?></td>
                                        <td><?= Html::activeLabel($modelsPaymentLoads[0], 'price_ttl_price_target'); ?></td>
                                    </tr>
                                </thead>

                                <tbody class="container-loads"><!-- widgetContainer -->
                                <?php foreach ($modelsPaymentLoads as $i => $modelPaymentLoads): ?>
                                    <tr class="load-item"><!-- widgetBody -->

                                        <?php
                                            // necessary for update action.
                                            if (! $modelPaymentLoads->isNewRecord) {
                                                echo Html::activeHiddenInput($modelPaymentLoads, "[{$i}]id");
                                            }
                                        ?>

                                        <td>
                                            <button type="button" class="del-load btn btn-danger btn-xs"><i class="glyphicon glyphicon-minus"></i></button>
                                        </td>

                                        <td>
                                            <?= Html::activeTextInput($modelPaymentLoads, "[{$i}]departure_nav_waypt_airport_id", 
                                                ['maxlength' => true, 'class' => 'form-control']); ?>
                                        </td>
                                        <td>
                                            <?= Html::activeTextInput($modelPaymentLoads, "[{$i}]destination_nav_waypt_airport_id", 
                                                ['maxlength' => true, 'class' => 'form-control']); ?>
                                        </td>
                                        <td>
                                            <?= Html::activeTextInput($modelPaymentLoads, "[{$i}]load_rate_id", 
                                                ['maxlength' => true, 'class' => 'form-control']); ?>
                                        </td>
                                        <td>
                                            <?= Html::activeTextInput($modelPaymentLoads, "[{$i}]price_ttl_price_target", 
                                                ['maxlength' => true, 'class' => 'form-control']); ?>
                                        </td>

                                    </tr>
                                <?php endforeach; // end of loads loop ?>
                                </tbody>
                                <tfoot>
                                    <td colspan="5" class="active"><button type="button" class="add-load btn btn-success btn-xs"><i class="glyphicon glyphicon-plus"></i></button></td>
                                </tfoot>
                            </table>
                            <?php DynamicFormWidget::end(); // end of loads widget ?>
                        </td> <!-- loads sub column -->

                </tr><!-- payment -->
            <?php endforeach; // end of payment loop ?>
            </tbody>
            <tfoot>
                <td colspan="5" class="info"><button type="button" class="add-payment btn btn-success btn-xs"><i class="glyphicon glyphicon-plus"></i></button></td>
            </tfoot>

        </table>
        <?php DynamicFormWidget::end(); // end of payment widget ?>
    </div>

    <div class="form-group">
        <?= Html::submitButton($modelPayment->isNewRecord ? 'Create' : 'Update', ['class' => 'btn btn-primary']) ?>
    </div>

    <?php ActiveForm::end(); ?>

</div>

My View ends up looking like this ...

And here is my HTML from Firebug ...

Notice that both of the inputs on the nested widget have the same id/name which is [0], [0], etc.

How do I set up the nested form so that these id's increment with each new line as in your DEMO 3 example where the id/name is [0][0], [0][1], etc ?

[kaarleenzz]

Could you post the code where you save the nested widgets in controller (actionCreate/actionUpdate)?

That would be greatly appreciated, thank you. :+1:

[cloudcaptain]

will post when I get it working ...

[cloudcaptain]

OK I've posted an example in the Wiki. Please note that the code has changed from the post above.

[kaarleenzz]

@cloudcaptain Thank you very much!!! Working nicely now :) :+1:

[cloudcaptain]

Suggest closing this issue - reference Wiki. https://github.com/wbraganca/yii2-dynamicform/wiki/Nested-Forms-Example

[sgntkeroro]

@cloudcaptain i refer to the link you provide above. still cant solve my problem. i got same index for all dynamic item. i have posted my question here(http://stackoverflow.com/questions/37432267/same-index-for-all-dynamic-items-nested-dynamic-form-yii2/37492882#37492882). wish someone can help me. thanks