How to Reload Ui Component Grid Tab on Each click with Js

Magento does not allow reload tab content again if we revisit on the tab menu in the admin area. Please follow the step to reload tab content on each click

Step 1: Please open you’re a UI component grid XML file.

Example :


<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
                <item name="provider" xsi:type="string">os_needship_listing.os_needship_listing_data_source</item>
            <item name="deps" xsi:type="string">os_needship_listing.os_needship_listing_data_source</item>
        </item>
        ...
    </argument>
    <dataSource name="product_attachement_listing_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">WebtechBuzz\Attachemnet\Ui\DataProvider\AttachemnetDataProvider</argument>
            <argument name="name" xsi:type="string">product_attachement_listing_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">entity_id</argument>
            <argument name="requestFieldName" xsi:type="string">id</argument>
            <argument name="data" xsi:type="array">
                ...
            </argument>
        </argument>
    </dataSource>
    <container name="listing_top">
        ...
    </container>
    <columns name="productattachement_template_columns">
        ....
    </columns>
</listing>

Step 2: Write the reload function with attached js file.

define([
    'uiRegistry'
], function(registry){
      
reloadParent: function () {
   // Ui component grid name (datasource)
    Var grid = 'product_attachement_listing.product_attachement_listing_data_source';
            if(grid) {
                var params = [];
                var target = registry.get(grid);
                if (target && typeof target === 'object') {
                    target.set('params.t ', Date.now());
                }
            }
        }
});

Leave a Reply

Your email address will not be published. Required fields are marked *