Dynamic Grid Form

Dynamic Grid Form is a widget for the yii2 structure to add values to a grid. It is very useful for working with one-to-many data.

DIRECTORY STRUCTURE

  src/             contains source code of widget
  src/assets       contains assets definition
  src/views        contains view files

REQUIREMENTS

The minimum requirement by this project template that your Web server supports PHP 5.6.0.

INSTALLATION

Install via Composer

If you do not have Composer, you may install it by following the instructions at getcomposer.org.

You can then install this widget using the following command:

composer require caio-brendo/yii2-dynamicgridform

Release Changes

NOTE: Refer the CHANGE LOG for details on changes to various releases.

Bugs fixed with release v1.6.2:

• Inputs aren't reordering the index

PREVIEW

USAGE

The view

You must have inputs to your values will be appended in the grid and references in the DynamicGridForm through the input id. Replace the "multipleModels" by your array of objects that contains the values and "modelClass" by a string that refence your model. Each column corresponds to an entry and must contain the attribute in the model that this column references. The following code renders the DynamicGridForm used in preview.

The controller

At the controller, you will receive the values attached to the grid when submitting the form. The values will be in the following format:

` Then with the following code you can save the data.

` SETTINGS

The widget supports all parameters that one would pass for any Yii Input Widget. The additional parameter settings specially available for the DynamicGridForm widget configuration are:

• columns: An array with column settings. Currently, we have two settings for columns: NormalColumn and ActionColumn. For NormalColumn the parameters accept are:

  • headerOptions: An array with the options of header. You can see the options allowed [here](https://www.yiiframework.com/doc/api/2.0/yii-helpers-basehtml#renderTagAttributes()-detail).
  • options: An array with the options of content. You can see the options allowed [here](https://www.yiiframework.com/doc/api/2.0/yii-helpers-basehtml#renderTagAttributes()-detail).
  • id: A string that reference an input id. Since of v1.2.0 this param is optional and you can have a column without referenced input
  • attribute: A string that referece an attribute of the model informed. This param is required

  • value: An string or clousure that will return the value of input hidden when the widget is rendered. When clousure is informed then the signature must be:

  • valueOnInsert: An string or an object of the class JsExpression that will return the value of input hidden when the new row is added. Since of v1.2.0 this param is required when the param 'id' is not informed. When object of the class JsExpression is informed then the signature must be:

  • text: An string or clousure that will return the text that will shown in the grid when the widget is rendered. When clousure is informed then the signature must be:

  • textOnInsert: An string or clousure that will return the text that will shown in the grid when the new row is added. Since of v1.2.0 this param is required when the param 'id' is not informed. When object of the class JsExpression is informed then the signature must be:

  • cleanAfterInsert: A boolean param. If true after insert a line in the grid the input will be cleared.
  • header: A string to inform the column header in the grid.
  • showHiddenInput: A boolean param, when not informed is default true. If true the hidden input is shown

• columns: For ActionColumn the parameters accept are:

  • headerOptions: An array with the options of header. You can see the options allowed [here](https://www.yiiframework.com/doc/api/2.0/yii-helpers-basehtml#renderTagAttributes()-detail).
  • options: An array with the options of content. You can see the options allowed [here](https://www.yiiframework.com/doc/api/2.0/yii-helpers-basehtml#renderTagAttributes()-detail).
  • header: A string to inform the column header in the grid.
  • template: A string with the template of buttons. Ex.: {delete} {dowload} {view}.

  • buttons: An array with the buttons that will be rendered when the widget is rendered. The value of this array can be a string or a clousure The follow code render a button to delete a line:

  • buttonsClient: An array with the buttons that will be rendered when a new line is inserted. The value of this array can be a string or an object of the class JsExpressoin. The follow code render a button to delete a line:

  • visibleButtons: An array that inform if the button is visible when the widget is rendered. The value of this array can be a boolean or a clousure. The follow code show of a button:

  • visibleButtonsClient: An array that inform if the button is visible when a new row is inserted. The value of this array can be a boolean or an object of the class JsExpression. The follow code show of a button:
• insertButton: A string to inform the id of the button that will add the data in the grid. This param is required.
• multipleModels: An array that contains your multiples models. This parma is required.
• widgetContainer: A string to enter a widget container id.
• max: A number that limits the number of lines inserted. When 0 is informed then will be unlimited. Default 0.
• insertPosition: A string (bottom or top) to inform where the new line will be inserted. Default "bottom"
• allowEdit: A boolean param. When true you can edit the content of the line clicked.
• rowOptions: An array with the options of the row. You can see the options allowed [here](https://www.yiiframework.com/doc/api/2.0/yii-helpers-basehtml#renderTagAttributes()-detail).
• $headerRowOptions: An array with the options of the header row. You can see the options allowed [here](https://www.yiiframework.com/doc/api/2.0/yii-helpers-basehtml#renderTagAttributes()-detail).
• deleteRowClass: An string to inform a class that will be used to drop a line.
• modelClass: An string to inform the class that is used in DynamicGridForm
• variableJsName: Since of v1.5.0 you can specify the name of global variable that represents the Dynamic Grid From object javascript, so the instance of class Dynamic GridForm (js) will set with the string informed

JAVASCRIPT MANIPULATIONS

• Since of v1.5.0 you can access the instance of class that represents the DynamicGridForm (js) through the following code.

• If you informed the property "variableJsName" you can access directly with the name specified in the variable.

• You can get the all values inserted in the grid with the follow code:

JAVASCRIPT EVENTS