How To Add Dynamic Rows in Magento2.

Hi Guys

Today we will learn to add dynamic rows in magento 2.  You might have encounter this problem where you want to add dynamic rows in magento 2 like adding textfields ,checkbox on simple click of a button.But you don’t know how

without further a due lets jump into it

you just have to add this simple code in your Ui Component file and add your required fields just once .

I am using here 4 textfileds and a checkbox. these elements will keep adding in the grid whenever the add button is pressed.

Path: Namespace/Modulename/view/adminhtml/ui_component/Student_Form

<fieldset name="fieldset_Student">
        <settings>
            <collapsible>true</collapsible>
            <label translate="true">Add Student</label>
        </settings>
        <container name="student_holder">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Ui/js/dynamic-rows/dynamic-rows</item>
                    <item name="template" xsi:type="string">VENDOR_MODULE/dynamic-rows/grid</item>
                    <item name="componentType" xsi:type="string">dynamicRows</item>
                    <item name="recordTemplate" xsi:type="string">record</item>
                    <item name="deleteButtonLabel" xsi:type="string">Remove</item>
                    <item name="addButtonLabel" xsi:type="string">Add New </item>
                    <item name="deleteProperty" xsi:type="boolean">false</item>
                    <item name="dndConfig" xsi:type="array">
                        <item name="enabled" xsi:type="boolean">false</item>
                    </item>
                </item>
            </argument>
            <container name="record">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="component" xsi:type="string" translate="true">Magento_Ui/js/dynamic-rows/record</item>
                        <item name="isTemplate" xsi:type="boolean">true</item>
                        <item name="is_collection" xsi:type="boolean">true</item>
                        <item name="showFallbackReset" xsi:type="boolean">false</item>
                    </item>
                </argument>
                <field name="first_name">
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="label" xsi:type="string">Fisrt Name:</item>
                            <item name="visible" xsi:type="boolean">true</item>
                            <item name="dataType" xsi:type="string">text</item>
                            <item name="formElement" xsi:type="string">input</item>
                            <item name="source" xsi:type="string">student</item>
                        </item>
                    </argument>
                </field>
                <field name="last_name">
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="label" xsi:type="string">Last Name:</item>
                            <item name="visible" xsi:type="boolean">true</item>
                            <item name="dataType" xsi:type="string">text</item>
                            <item name="formElement" xsi:type="string">input</item>
                            <item name="source" xsi:type="string">faq</item>
                        </item>
                    </argument>
                </field>
                <field name="student_age">
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="label" xsi:type="string">Age:</item>
                            <item name="visible" xsi:type="boolean">true</item>
                            <item name="dataType" xsi:type="string">text</item>
                            <item name="formElement" xsi:type="string">input</item>
                            <item name="source" xsi:type="string">faq</item>
                        </item>
                    </argument>
                </field>
                <field name="student_class">
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="label" xsi:type="string">Class:</item>
                            <item name="visible" xsi:type="boolean">true</item>
                            <item name="dataType" xsi:type="string">text</item>
                            <item name="formElement" xsi:type="string">input</item>
                            <item name="source" xsi:type="string">faq</item>
                        </item>
                    </argument>
                </field>
                <field name="student_status" formElement="checkbox">
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="source" xsi:type="string">homeslider</item>
                            <item name="default" xsi:type="number">1</item>
                        </item>
                    </argument>
                    <settings>
                        <dataType>boolean</dataType>
                        <label translate="true">Status:</label>
                        <dataScope>status</dataScope>
                    </settings>
                    <formElements>
                        <checkbox>
                            <settings>
                                <valueMap>
                                    <map name="false" xsi:type="number">0</map>
                                    <map name="true" xsi:type="number">1</map>
                                </valueMap>
                                <prefer>toggle</prefer>
                            </settings>
                        </checkbox>
                    </formElements>
                </field>
                <actionDelete>
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="componentType" xsi:type="string">actionDelete</item>
                            <item name="dataType" xsi:type="string">text</item>
                            <item name="fit" xsi:type="boolean">false</item>
                            <item name="label" xsi:type="string">Actions</item>
                            <item name="additionalClasses" xsi:type="string">data-grid-actions-cell</item>
                            <item name="template" xsi:type="string">Magento_Backend/dynamic-rows/cells/action-delete</item>
                        </item>
                    </argument>
                </actionDelete>
            </container>
        </container>
    </fieldset>

Add Following Code in VENDOR/MODULE/view/adminhtml/web/template/dynamic-rows/grid.html

<div class="admin__field-complex" if="element.addButton">


    <div class="admin__field-complex-elements">
        <render args="fallbackResetTpl" if="$data.showFallbackReset && $data.isDifferedFromDefault"/>
        <button attr="{disabled: disabled}"
                class="action-secondary"
                type="button"
                click="processingAddChild.bind($data, false, false, false)">
            <span translate="addButtonLabel"/>
        </button>
    </div>


</div>

<div class="admin__field admin__field-wide"
     visible="visible"
     disabled="disabled"
     css="element.setClasses(element)"
     attr="'data-index': index">
    <label if="element.label" class="admin__field-label" attr="for: element.uid">
        <span translate="element.label"/>
    </label>

    <div class="admin__field-control" data-role="grid-wrapper">
        <div class="admin__control-table-pagination" visible="!!element.getRecordCount()">
            <div class="admin__data-grid-pager">
                <button class="action-previous" type="button" data-bind="attr: {title: $t('Previous Page')}, click: previousPage, disable: isFirst()"></button>
                <input class="admin__control-text" type="number" data-bind="attr: {id: ++ko.uid}, value: currentPage">
                <label class="admin__control-support-text" data-bind="attr: {for: ko.uid}, text: 'of ' + pages()"></label>
                <button class="action-next" type="button" data-bind="attr: {title: $t('Next Page')}, click: nextPage, disable: isLast()"></button>
            </div>
        </div>
        <div class="admin__control-table-wrapper">
            <table class="admin__dynamic-rows data-grid" data-role="grid">
                <thead if="element.columnsHeader">
                <tr>
                    <th if="$data.dndConfig.enabled"
                        class="data-grid-draggable-row-cell"/>

                    <th repeat="foreach: labels, item: '$label'"
                        class="data-grid-th"
                        visible="$label().visible"
                        disable="$label().disabled"
                        css="setClasses($label())">
                        <span translate="$label().label"/>
                    </th>
                </tr>
                </thead>

                <tbody>
                <tr repeat="foreach: elems, item: '$record'"
                    class="data-row"
                    css="'_odd-row': $index % 2">
                    <td if="dndConfig.enabled"
                        class="data-grid-draggable-row-cell"
                        template="name: dndConfig.template, data: dnd"/>

                    <!-- ko foreach: { data: $record().elems(), as: 'elem'}  -->
                    <td if="elem.template"
                        visible="elem.visible"
                        disable="elem.disabled"
                        css="$parent.setClasses(elem)"
                        template="elem.template"
                        attr="'data-index': index"/>
                    <!-- /ko -->
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>


 

Screen Shots:

There are still few flaws and error that you may encounter feel free to drop your comments if you have solved it .

 

2 Comments on “How To Add Dynamic Rows in Magento2.”

  1. Hello

    I need to add dynamic rows in the customer section. Can you guide me for the same, it will be helpful

  2. Hello sir, thanks for sharing this article it’s a very helpful for creating dynamic rows in admin. But sir please tell me how to create new field for radio button because i am stuck on creating radio button field. Please share me the answer i will be thankful to you.

Leave a Reply

Your email address will not be published. Required fields are marked *