Tutorial Yii2 Bagian 30 : Memanfaatkan Kartik Gridview Widget

Sekarang kita akan memanfaatkan widget dari kartik yaitu gridview widget untuk menampilkan purchase order.

1. Install kartik gridview widget dari website http://demos.krajee.com/grid di folder advanced :

sudo composer require kartik-v/yii2-grid "@dev"

1	sudo composer require kartik-v/yii2-grid "@dev"

2. Modifikasi index.php milik purchaseorder yang berada di folder backends\views\purchaseorder :

use kartik\grid\GridView;

1	use kartik\grid\GridView;

Sehingga file index.php menjadi seperti ini :

<?php

use yii\helpers\Html;
use kartik\grid\GridView;

/* @var $this yii\web\View */
/* @var $searchModel backend\models\PurchaseOrderSearch */
/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = Yii::t('app', 'Purchase Orders');
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="purchase-order-index">

    <h1><?= Html::encode($this->title) ?></h1>
    <?php // echo $this->render('_search', ['model' => $searchModel]); ?>

    <p>
        <?= Html::a(Yii::t('app', 'Create Purchase Order'), ['create'], ['class' => 'btn btn-success']) ?>
    </p>

    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            [
                'class'=>'kartik\grid\ExpandRowColumn',
                'value'=> function ($model, $key, $index, $column){
                    return GridView::ROW_COLLAPSED;
                },
                'detail' => function ($model,$key,$index,$column){
                    $searchModel = new PurchaseOrderItemSearch();
                    $searchModel->po_id = $model->id;
                    $dataProvider = $searchModel->search(Yii::$app->request->queryParams);

                    return Yii::$app->controller->renderPartial('_poitems',[
                            'searchModel' => $searchModel,
                            'dataProvider'=> $dataProvider,
                        ]);
                },
            ],
            'po_no',
            'description:ntext',

            ['class' => 'yii\grid\ActionColumn'],
        ],
    ]); ?>

</div>

<?php

use yii\helpers\Html;

use kartik\grid\GridView;

/* @var $this yii\web\View */

/* @var $searchModel backend\models\PurchaseOrderSearch */

/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = Yii::t('app', 'Purchase Orders');

$this->params['breadcrumbs'][] = $this->title;

<h1><?= Html::encode($this->title) ?></h1>

<?php // echo $this->render('_search', ['model' => $searchModel]); ?>

<p>

<?= Html::a(Yii::t('app', 'Create Purchase Order'), ['create'], ['class' => 'btn btn-success']) ?>

</p>

<?= GridView::widget([

'dataProvider' => $dataProvider,

'filterModel' => $searchModel,

'columns' => [

[

'class'=>'kartik\grid\ExpandRowColumn',

'value'=> function ($model, $key, $index, $column){

return GridView::ROW_COLLAPSED;

'detail' => function ($model,$key,$index,$column){

$searchModel = new PurchaseOrderItemSearch();

$searchModel->po_id = $model->id;

$dataProvider = $searchModel->search(Yii::$app->request->queryParams);

return Yii::$app->controller->renderPartial('_poitems',[

'searchModel' => $searchModel,

'dataProvider'=> $dataProvider,

]);

'po_no',

'description:ntext',

['class' => 'yii\grid\ActionColumn'],

]); ?>

</div>

3. Buat file php partial di folder view purchaseorder _poitems.php . Yang isinya mirip dengan index.php dari view purchaseorderitem.

<?php

use yii\helpers\Html;
use yii\grid\GridView;

/* @var $this yii\web\View */
/* @var $searchModel backend\models\PurchaseOrderItemSearch */
/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = Yii::t('app', 'Purchase Order Items');
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="purchase-order-item-index">

    <?= GridView::widget([
        'dataProvider' => $dataProvider,
'export'=>false,
        'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],

            'id',
            'po_item_no',
            'quantity',
        ],
    ]); ?>

</div>

<?php

use yii\helpers\Html;

use yii\grid\GridView;

/* @var $this yii\web\View */

/* @var $searchModel backend\models\PurchaseOrderItemSearch */

/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = Yii::t('app', 'Purchase Order Items');

$this->params['breadcrumbs'][] = $this->title;

<?= GridView::widget([

'dataProvider' => $dataProvider,

'export'=>false,

'filterModel' => $searchModel,

'columns' => [

['class' => 'yii\grid\SerialColumn'],

'id',

'po_item_no',

'quantity',

]); ?>

</div>

4. Tambahkan di main.php module gridview :

'modules' => [
   'gridview' =>  [
        'class' => '\kartik\grid\Module'
        // enter optional module parameters below - only if you need to  
        // use your own export download action or custom translation 
        // message source
        // 'downloadAction' => 'gridview/export/download',
        // 'i18n' => []
    ]
];

'modules' => [

'gridview' => [

'class' => '\kartik\grid\Module'

// enter optional module parameters below - only if you need to

// use your own export download action or custom translation

// message source

// 'downloadAction' => 'gridview/export/download',

// 'i18n' => []

]

];

5. Modifikasi PurchaseOrderItemSearch.php dengan memberi komentar pada baris di public function search yang menyatakan bila ada parameter yang diload maka akan return $dataProvider :

public function search($params)
    {
        $query = PurchaseOrderItem::find();

        $dataProvider = new ActiveDataProvider([
            'query' => $query,
        ]);

        // $this->load($params);

        // if (!$this->validate()) {
        //     // uncomment the following line if you do not want to return any records when validation fails
        //     // $query->where('0=1');
        //     return $dataProvider;
        // }

        $query->andFilterWhere([
            'id' => $this->id,
            'quantity' => $this->quantity,
            'po_id' => $this->po_id,
        ]);

        $query->andFilterWhere(['like', 'po_item_no', $this->po_item_no]);

        return $dataProvider;
    }

public function search($params)

{

$query = PurchaseOrderItem::find();

$dataProvider = new ActiveDataProvider([

'query' => $query,

]);

// $this->load($params);

// if (!$this->validate()) {

// // uncomment the following line if you do not want to return any records when validation fails

// // $query->where('0=1');

// return $dataProvider;

// }

$query->andFilterWhere([

'id' => $this->id,

'quantity' => $this->quantity,

'po_id' => $this->po_id,

]);

$query->andFilterWhere(['like', 'po_item_no', $this->po_item_no]);

return $dataProvider;

}

Catatan : Jika terdapat perintah untuk menginstall mpdf dari kartik, install di folder advanced :

php composer.phar require kartik-v/yii2-mpdf: "@dev"

1	php composer.phar require kartik-v/yii2-mpdf: "@dev"

Tutorial ini sebagai dokumentasi dan pembelajaran pribadi sekalian belajar terjemahin bahasa Inggris, dan siapa tahu bermanfaat buat orang lain. Sumber lengkapnya diambil dari Youtube DoingITEasy Channel.

2 thoughts on “Tutorial Yii2 Bagian 30 : Memanfaatkan Kartik Gridview Widget”

syahdan filsafan says:

October 27, 2020 at 9:04 pm

agar tampilan lebih menarik dapat dengan cara menggunakan kode berikut
$dataProvider,
‘filterModel’ => $searchModel,
‘responsiveWrap’ => false,
‘hover’ => true,
‘pjax’ => true,
‘striped’ => true,
‘hover’ => true,
‘panel’ => [‘type’ => ‘primary’, ‘heading’ => ‘Keseluruhan Laporan Saya’],
‘toggleDataContainer’ => [‘class’ => ‘btn-group mr-2’],
‘options’=>[‘class’=>’grid-view gridview-newclass’],
‘columns’ => [
[‘class’ => ‘kartik\grid\SerialColumn’],
……………..

kura kura says:

February 11, 2022 at 4:46 pm

bos .. kalo pengen bikin colspan ato rowspan bijimane bos

indocoder.com

Tutorial Yii2 Bagian 30 : Memanfaatkan Kartik Gridview Widget

2 thoughts on “Tutorial Yii2 Bagian 30 : Memanfaatkan Kartik Gridview Widget”

Leave a Reply Cancel reply