Refresh multiple datagrids in one event

Hi,

I have two datagrids on the same page, one is the primary and the second shows related information based on the first. If I add or delete an item from the first it refreshes the datagrid as expected, but I want the second datagrid to be refreshed as well.

Already trid to add an array of datagrid names to reload-grid-name with no luck. Is there any way to accomplish this?

Thanks!

Topic

[Hryhorii HrebiniukParticipant]

Hi,

For now reload-grid-name option accepts only one grid name, so you can not pass a list of names there. Probably we need to improve this approach.

But there’s workaround. Add your own grid builder module in the configuration of the main grid. This builder will be initialized once the grid is created. In the builder you can add listeners to the grid or its collection, e.g.

JavaScript

grid.collection.on('beforeFetch', function() { mediator.trigger('datagrid:doReset:{{ second-grid-name }}'); });

1 2 3

grid.collection.on('beforeFetch', function() {     mediator.trigger('datagrid:doReset:{{ second-grid-name }}'); });

Listen the event of main grid’s collection fetch and make the second grid fetch its data either.

[maurokParticipant]

Thanks for your response.

Would you kindly describe the full module code required, as with your code snippet and the example in Datagrid doc I was not able to make it work. It just ignores my js class.

[maurokParticipant]

I was able to get it working, here’s my full code in case sombody else need it:

JavaScript

define(['oroui/js/mediator'], function(mediator) { 'use strict'; return { init: function(deferred, options) { options.gridPromise.done(function (grid) { grid.collection.on('beforeFetch', function() { mediator.trigger('datagrid:doReset:price-list-parent-product-prices-grid'); }); deferred.resolve(); }); } }; });

1 2 3 4 5 6 7 8 9 10 11 12 13 14

define(['oroui/js/mediator'], function(mediator) {     'use strict';       return {         init: function(deferred, options) {             options.gridPromise.done(function (grid) {                 grid.collection.on('beforeFetch', function() {                     mediator.trigger('datagrid:doReset:price-list-parent-product-prices-grid');                 });                 deferred.resolve();             });         }     }; });

Don’t forget to add the class in requirejs.yml!

[Hryhorii HrebiniukParticipant]

Yes, thanks @maurok.

First you need to extend configuration of main grid by adding own builder module. In your bundle in datagrid.yml

YAML

datagrid: {{ main-grid-name }}: options: requireJSModules: - mybundle/js/datagrid/my-builder

1 2 3 4 5

datagrid:     {{ main-grid-name }}:         options:             requireJSModules:                 - mybundle/js/datagrid/my-builder

And then in your module

JavaScript

define(function(require) { 'use strict'; var mediator = require('oroui/js/mediator'); return { init: function(deferred, options) { options.gridPromise.done(function(grid) { // add listener for first grid's collection grid.collection.on('beforeFetch', function() { // make second grid refresh mediator.trigger('datagrid:doRefresh:{{ second-grid-input-name }}'); }); deferred.resolve(); }); } }; });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

define(function(require) {     'use strict';       var mediator = require('oroui/js/mediator');       return {         init: function(deferred, options) {               options.gridPromise.done(function(grid) {                 // add listener for first grid's collection                 grid.collection.on('beforeFetch', function() {                     // make second grid refresh                     mediator.trigger('datagrid:doRefresh:{{ second-grid-input-name }}');                 });                 deferred.resolve();             });         }     }; });

[Author]

Replies