Difference between #211 and #212 of
Yii v2 snippet guide

Revision #212 has been created by rackycz on Jul 13, 2020, 1:49:07 PM with the memo:

Grid layout + helpers
« previous (#211) next (#213) »

Changes

Title unchanged

Yii v2 snippet guide

Category unchanged

Tutorials

Yii version unchanged

2.0

Tags unchanged

tutorial,beginner,yii2

Content changed

[...]
'filterSelector' => $searchModel->getPageSizeDropDownID(),
// filterSelector is the core solution of this problem. It refreshes the grid.
```

**Creating your new helper class**
 
---
 
I work with the Basic example so I do things like this:
 
- Create folder named "myHelpers" next to the folder "controller"
 
- Place there your class and do not forget about the "namespace":
 
 
```php
 
<?php
 
namespace myHelpers;
 
class MyClassName { /* ... */ }
 
```
 
 
- Now open file index.php and add following row:
 
 
```php
 
require __DIR__ . '/../myHelpers/MyClassName.php';
 
```
 
 
- If you want to use the class, do not forget to inclue the file:
 
 
```php
 
use myHelpers\MyClassName;
 
```
 
 
- And now you can use the any method. For example this static method:
 
 
```php
 
echo MyClassName::myMethod(123);
 
```
 
 
**Form-grid renderer**
 
---
 
If you want your form to be rendered in a grid, you can use your custom new helper to help you. How to create helpers is mentioned right above. The helper then looks like this:
 
 
```php
 
<?php
 
namespace myHelpers;
 
 
class GridFormRenderer {
 
  
 
  // https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
 
  // Bootstrap works with 12-column layouts so max span is 12.
 
  public static function renderGridForm($gridForm, $colSize = 'md', $nullReplacement = '&nbsp;', $maxBoootstrapColSpan = 12) {
 
    $result = '';
 
    foreach ($gridForm as $row) {
 
      if (is_null($row)) {
 
        $colSpan = $maxBoootstrapColSpan;
 
        $result .= '<div class="row">' . '<div class="col-' . $colSize . '-' . $colSpan . '">' . $nullReplacement . '</div></div>';
 
        continue;
 
      }
 
      $colSpan = floor($maxBoootstrapColSpan / count($row));
 
      $result .= '<div class="row">';
 
      foreach ($row as $col) {
 
        if (is_null($col)) {
 
          $col = $nullReplacement;
 
        }
 
        $result .= '<div class="col-' . $colSize . '-' . $colSpan . '">' . $col . '</div>';
 
      }
 
      $result .= '</div>';
 
    }
 
    return $result;
 
  }
 
}
 
 
```
 
 
And is used like this in any view:
 
 
```php
 
use myHelpers\GridFormRenderer;
 
// ...
 
 
$form = ActiveForm::begin();
 
 
$username = $form->field($model, 'username')->textInput(['maxlength' => true]);
 
$password_new = $form->field($model, 'password_new')->passwordInput(['maxlength' => true]);
 
$password_new_repeat = $form->field($model, 'password_new_repeat')->passwordInput(['maxlength' => true]);
 
$email = $form->field($model, 'email')->textInput(['maxlength' => true]);
 
 
$gridForm = [
 
  [$username, null, $email], // null = empty cell
 
  null, // null = empty row
 
  [$password_new, $password_new_repeat],
 
  ];
 
 
echo GridFormRenderer::renderGridForm($gridForm);
 
 
ActiveForm::end();
 
// ...
 
 
```
 
 
The result is that your form has 3 rows, the middle one is empty. In the first row there are 3 cells (username, nothing, email) and in the last row there  is 2x password.
 
 
You do not have to write any HTML, you only arrange inputs into any number of rows and columns and things just happen automagically.
 
 
7 0
4 followers
Viewed: 275 332 times
Version: 2.0
Category: Tutorials
Tags: beginner, tutorial, yii2
Written by: rackycz
Last updated by: rackycz
Created on: Sep 19, 2019
Last updated: a year ago
Update Article
Revert to #211 | Revert to #212

Revisions

View all history