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


4 Answers 4


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


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



        return request;

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

require('uiRegistry').get('index = product_listing')
    .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)) {
    } else {
        cachedRequest = this.getRequest(params);

    options = options || {};

    return !options.refresh && cachedRequest ?
        this.getRequestData(cachedRequest) :

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());                


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

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

], 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) { 

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

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.