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({'refresh': true})

The {'refresh': true} option is important here, because without it your listing data source will return a cached result with no changes.

For more info please look at the Magento_Ui/js/grid/data-storage.js, method getData:

/**
 * Extracts data which matches specified parameters.
 *
 * @param {Object} params - Request parameters.
 * @param {Object} [options={}]
 * @returns {jQueryPromise}
 */
getData: function (params, options) {
    var cachedRequest;

    if (this.hasScopeChanged(params)) {
        this.clearRequests();
    } else {
        cachedRequest = this.getRequest(params);
    }

    options = options || {};

    return !options.refresh && cachedRequest ?
        this.getRequestData(cachedRequest) :
        this.requestData(params);
}

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})