I have created dynamic rows with multiple descriptions filed(1 In a row) with the WYSIWYG editor.

Editor showing and working with first one-row element and rest element which added by adding more it's not working.

I have added a dynamic row by below code

<dynamicRows name="dynamic_rows">
        <addButtonLabel translate="true">Add More</addButtonLabel>
            <class name="admin__field-wide">true</class>
    <container name="record" component="Magento_Ui/js/dynamic-rows/record">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="isTemplate" xsi:type="boolean">true</item>
                <item name="is_collection" xsi:type="boolean">true</item>
                <item name="componentType" xsi:type="string">container</item>
        <field name="category_description" formElement="wysiwyg" sortOrder="40">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="wysiwygConfigData" xsi:type="array">
                        <item name="height" xsi:type="string">100px</item>
                        <item name="add_variables" xsi:type="boolean">false</item>
                        <item name="add_widgets" xsi:type="boolean">false</item>
                        <item name="add_images" xsi:type="boolean">false</item>
                        <item name="add_directives" xsi:type="boolean">false</item>
                    <item name="source" xsi:type="string">sun_brand</item>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                <label translate="true">Description</label>
                <wysiwyg class="Magento\Ui\Component\Form\Element\Wysiwyg">
        <actionDelete sortOrder="50">
            <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>

and it's showing like this. enter image description here

But show/hide button not working, when we add two rows it's working perfectly with a single row

1 Answer 1


Most likely, you've got the same ID of toggle set on your WYSIWYG editors. Take a look at where the button is built in \Magento\Framework\Data\Form\Element\Editor, particularly where the element's ID is set:

protected function _getToggleButtonHtml($visible = true)
    $html = $this->_getButtonHtml(
            'title' => $this->translate('Show / Hide Editor'),
            'class' => 'action-show-hide',
            'style' => $visible ? '' : 'display:none',
            'id' => 'toggle' . $this->getHtmlId(),
    return $html;

The getHtmlID function is thus:

public function getHtmlId()
    $suffix = $this->getConfig('dynamic_id') ? '${ $.wysiwygUniqueSuffix }' : '';
        return parent::getHtmlId() . $suffix;

If you don't configure a Dynamic ID on your editor, then the editor's toggle button will have a generic ID of toggle, and you'll get undesired behavior if you have two identical IDs on the same page.

I'd try adding this to your wysiwygConfigData item:

<item name="dynamic_id" xsi:type="boolean">true</item>
  • I have added this line <item name="dynamic_id" xsi:type="boolean">true</item> and it's working. Commented Apr 7, 2021 at 17:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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