Skip to content

Dependent dropdowns in Dynamic Rows

I have a fieldset that I have a dynamic rows component in, where I want to have two dropdowns in each row. The first has a static list of options, and the second I want to populate based on the selection of the first dropdown.

My fieldset:

 <fieldset name="filters_fieldset">
    <settings>
        <label translate="true">Filters</label>
        <collapsible>true</collapsible>
        <sortOrder>30</sortOrder>
    </settings>
    <dynamicRows name="filters">
        <settings>
            <addButtonLabel translate="true">Add Record</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>
          
            <!-- First Dropdown -->
            <field name="filter_name" formElement="select">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="dataScope" xsi:type="string">filter_name</item>
                        <item name="label" xsi:type="string" translate="true">Filter Name</item>
                        <item name="dataType" xsi:type="string">text</item>
                    </item>
                </argument>
                <formElements>
                    <select>
                        <settings>
                            <options class="MyCatalogModelSourceCategoryAvailableFilters"/>
                        </settings>
                    </select>
                </formElements>
            </field>

            <!-- Second Dropdown -->
            <field name="filter_value" formElement="select">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="dataScope" xsi:type="string">filter_value</item>
                        <item name="label" xsi:type="string" translate="true">Filter Value</item>
                        <item name="dataType" xsi:type="string">text</item>

                        <item name="switcherConfig" xsi:type="array">
                            <item name="enabled" xsi:type="boolean">true</item>
                            <item name="ajaxUrl" xsi:type="url" path="/admin/catalog/category/filterOptionsByName"/>
                            <item name="paramName" xsi:type="string">filter_name</item>
                            <item name="method" xsi:type="string">GET</item>
                        </item>
                    </item>
                </argument>
                <formElements>
                    <select>
                        <settings>
                            <options class="MyCatalogModelSourceCategoryFilterOptionsByName"/>
                            <filterBy>
                                <targetField>${ $.parentName }.filter_name</targetField>
                            </filterBy>
                        </settings>
                    </select>
                </formElements>
            </field>
        </container>
    </dynamicRows>
</fieldset>

However, changing the Filter Name doesn’t seem to invoke my ajax request, so the options are not getting populated for the second drop down. What can I do to accomplish this?