I create grid in product edit page new window. Now I want to update grid after success ajax call
-
Please post ur code – Jackson Jan 10 '17 at 8:47
-
i want to update admin ui data provider grid update after success ajax call – Nikhil Vaghela Jan 10 '17 at 8:49
-
magestore.com/magento-2-tutorial/… – Sagar Dobariya Jan 10 '17 at 9:03
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);
}
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
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");
});
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})