Global Bootstrap Version

Generally, you may also want to set a default version globally for all Krajee Extensions (instead of setting it for each widget or extension separately). In order to do this, you can setup the bsVersion property within Yii 2 application params (i.e. Yii::$app->params['bsVersion']). To set this up, add this section of code to your application params configuration file (e.g. config/params.php):

'params' => [
    'bsVersion' => '5.x', // this will set globally `bsVersion` to Bootstrap 5.x for all Krajee Extensions
    // other settings
    // 'adminEmail' => 'admin@example.com'
]

If TabularForm::bsVersion property is set, in addition to Yii::$app->params['bsVersion'], the extension level setting (TabularForm::bsVersion property) will override the Yii::$app->params['bsVersion']. If TabularForm::bsVersion property is not set, and Yii::$app->params['bsVersion'] is also not set, TabularForm::bsVersion property will default to 3.x (i.e. Bootstrap 3.x version will be assumed as default).

Yii2 Bootstrap Dependency

You need to install one of yiisoft/yii2-bootstrap or yiisoft/yii2-bootstrap4 or yiisoft/yii2-bootstrap5 extensions manually in your application to enable Bootstrap 3.x or 4.x or 5.x functionality respectively. This dependency has not been pre-built into the composer configuration for Krajee extensions, to allow better control to the developers in configuring their bootstrap library version. If bsVersion is set to 5.x and yiisoft/yii2-bootstrap5 is not installed, then an exception message will be thrown mentioning you to install the yiisoft/yii2-bootstrap5 extension. If bsVersion is set to 4.x and yiisoft/yii2-bootstrap4 is not installed, then an exception message will be thrown mentioning you to install the yiisoft/yii2-bootstrap4 extension. Similarly, if bsVersion is set to 3.x and yiisoft/yii2-bootstrap is not installed, an exception message will be thrown mentioning you to install the yiisoft/yii2-bootstrap extension.

To install yiisoft/yii2-bootstrap5, add the repo to the require section of your application's composer.json.

"yiisoft/yii2-bootstrap5": "@dev"

To install yiisoft/yii2-bootstrap4, add the repo to the require section of your application's composer.json.

"yiisoft/yii2-bootstrap4": "@dev"

To install yiisoft/yii2-bootstrap, add the repo to the require section of your application's composer.json.

"yiisoft/yii2-bootstrap": "@dev"

Override Bootstrap CSS/JS

The Krajee extension asset bundle(s) by default depend on one of the following asset bundles to load the Bootstrap CSS and JS:

• yii\bootstrap\BootstrapAsset and/or yii\bootstrap\BootstrapPluginAsset for bootstrap 3.x (bsVersion = 3 setting)

• yii\bootstrap4\BootstrapAsset and/or yii\bootstrap4\BootstrapPluginAsset for bootstrap 4.x ( bsVersion = 4 setting)

• yii\bootstrap5\BootstrapAsset and/or yii\bootstrap5\BootstrapPluginAsset for bootstrap 5.x (bsVersion = 5 setting)

This is controlled by the property bsDependencyEnabled within the asset bundle (which defaults to true). One can override this and prevent the default yii2 bootstrap assets (CSS & JS) from loading by doing one or all of the following:

• Global Override: Set Yii::$app->params['bsDependencyEnabled'] to false in your Yii 2 application config params.php. This setting will be applied for all Krajee Extension Asset Bundles that depend on Bootstrap assets.

  'params' => [
      'bsDependencyEnabled' => false, // this will not load Bootstrap CSS and JS for all Krajee extensions
      // you need to ensure you load the Bootstrap CSS/JS manually in your view layout before Krajee CSS/JS assets
      //
      // other params settings below
      // 'bsVersion' => '5.x',
      // 'adminEmail' => 'admin@example.com'
  ]
  

• Asset Bundle Specific Override: Set bsDependencyEnabled to false for the specific asset bundle within Yii2 Asset Manager component in your Yii 2 application config file.

  // ...
  'components' => [
      'assetManager' => [
          'bundles' => [
              'kartik\form\ActiveFormAsset' => [
                  'bsDependencyEnabled' => false // do not load bootstrap assets for a specific asset bundle
              ],
          ],
      ],
  ],
  

Icons for Bootstrap

Bootstrap 5.x / 4.x does not include glyphicons or any other icons framework bundled with the library. Krajee extensions therefore will use Font Awesome 5.x icons instead of glyphicons when working with Bootstrap 5.x / 4.x. You can download Font Awesome 5.x icons from the icons website. Alternatively, you can load the free version of Font Awesome from their CDN.

For Krajee extensions and demos, the Font Awesome Free version is used and loaded as the Icons Display Package on all the Yii2 demo layouts. To include font awesome assets on your page, include the following markup on the HEAD section of your view layout file, when bsVersion is set to 4.x or 5.x.

• Option 1: Font CSS version of Font Awesome:

  <!-- on your view layout file HEAD section -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
  

• Option 2: SVG / JS version of Font Awesome (recommended for cleaner scaling vector icons and features like icon layers):

  <!-- on your view layout file HEAD section -->
  <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js" crossorigin="anonymous"></script>
  

  Alternatively, you can use the FontAwesomeAsset from the kartik-v/yii2-icons package to load the SVG/JS version.

  // on your view layout file
  use kartik\icons\FontAwesomeAsset;
  FontAwesomeAsset::register($this);
  

Step 1: Setting up model method

Setup your attributes array for the tabular form builder. For example you could create a globally accessible method in your model (or any accessible class). It is assumed that you have setup a dataProvider for returning your list of models just like you do in any GridView widget. Note: The filtering is disabled for the TabularForm widget.

$query = Model::find()->indexBy('id'); // where `id` is your primary key

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

use kartik\builder\TabularForm;
use kartik\grid\GridView;
use yii\helpers\ArrayHelper;
public function getFormAttribs() {
    return [
        // primary key column
        'id'=>[ // primary key attribute
            'type'=>TabularForm::INPUT_HIDDEN, 
            'columnOptions'=>['hidden'=>true]
        ], 
        'name'=>['type'=>TabularForm::INPUT_TEXT],
        'publish_date'=>[
            'type' => function($model, $key, $index, $widget) {
                return ($key % 2 === 0) ? TabularForm::INPUT_HIDDEN : TabularForm::INPUT_WIDGET;
            },
            'widgetClass'=>\kartik\widgets\DatePicker::classname(), 
            'options'=> function($model, $key, $index, $widget) {
                return ($key % 2 === 0) ? [] :
                [ 
                    'pluginOptions'=>[
                        'format'=>'yyyy-mm-dd',
                        'todayHighlight'=>true, 
                        'autoclose'=>true
                    ]
                ];
            },
            'columnOptions'=>['width'=>'170px']
        ],
        'color'=>[
            'type'=>TabularForm::INPUT_WIDGET, 
            'widgetClass'=>\kartik\color\ColorInput::classname(), 
            'options'=>[ 
                'showDefaultPalette'=>false,
                'pluginOptions'=>[
                    'preferredFormat'=>'name',
                    'palette'=>[
                        [
                            "white", "black", "grey", "silver", "gold", "brown", 
                        ],
                        [
                            "red", "orange", "yellow", "indigo", "maroon", "pink"
                        ],
                        [
                            "blue", "green", "violet", "cyan", "magenta", "purple", 
                        ],
                    ]
                ]
            ],
            'columnOptions'=>['width'=>'150px'],
        ],
        
        'author_id'=>[
            'type'=>TabularForm::INPUT_DROPDOWN_LIST, 
            'items'=>ArrayHelper::map(Author::find()->orderBy('name')->asArray()->all(), 'id', 'name'),
            'columnOptions'=>['width'=>'185px']
        ],
        /*
        'buy_amount'=>[
            'type'=>TabularForm::INPUT_TEXT, 
            'label'=>'Buy',
            'options'=>['class'=>'form-control text-right text-end'], 
            'columnOptions'=>['hAlign'=>GridView::ALIGN_RIGHT, 'width'=>'90px']
        ],
        */
        'sell_amount'=>[
            'type'=>TabularForm::INPUT_STATIC, 
            'label'=>'Sell',
            'columnOptions'=>['hAlign'=>GridView::ALIGN_RIGHT, 'width'=>'90px']
        ],
    ];
}

Step 2: Rendering the tabular form

Create a form instance using \kartik\form\ActiveForm and pass it to the TabularForm widget along with the dataProvider.

use kartik\form\ActiveForm;
use kartik\builder\TabularForm;
$form = ActiveForm::begin();
echo TabularForm::widget([
    'dataProvider'=>$dataProvider,
    'form'=>$form,
    'attributes'=>$model->formAttribs,
    'gridSettings'=>['condensed'=>true]
]);
// Add other fields if needed or render your submit button
echo '<div class="text-right text-end">' . 
     Html::submitButton('Submit', ['class'=>'btn btn-primary']) .
     '<div>';
ActiveForm::end();

Expand scenario 1 to include the following functionalities:

• Float the table header to stick to the top while scrolling
• Action buttons toolbar - new record creation, batch save, and batch delete.
• Position your action buttons toolbar in footer.
• Style the grid using Bootstrap panels and formatting features from \kartik\grid\GridView
• Adjust grid settings for an advanced tabular form setup.
• Remove color attribute and show status as a \kartik\widgets\SwitchInput

use kartik\form\ActiveForm;
use kartik\builder\TabularForm;
$form = ActiveForm::begin();
$attribs = $model->formAttribs;
unset($attribs['attributes']['color']);
$attribs['attributes']['status'] = [
    'type'=>TabularForm::INPUT_WIDGET, 
    'widgetClass'=>\kartik\widgets\SwitchInput::classname()
];

echo TabularForm::widget([
    'dataProvider'=>$dataProvider,
    'form'=>$form,
    'attributes'=>$attribs,
    'gridSettings'=>[
        'condensed'=>true,
        'floatHeader'=>true,
        'panel'=>[
            'heading' => '<i class="fas fa-book"></i> Manage Books',
            'before' => false,
            'type' => GridView::TYPE_PRIMARY,
            'after'=> Html::a('<i class="fas fa-plus"></i> Add New', '#', ['class'=>'btn btn-success']) . ' ' . 
                    Html::a('<i class="fas fa-times"></i> Delete', '#', ['class'=>'btn btn-danger']) . ' ' .
                    Html::submitButton('<i class="fas fa-save"></i> Save', ['class'=>'btn btn-primary'])
        ]
    ]   
]);
ActiveForm::end();

In your controller action that processes your form submission for the tabular form

use yii\base\Model;
public function actionBatchUpdate()
{
    $sourceModel = new \namespace\YourGridModel;
    $dataProvider = $sourceModel->search(Yii::$app->request->getQueryParams());
    $models = $dataProvider->getModels();
    if (Model::loadMultiple($models, Yii::$app->request->post()) && Model::validateMultiple($models)) {
        $count = 0;
        foreach ($models as $index => $model) {
            // populate and save records for each model
            if ($model->save()) {
                $count++;
            }
        }
        Yii::$app->session->setFlash('success', "Processed {$count} records successfully.");
        return $this->redirect(['index']); // redirect to your next desired page
    } else {
        return $this->render('update', [
            'model'=>$sourceModel,
            'dataProvider'=>$dataProvider
        ]);
    }
}

This scenario includes building a tabular form from an ArrayDataProvider and without needing a ActiveDataProvider. It does not include functionalities of ActiveForm and generates a HTML form that can be read over POST based on the formName property.

use yii\data\ArrayDataProvider;
$dataProvider = new ArrayDataProvider([
    'allModels'=>[
        ['id'=>1, 'name'=>'Book Number 1', 'publish_date'=>'25-Dec-2014'],
        ['id'=>2, 'name'=>'Book Number 2', 'publish_date'=>'02-Jan-2014'],
        ['id'=>3, 'name'=>'Book Number 3', 'publish_date'=>'11-May-2014'],
        ['id'=>4, 'name'=>'Book Number 4', 'publish_date'=>'16-Apr-2014'],
        ['id'=>5, 'name'=>'Book Number 5', 'publish_date'=>'16-Apr-2014']
    ]
]);
echo Html::beginForm();
echo TabularForm::widget([
    // your data provider
    'dataProvider'=>$dataProvider,

    // formName is mandatory for non active forms
    // you can get all attributes in your controller 
    // using $_POST['kvTabForm']
    'formName'=>'kvTabForm',
    
    // set defaults for rendering your attributes
    'attributeDefaults'=>[
        'type'=>TabularForm::INPUT_TEXT,
    ],
    
    // configure attributes to display
    'attributes'=>[
        'id'=>['label'=>'book_id', 'type'=>TabularForm::INPUT_HIDDEN_STATIC, 'columnOptions' => ['vAlign' => GridView::ALIGN_MIDDLE]],
        'name'=>['label'=>'Book Name'],
        'publish_date'=>['label'=>'Published On', 'type'=>TabularForm::INPUT_STATIC]
    ],
    
    // configure other gridview settings
    'gridSettings'=>[
        'condensed' => true,
        'panel'=>[
            'heading'=>'<i class="fas fa-book"></i> Manage Books',
            'before' => false,
            'type'=>GridView::TYPE_PRIMARY,
            'before'=>false,
            'footer'=>false,
            'after'=>Html::button('<i class="fas fa-plus"></i> Add New', ['type'=>'button', 'class'=>'btn btn-success kv-batch-create']) . ' ' . 
                    Html::button('<i class="fas fa-times"></i> Delete', ['type'=>'button', 'class'=>'btn btn-danger kv-batch-delete']) . ' ' .
                    Html::button('<i class="fas fa-save"></i> Save', ['type'=>'button', 'class'=>'btn btn-primary kv-batch-save'])
        ]
    ]
]);
echo Html::endForm();

This scenario extends scenario 3 with a custom calculated field that can be shown as a RAW Input. It also shows how to generate a static only (read only) tabular form by just toggling the staticOnly flag and setting actionColumn property to false. Note that the entire form is set to readonly irrespective of the input types. If you have a RAW input in your form - you must set the staticValue property so that it can be displayed in staticOnly mode.

use yii\data\ArrayDataProvider;
$dataProvider = new ArrayDataProvider([
    'allModels'=>[
        ['id'=>1, 'name'=>'Book Number 1', 'publish_date'=>'25-Dec-2014'],
        ['id'=>2, 'name'=>'Book Number 2', 'publish_date'=>'02-Jan-2014'],
        ['id'=>3, 'name'=>'Book Number 3', 'publish_date'=>'11-May-2014'],
        ['id'=>4, 'name'=>'Book Number 4', 'publish_date'=>'16-Apr-2014'],
        ['id'=>5, 'name'=>'Book Number 5', 'publish_date'=>'16-Apr-2014']
    ]
]);
echo Html::beginForm();
echo TabularForm::widget([
    // your data provider
    'dataProvider'=>$dataProvider,
    
    // set entire form to static only (read only)
    'staticOnly'=>true,
    'actionColumn'=>false,

    // formName is mandatory for non active forms
    // you can get all attributes in your controller 
    // using $_POST['kvTabForm']
    'formName'=>'kvTabForm',
    
    // set defaults for rendering your attributes
    'attributeDefaults'=>[
        'type'=>TabularForm::INPUT_TEXT,
    ],
    
    // configure attributes to display
    'attributes'=>[
        'id'=>['label'=>'ID', 'type'=>TabularForm::INPUT_HIDDEN_STATIC],
        'name'=>['label'=>'Book Name'],
        'details'=>[
            'type'=>TabularForm::INPUT_RAW, 
            'staticValue' => function($m, $k, $i, $w) { 
                return 'Details for book ' . ($k + 1);
            }, 
            'value' => function($m, $k, $i, $w) { 
                return Html::textInput("details", 'Details for book ' . ($k + 1), ['class'=>'form-control']);
            }
        ],
        'publish_date'=>['label'=>'Published On', 'type'=>TabularForm::INPUT_STATIC],
    ],
    
    // configure other gridview settings
    'gridSettings'=>[
        'panel'=>[
            'heading'=>'<i class="fas fa-book"></i> Manage Books',
            'before' => false,
            'type'=>GridView::TYPE_PRIMARY,
            'before'=>false,
            'footer'=>false,
            'after'=>Html::button('<i class="fas fa-plus"></i> Add New', ['type'=>'button', 'class'=>'btn btn-success kv-batch-create']) . ' ' . 
                    Html::button('<i class="fas fa-times"></i> Delete', ['type'=>'button', 'class'=>'btn btn-danger kv-batch-delete']) . ' ' .
                    Html::button('<i class="fas fa-save"></i> Save', ['type'=>'button', 'class'=>'btn btn-primary kv-batch-save'])
        ],
    ]
]);
echo Html::endForm();