active form

<?php

use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\bootstrap\Modal;
use kartik\date\DatePicker;

/* @var $this yii\web\View */
/* @var $model app\models\PenerimaanProduksi */
/* @var $form yii\widgets\ActiveForm */
?>

<div class="penerimaan-produksi-form">
    <div class="row">
        <div class="col-xs-4">
            <?php $form = ActiveForm::begin(); ?>
            
            <?= $form->field($model, 'ref_id')->textInput(['maxlength' => true, 'readonly' => false]) ?>
            <div id="BtnSearchPengiriman">
                <?= Html::button('Search Pengiriman Produksi', [
                    'value' => Yii::$app->urlManager->createUrl('/pengiriman-produksi/list'),
                    'class' => 'btn btn-primary',
                    'id' => 'BtnModalPengiriman',
                    'data-toggle' => "modal",
                    'data-target' => "#modalPengiriman",
                ]) ?>
            </div>
            <?= $form->field($model, 'received_date')->widget(DatePicker::className(),
                [
                    'type' => DatePicker::TYPE_COMPONENT_APPEND,
                    'pluginOptions' => [
                        'autoclose' => true,
                        'format' => 'yyyy-mm-dd'
                    ]
                ]) ?>
            <?= $form->field($model, 'bruto')->widget(\yii\widgets\MaskedInput::className(),
                [
                    'clientOptions' => [
                        'alias' => 'numeric',
                        'groupSeparator' => ',',
                        'digits' => 0,
                        'autoGroup' => true,
                        'removeMaskOnSubmit' => true,
                        'rightAlign' => false,
                    ]
                ]) ?>
            <?= $form->field($model, 'tara')->widget(\yii\widgets\MaskedInput::className(),
                [
                    'clientOptions' => [
                        'alias' => 'numeric',
                        'groupSeparator' => ',',
                        'digits' => 0,
                        'autoGroup' => true,
                        'removeMaskOnSubmit' => true,
                        'rightAlign' => false,
                    ]
                ]) ?>
            <?= $form->field($model, 'netto')->widget(\yii\widgets\MaskedInput::className(),
                [
                    'clientOptions' => [
                        'alias' => 'numeric',
                        'groupSeparator' => ',',
                        'digits' => 0,
                        'autoGroup' => true,
                        'removeMaskOnSubmit' => true,
                        'rightAlign' => false,
                    ]
                ]) ?>

            <?= $form->field($model, 'susut')->widget(\yii\widgets\MaskedInput::className(),
                [
                    'clientOptions' => [
                        'alias' => 'numeric',
                        'groupSeparator' => ',',
                        'digits' => 0,
                        'autoGroup' => true,
                        'removeMaskOnSubmit' => true,
                        'rightAlign' => false,
                    ]
                ]) ?>

            <?= $form->field($model, 'remark')->textarea(['rows' => 6]) ?>
            <div class="form-group">
                <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
            </div>
            <?php ActiveForm::end(); ?>
        </div>
        <div class="col-xs-6">
            <div id="view-pengiriman"></div>
        </div>
    </div>
    <?php
    Modal::begin([
        'header' => 'List Pengiriman Produksi',
        'id' => 'modalPengiriman',
        'size' => 'modal-lg',
        'class' => 'style=width:auto'
    ]);
    echo "<div id='modalContent'></div>";
    Modal::end();
    ?>
</div>
<?php
$script = <<< JS
$('#BtnModalPengiriman').click(function(e){    
    e.preventDefault();
    $('#modalPengiriman').modal('show')
        .find('#modalContent')
        .load($(this).attr('value'));  
    return false;
})

$('#penerimaanproduksi-bruto').change(function(){
    calculateNetto();    
})

$('#penerimaanproduksi-tara').change(function(){
    calculateNetto();    
})

function calculateNetto(){
    var bruto = $('#penerimaanproduksi-bruto').val(); bruto = bruto == "" ? 0 : Number(bruto.split(",").join(""));
    var tara = $('#penerimaanproduksi-tara').val(); tara = tara == "" ? 0 : Number(tara.split(",").join(""));
    $('#penerimaanproduksi-netto').val(bruto-tara).change();
}

$('#penerimaanproduksi-netto').change(function(){
   var netto_terima = $('#penerimaanproduksi-netto').val(); netto_terima = netto_terima == "" ? 0 : Number(netto_terima.split(",").join(""));
   var netto_kirim = document.getElementById('table-pengiriman-produksi').getElementsByTagName('td')[15].innerHTML;
   netto_kirim = netto_kirim == "" ? 0 : Number(netto_kirim.split(",").join("")); 
   $('#penerimaanproduksi-susut').val(netto_kirim - netto_terima);
})

JS;
$this->registerJs($script);
?>

modal contains gridview

<?php

use yii\helpers\Html;
use kartik\grid\GridView;
include '../config/export.php';

?>
<div class="pengiriman-produksi-list">
    <?php
    $gridColumns = [
        [
            'class' => 'yii\grid\ActionColumn',
            'template' => '{select}',
            'buttons' => [
                'select' => function($url, $model, $key){
                    return Html::button('Select', [
                        'title' => Yii::t('yii', 'Select'),
                        'aria-label' => Yii::t('yii', 'Select'),
                        'class' => 'btn btn-primary select-row',
                        'data-id' => $model->id,
                    ]);
                },
            ],
        ],
        'id',
        'send_date',
        ['attribute' => 'customer_id', 'value' => 'customer.name'],
        'vehicle_id',
        'contract_no',
        ['attribute' => 'item_id', 'value' => 'item.name'],
        ['attribute' => 'satuan_id', 'value' => 'satuan.name'],
        ['attribute' => 'bruto_tbg', 'format' => ['decimal', 2]],
        ['attribute' => 'bruto_a', 'format' => ['decimal', 2]],
        ['attribute' => 'bruto_b', 'format' => ['decimal', 2]],
        [
            'attribute' => 'bruto_c',
            'format' => ['decimal', 2],
        ],
        ['attribute' => 'tara_tbg', 'format' => ['decimal', 2]],
        ['attribute' => 'tara_a', 'format' => ['decimal', 2]],
        ['attribute' => 'tara_b', 'format' => ['decimal', 2]],
        [
            'attribute' => 'tara_c',
            'format' => ['decimal', 2],
        ],
        [
            'attribute' => 'netto',
            'format' => ['decimal', 2],
        ],
        ['attribute' => 'price', 'format' => ['decimal', 2]],
        [
            'attribute' => 'total',
            'format' => ['decimal', 2],
        ],
        'status',
        'sender',
        'driver',
        'remark:ntext',
        ['attribute' => 'created_by', 'value' => 'createdBy.username', 'label' => 'Created By'],
        'created_time',
        ['attribute' => 'updated_by', 'value' => 'updatedBy.username', 'label' => 'Updated By'],
        'updated_time'
    ];
    ?>

    <?=
    GridView::widget([
        'id' => 'kv-gridview-pengiriman-produksi-list',
        'dataProvider'=>$dataProvider,
        'filterModel'=>$searchModel,
        'columns'=>$gridColumns,
        'containerOptions'=>['style'=>'overflow: auto'],
        'headerRowOptions'=>['class'=>'kartik-sheet-style'],
        'filterRowOptions'=>['class'=>'kartik-sheet-style'],
        'pjax'=>true, // pjax is set to always true for this demo
        'export'=>[
            'fontAwesome'=>true
        ],
        // parameters from the demo form
        'bordered'=>true,
        'striped'=>false,
        'condensed'=>true,
        'responsive'=>false,
        'hover'=>true,
        'showPageSummary'=>false,
        'panel'=>[
            'type'=>GridView::TYPE_PRIMARY,
        ],
        'persistResize'=>false,
        'exportConfig'=>$defaultExportConfig,
    ]);
    ?>

</div>
<?php
$script = <<< JS

$(document).on('click', '.select-row', function(){
    // get id from custom button    
    var id = $(this).attr('data-id');

    $.get('../pengiriman-produksi/get-data', {id : id}, function(data){
        $('#penerimaanproduksi-ref_id').val(id);
        $('#view-pengiriman').html(data);
        $('#penerimaanproduksi-bruto').focus();
     });
     $('#modalPengiriman').modal('hide');
});

JS;
$this->registerJs($script);
?>

view loaded to active form

<?php

use yii\widgets\DetailView;

/* @var $this yii\web\View */
/* @var $model app\models\PengirimanProduksi */
// simple view
?>
<div class="pengiriman-produksi-view">
    <?= DetailView::widget([
        'model' => $model,
        'id' => 'table-pengiriman-produksi',
        'attributes' => [
            'id',
            'send_date',
            ['attribute' => 'customer.name', 'label' => 'Customer'],
            'vehicle_id',
            'contract_no',
            ['attribute' => 'item.name', 'label' => 'Item'],
            ['attribute' => 'satuan.name', 'label' => 'Satuan'],
            ['attribute' => 'bruto_tbg', 'format' => ['decimal', 2]],
            ['attribute' => 'bruto_a', 'format' => ['decimal', 2]],
            ['attribute' => 'bruto_b', 'format' => ['decimal', 2]],
            ['attribute' => 'bruto_c', 'format' => ['decimal', 2]],
            ['attribute' => 'tara_tbg', 'format' => ['decimal', 2]],
            ['attribute' => 'tara_a', 'format' => ['decimal', 2]],
            ['attribute' => 'tara_b', 'format' => ['decimal', 2]],
            ['attribute' => 'tara_c', 'format' => ['decimal', 2]],
            ['attribute' => 'netto', 'format' => ['decimal', 2]],
            ['attribute' => 'price', 'format' => ['decimal', 2]],
            ['attribute' => 'total', 'format' => ['decimal', 2]],
            'sender',
            'driver',
            'remark:ntext',
        ],
    ]) ?>

</div>