I'm creating a module that uses a dynamic-rows component similar to the one used for advanced pricing in the product add/edit form.

I need to add some custom javascript code when the new row is added to the list of existing rows (Add button is clicked).

A simple alert('Good Job!') should do it. I can take it from there.
I don't want to bore you with my custom code because that's not important for now.
So I am asking...

How can I add a js alert when pressing the add button?
I don't mind if your recommendations suggest a core edit. I know how to adapt it to my own module (I think).
I just need a place to start.

I realized I didn't add any code.
The code for the advanced pricing dynamic rows can be found here


First, we decided to use events that can be activated on a button hit. However, nothing happened when we added a child. We checked this by adding the event console.log() class to the static: pub/static/adminhtml/Magento/backend/en_US/Magento_Ui/js/lib/core/events.js

     * Calls callback when name event is triggered.
     * @param  {String}   events
     * @param  {Function} callback
     * @return {Object} reference to this
    on: function (events, callback, ns) {
        var iterator;

        if (arguments.length < 2) {
            ns = callback;

        console.log('events: ');

        iterator = addHandler.bind(null, this, ns);

        _.isObject(events) ?
            _.each(events, iterator) :
            iterator(callback, events);

        return this;

and added a log to the processingAddChild dynamic-rows method: pub/static/adminhtml/Magento/backend/en_US/Magento_Ui/js/dynamic-rows/dynamic-rows-grid.js

   processingAddChild: function (ctx, index, prop) {
        console.log('processingAddChild fire');
        if (this._elems.length > this.pageSize) {
            return false;

        this.addChild(ctx, index, prop);
        console.log('processingAddChild END\'S');

The result: enter image description here

Some additional options that you may think of:

  1. Replace this button for your own with a js-component expanding this button. Hence, you'll get full control over it.
  2. Use simple events like click for home-elements (probably, not the best decision).
  3. Replace a js-component for a dynamic row for your own and add the code you need at the beginning of the processingAddChild method processing and then call the parent method (this._super()).

The first and third options look like the best solution if you need to add your own elements and not to modify the existing Magento code.

  • 2
    Duh! Of course that was the solution. Extending the dynamic rows component. Thank you. Just for the record, I decided to change the function addChild instead of processingAddChild because I need to do something right after a child row is added. This also solves my next question of how I can add code when a row is deleted. Thank you again. – Marius Oct 3 '16 at 11:17
  • 1
    Hi @marius, can you provide some instructions on how you extended the dynamic rows component? – kolucciy Jan 8 '17 at 15:30
  • Is there any option to manage dynamic rows in product adding section with store view scope? – Ranganathan Nov 21 '18 at 12:39
  • @Marius, how can we limit dynamic rows to 10 rows maximum? just need to show error message if rows are more than 10 – jafar pinjar Jan 27 at 16:57

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.