0

Note: After searching a lot, I have tried myself and came up with a working solution. Kindly check the answer at https://magento.stackexchange.com/a/292029/59216

I am not removing my question as it explains the issue quite clearly than others.

Thanks.

I am able to add the button and modal with ui-grid in a ui-grid.

Code to add modal with ui-grid:

<modal name="assign_category_modal">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="onCancel" xsi:type="string">actionCancel</item>
                <item name="options" xsi:type="array">
                    <item name="buttons" xsi:type="array">
                        <item name="0" xsi:type="array">
                            <item name="text" xsi:type="string">Cancel</item>
                            <item name="class" xsi:type="string">action-secondary</item>
                            <item name="actions" xsi:type="array">
                                <item name="0" xsi:type="string">actionCancel</item>
                            </item>
                        </item>
                    </item>
                </item>
            </item>
        </argument>
        <fieldset name="general">
            <settings>
                <label/>
            </settings>
            <insertListing>
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="autoRender" xsi:type="string">true</item>
                        <item name="ns" xsi:type="string">mymodule_product_listing</item>
                    </item>
                </argument>
            </insertListing>
        </fieldset>
    </modal>

Custom Button Outside Grid to trigger open modal:

<button name="assign_category_button">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="title" xsi:type="string">Assign Category</item>
                <item name="actions" xsi:type="array">
                    <item name="0" xsi:type="array">
                        <item name="targetName" xsi:type="string">${ $.parentName}.assign_category_modal</item>
                        <item name="actionName" xsi:type="string">openModal</item>
                    </item>
                </item>
            </item>
        </argument>
    </button>

UI Grid column button which needs to actually open the modal:

<actionsColumn name="Assign Category" class="MyModule\MyVendor\Ui\Component\Listing\Columns\Product\Category"
                       sortOrder="200">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="filter" xsi:type="string">text</item>
                    <item name="sortOrder" xsi:type="number">130</item>
                    <item name="label" xsi:type="string" translate="true">Assign Category</item>
                    <item name="component" xsi:type="string">MyVendor_MyModule/js/grid/columns/product/category</item>
                </item>
            </argument>
        </actionsColumn>

How do I bind the button Assign Category to open the modal (also pass the product id to modal grid) ?

Grid in modal:

Grid on Modal

Button on Main UI Grid: Grid Row Button

Your Answer

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

Browse other questions tagged or ask your own question.