Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
How to catch rowClicked event on Oro Datagrid Bundle
/*
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);
},
/*
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 %}
{% 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 %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.