How to Reload Ui Component Grid Table with Js In Magento 2

Question

I create grid in product edit page new window. Now I want to update grid after success ajax call

Answer 1

Source of the UI grid has the reload method defined in the

vendor/magento/module-ui/view/base/web/js/grid/provider.js

    /**
     * Reloads data with current parameters.
     *
     * @returns {Promise} Reload promise object.
     */
    reload: function (options) {
        var request = this.storage().getData(this.params, options);

        this.trigger('reload');

        request
            .done(this.onReload)
            .fail(this.onError);

        return request;
    },

So you can use it from anywhere if you knows grid name, like this:

require('uiRegistry').get('index = product_listing').source.reload()

Answer 2

Now i got ans.

call blow function in java-script and modified as per your requirement

function updategrid(){

            var grid = 'name_index_listing.name_index_listing_data_source';             
            if(grid) {
                var params = [];
                var target = registry.get(grid);
                if (target && typeof target === 'object') {                                     
                    target.set('params.t ', Date.now());                

                }
            }
        }

Answer 3

Following code helped me to reload a Grid in Magento 2:

1.componentReloader.js located in view/web/js

  define([
    "uiRegistry"
], function (registry) {
    'use strict';
    return {
        reloadUIComponent: function (gridName) {
            if (gridName) {
                var params = [];
                var target = registry.get(gridName);
                if (target && typeof target === 'object') {
                    target.set('params.t ', Date.now());
                }
            }
        }
    };
});

2.add config node to your requirejs-config.js

    var config = {
    map: {
        '*': {
            reloadGrid: 'My_Extension/js/componentReloader',
        }
    }};

3.call your js-module:

require(['jquery', 'reloadGrid'], function ($, reloadGrid) { 
      reloadGrid.reloadUIComponent("name_index_listing.name_index_listing_data_source");
});

Answer 4

I know that this is 3 years old but since it is one of few results that comes up when searching for ui component reload then I am going to leave it here. A way to reload data from server not just reload existing data again. It is extension of Siarhey Uchukhlebau answer. Just adding refresh parameter to reload method.

require('uiRegistry').get('index = product_listing').source.reload({refresh: true})