0

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">
    <settings>
        <addButtonLabel translate="true">Add More</addButtonLabel>
        <additionalClasses>
            <class name="admin__field-wide">true</class>
        </additionalClasses>
        <componentType>dynamicRows</componentType>
    </settings>
    <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>
            </item>
        </argument>
        <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>
                    <item name="source" xsi:type="string">sun_brand</item>
                </item>
            </argument>
            <settings>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                </validation>
                <label translate="true">Description</label>
                <dataScope>description</dataScope>
            </settings>
            <formElements>
                <wysiwyg class="Magento\Ui\Component\Form\Element\Wysiwyg">
                    <settings>
                        <rows>8</rows>
                        <wysiwyg>true</wysiwyg>
                    </settings>
                </wysiwyg>
            </formElements>
        </field>
        <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>
                </item>
            </argument>
        </actionDelete>
    </container>
</dynamicRows>

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

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>
1
  • I have added this line <item name="dynamic_id" xsi:type="boolean">true</item> and it's working. – Pushpendra Singh Apr 7 at 17:18

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.