0

I'm Trying to create a dynamic grid containing multiple fields using this code in my ui_component

<fieldset name="multi_answer">
<settings>
    <collapsible>true</collapsible>
    <label translate="true">Add Answers</label>
</settings>
<container name="multi_ans_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">Magento_Backend/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="answer_id">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="visible" xsi:type="boolean">false</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="answer">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string">Answer:</item>
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">textarea</item>
                    <item name="source" xsi:type="string">faq</item>
                </item>
            </argument>
        </field>
        <field name="answer_author">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string">Author:</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="answer_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">Enable FAQ:</label>
                <dataScope>answer_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>

This code Creates the required grid but shows warning

"User Agent Exception override"

I'm new to magento and I need help to solve this warning

Screen Shots

1

It is because of the template that you are using in config:

<item name="template" xsi:type="string">Magento_Backend/dynamic-rows/grid</item>

If you open this template file you can see the html for the warnings and user agent rules. Path for the file:

vendor/magento/module-backend/view/adminhtml/web/template/dynamic-rows/grid.html

To remove this you can use template from your custom module. Copy the core file grid.html in

Vendor/Module/view/adminhtml/web/template/dynamic-rows

and remove div with class:

"admin__field-complex-title", "admin__field-complex-content" and "messages"

So "admin__field-complex" div will look like this:

<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>

Then, specify the path in the config item in your ui_component like this:

<item name="template" xsi:type="string">Vendor_Module/dynamic-rows/grid</item>
  • It solved the warning but Add New button is not visible anymore – Ghulam.M Jan 29 at 16:19
  • Okay...just remove the divs with class "admin__field-complex-title" and "admin__field-complex-content" instead of "admin__field-complex" I have updated my answer with the code, you can check – Prachi Saxena Jan 30 at 4:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.