How to catch rowClicked event on Oro Datagrid Bundle

datagrid-component.js

/*
Copy the original file:
vendor/oro/platform/src/Oro/Bundle/DataGridBundle/Resources/public/js/app/components/datagrid-component.js
to your bundle folder (e.g. src/Acme/Bundle/MyBundle/Resources/public/js/app/components/datagrid-component.js)

Add the custom code within the method build() as follows:
*/
        /**
         * Build grid
         */
        build: function () {
            
            // (Omitting)

            if (options.routerEnabled !== false) {
                // trace collection changes
                gridContentManager.trace(collection);
            }
            
// Custom - Start
            // Enable to pass the reference of Grid
            mediator.trigger('datagrid:datagrid_create_after', this.grid);
            // Enable to notify when the row is clicked
            this.listenTo(this.grid, 'rowClicked', function (grid, row) {
                mediator.trigger('datagrid:rowClicked', grid, row);
            });
// Custom - End

            this.built.resolve(grid);
        },

macros.html.twig

/*
Copy the original file (or add the macro in):
vendor/oro/platform/src/Oro/Bundle/DataGridBundle/Resources/views/macros.html.twig
to your bundle folder (e.g. src/Acme/Bundle/MyBundle/Resources/views/Include/macros.html.twig)

Change the follwoing line to refer where the custom datagrid-component.js is as follows:
*/
{% macro renderGrid(name, params = {}, renderParams = {}) %}
    {# Omitting #}
             data-page-component-module="acmemy/js/app/components/datagrid-component"
    {# Omitting #}
{% endmacro %}

update.html.twig

{% extends 'OroUIBundle:actions:update.html.twig' %}

{% import 'AcmeMyBundle::macros.html.twig' as myDataGrid %}
{# instead of {% import 'OroDataGridBundle::macros.html.twig' as dataGrid %} #}

{# Whatever your page needs #}

{% block content_data %}

    {% set myFields = [
        form_row(form.field_1),
        form_row(form.field_2),
        form_row(form.field_3),
        myDataGrid.renderGrid(
            'acme-grid',
            {'cssClass': 'inner-grid grid-acme-grid'}
        ),
    ] %}
    
    {% set dataBlocks = [
        'title': 'My Grid Example',
        'subblocks':
        [
            {
                'title': null,
                'data': myFields
            }
        ]
    ] %}

    {% set data =
        {
            'formErrors': form_errors(form)? form_errors(form) : null,
            'dataBlocks': dataBlocks,
        }
    %}

    {{ parent() }}

    <script type="text/javascript">
    require([
        'jquery',
        'oroui/js/mediator'
    ],
    function($, mediator) {

        'use strict';

        mediator.on('datagrid:rowClicked', function(grid, row) {

            var id;

            if (grid.name == 'acme-grid') {

                id = row.model.id;

                $.get(
                    '/api/rest/latest/acme/' + id + '.json',
                    function(data) {
                        // Set data to a form etc
                        // $('#field_1').val(data.field_1);
                    }
                );
            }
        });
    });
    </script>
{% endblock content_data %}