get checked item IDs from datagrid in widget

Hi,

I have a dialog widget which opens and renders a datagrid with editable checkboxes for each row. I’d like to send the id of each checked item to some controller action:

the dialog widget content:

{% import 'OroUIBundle::macros.html.twig' as UI %} {% import 'OroDataGridBundle::macros.html.twig' as dataGrid %} <div class="widget-content"> <script type="text/javascript"> require(['oroui/js/mediator', 'oroui/js/widget-manager'], function(mediator, widgetManager) { //do something funky! } ); </script> <div class="form-container"> {{ dataGrid.renderGrid(referenceableEntityConfig.get("datagrid_name_select"), {ref_el_id: referenceableElement.id}, {} ) }} <form id="relationship_select_form" action="" method="post" class="listitem-form"> <div class="widget-actions form-actions" style="display: none;"> <button class="btn" type="reset">{{ 'Cancel'|trans }}</button> <button class="btn btn-primary" type="submit">{{ 'Save'|trans }}</button> </div> </form> </div> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

{% import 'OroUIBundle::macros.html.twig' as UI %} {% import 'OroDataGridBundle::macros.html.twig' as dataGrid %}   <div class="widget-content">   <script type="text/javascript"> require(['oroui/js/mediator', 'oroui/js/widget-manager'], function(mediator, widgetManager) { //do something funky! } ); </script> <div class="form-container"> {{ dataGrid.renderGrid(referenceableEntityConfig.get("datagrid_name_select"), {ref_el_id: referenceableElement.id}, {} ) }} <form id="relationship_select_form" action="" method="post" class="listitem-form"> <div class="widget-actions form-actions" style="display: none;"> <button class="btn" type="reset">{{ 'Cancel'|trans }}</button> <button class="btn btn-primary" type="submit">{{ 'Save'|trans }}</button> </div> </form> </div> </div>

datagrid extract:

... columns: isAssigned: label: 'assigned' editable: true frontend_type: boolean ...

1 2 3 4 5 6 7 8 9

... columns:             isAssigned:                 label:         'assigned'                 editable:      true                 frontend_type: boolean ...

as you can see I did not have a form type just a plain form tag, so I need to intercept the submit action serialize the list of ids in some hidden field and send it to the controller.

can it be done this way by using some js or would it be better to build a form?

thanks
a\

---

oro/platform(1.6.2) + oro/doctrine-extensions(1.0.7) + symfony/symfony(v2.3.27)

Topic

[Yevhen ShyshkinParticipant]

Hello.

There are two ways to do that out of the box:

1) you can use mass actions, see examples on contact grid (delete action) and accounts grid (merge action);

2) you can use existing hidden form type for such boolean fields, see User Group edit page, field “Has group”.

[jakabadambalazsParticipant]

Hi yshyshkin,

Thanks I have read some docs and I actually opted for the solution you used when assigning accounts for Contacts. And I am nearly there – I have one little problem to resolve.

I created a form with two unmapped fields:

protected function buildFields(FormBuilderInterface $builder, array $options) { $builder->add( 'appendElements', 'oro_entity_identifier', array( 'class' => 'Mekit\Bundle\RelationshipBundle\Entity\ReferenceableElement', 'required' => false, 'mapped' => false, 'multiple' => true, ) ); $builder->add( 'removeElements', 'oro_entity_identifier', array( 'class' => 'Mekit\Bundle\RelationshipBundle\Entity\ReferenceableElement', 'required' => false, 'mapped' => false, 'multiple' => true, ) ); }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

protected function buildFields(FormBuilderInterface $builder, array $options) { $builder->add( 'appendElements', 'oro_entity_identifier', array( 'class'    => 'Mekit\Bundle\RelationshipBundle\Entity\ReferenceableElement', 'required' => false, 'mapped'   => false, 'multiple' => true, ) ); $builder->add( 'removeElements', 'oro_entity_identifier', array( 'class'    => 'Mekit\Bundle\RelationshipBundle\Entity\ReferenceableElement', 'required' => false, 'mapped'   => false, 'multiple' => true, ) ); }

My controller action is calling the form handler and successfully intercepts the ‘appendElements’ and ‘removeElements’ form data and does what it has to do.

This is my dialog widget:

{% import 'OroUIBundle::macros.html.twig' as UI %} {% import 'OroDataGridBundle::macros.html.twig' as dataGrid %} <div class="widget-content"> {% if saved %} <script type="text/javascript"> require(['underscore', 'orotranslation/js/translator', 'oroui/js/widget-manager', 'oroui/js/messenger', 'oroui/js/mediator'], function(_, __, widgetManager, messenger, mediator) { widgetManager.getWidgetInstance({{ app.request.get('_wid')|json_encode|raw }}, function(widget) { messenger.notificationFlashMessage('success', __('mekit.relationship.saved.message')); mediator.trigger('widget_success:' + widget.getAlias()); mediator.trigger('widget_success:' + widget.getWid()); //not refreshing mediator.trigger('datagrid:doRefresh:{{ referenceableEntityConfig.get("datagrid_name_select") }}'); // widget.remove(); }); } ); </script> {% else %} {{ dataGrid.renderGrid(referenceableEntityConfig.get("datagrid_name_select"), {ref_el_id: referenceableElement.id}, {} ) }} <div class="form-container"> {{ form_start(form) }} {{ form_widget(form.appendElements, {'id': 'appendElements'}) }} {{ form_widget(form.removeElements, {'id': 'removeElements'}) }} <div class="widget-actions form-actions" style="display: none;"> <button class="btn" type="reset">{{ 'Cancel'|trans }}</button> <button class="btn btn-primary" type="submit">{{ 'Save'|trans }}</button> </div> {{ form_end(form) }} </div> {% endif %} </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

{% import 'OroUIBundle::macros.html.twig' as UI %} {% import 'OroDataGridBundle::macros.html.twig' as dataGrid %}   <div class="widget-content"> {% if saved %} <script type="text/javascript"> require(['underscore', 'orotranslation/js/translator', 'oroui/js/widget-manager', 'oroui/js/messenger', 'oroui/js/mediator'], function(_, __, widgetManager, messenger, mediator) { widgetManager.getWidgetInstance({{ app.request.get('_wid')|json_encode|raw }}, function(widget) { messenger.notificationFlashMessage('success', __('mekit.relationship.saved.message')); mediator.trigger('widget_success:' + widget.getAlias()); mediator.trigger('widget_success:' + widget.getWid()); //not refreshing mediator.trigger('datagrid:doRefresh:{{ referenceableEntityConfig.get("datagrid_name_select") }}'); // widget.remove(); }); } ); </script> {% else %} {{ dataGrid.renderGrid(referenceableEntityConfig.get("datagrid_name_select"), {ref_el_id: referenceableElement.id}, {} ) }} <div class="form-container"> {{ form_start(form) }} {{ form_widget(form.appendElements, {'id': 'appendElements'}) }} {{ form_widget(form.removeElements, {'id': 'removeElements'}) }} <div class="widget-actions form-actions" style="display: none;"> <button class="btn" type="reset">{{ 'Cancel'|trans }}</button> <button class="btn btn-primary" type="submit">{{ 'Save'|trans }}</button> </div> {{ form_end(form) }} </div> {% endif %} </div>

When I click the save button it triggers the controller action, data is persisted, messenger shows my message, underlying datagrid in the page is refreshed and the dialog closes.

All is perfect, except for one thing.
If I hit the “select” button which reopens the dialog, the datagrid in the dialog is not up to date (the checkboxes do not reflect the persisted changes). If I hit the datagrid’s refresh button it reloads the datagrid and now persisted changes are visible.
So I tried to add

mediator.trigger('datagrid:doRefresh:{{ referenceableEntityConfig.get(&quot;datagrid_name_select&quot;) }}');

1	mediator.trigger('datagrid:doRefresh:{{ referenceableEntityConfig.get("datagrid_name_select") }}');

in my code before closing the dialog to force refresh the datagrid but no changes.

Any ideas?
thanks
a\

---

oro/platform(1.6.2) + oro/doctrine-extensions(1.0.7) + symfony/symfony(v2.3.27)

[Yevhen ShyshkinParticipant]

I think you should reload grid not before closing but after opening because widget data is destroyed after dialog closed.

You are using event “datagrid:doRefresh:” – that’s correct. Please, try to run it after grid loaded – f.e. using event “grid_render:complete” for your specific grid.

Another solution – you can find out where outdated data came from and clear this data. Possible place – Oro/Bundle/DataGridBundle/Resources/public/js/content-manager.js.

[jakabadambalazsParticipant]

Thanks, Tomorrow I’ll try.

I know how to do the first one (probably). I actually realized that the datagrid was not even present when I was trying to reload it (because it is only rendered when the ‘save’ variable is false). ;)

But no clue about the second (event though I think it would be best) – I looked into at contentManager and I can see it has two methods: get and trace. What do I do? Do I just use the get method (which returns a collection object) and just set the returned collection to null?

a\

---

oro/platform(1.6.2) + oro/doctrine-extensions(1.0.7) + symfony/symfony(v2.3.27)

[jakabadambalazsParticipant]

Sweet! I hooked into ‘oronavigation/js/content-manager’ and I clean up the cached datagrid data before closing my dialog widget this way:

<script type="text/javascript"> require(['underscore', 'orotranslation/js/translator', 'oroui/js/widget-manager', 'oroui/js/messenger', 'oroui/js/mediator', 'oronavigation/js/content-manager'], function(_, __, widgetManager, messenger, mediator, navigationContentManager) { widgetManager.getWidgetInstance({{ app.request.get('_wid')|json_encode|raw }}, function(widget) { messenger.notificationFlashMessage('success', __('mekit.relationship.saved.message')); mediator.trigger('widget_success:' + widget.getWid()); /*mediator.trigger('widget_success:' + widget.getAlias());*/ //clear cached datagrid data var gridNameKey = "grid[{{ referenceableEntityConfig.get("datagrid_name_select") }}]"; if(!_.isUndefined(mediator.execute('pageCache:state:fetch', gridNameKey))) { navigationContentManager.saveState(gridNameKey, null); console.log("state is cleared for: " + gridNameKey); } widget.remove(); }); } ); </script>

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

<script type="text/javascript"> require(['underscore', 'orotranslation/js/translator', 'oroui/js/widget-manager', 'oroui/js/messenger', 'oroui/js/mediator', 'oronavigation/js/content-manager'], function(_, __, widgetManager, messenger, mediator, navigationContentManager) { widgetManager.getWidgetInstance({{ app.request.get('_wid')|json_encode|raw }}, function(widget) { messenger.notificationFlashMessage('success', __('mekit.relationship.saved.message')); mediator.trigger('widget_success:' + widget.getWid()); /*mediator.trigger('widget_success:' + widget.getAlias());*/   //clear cached datagrid data var gridNameKey = "grid[{{ referenceableEntityConfig.get("datagrid_name_select") }}]"; if(!_.isUndefined(mediator.execute('pageCache:state:fetch', gridNameKey))) { navigationContentManager.saveState(gridNameKey, null); console.log("state is cleared for: " + gridNameKey); }   widget.remove(); }); } ); </script>

It works well! It is a bit different from how you suggested. Is it dirty or can I leave it like this?

thanks
a\

---

oro/platform(1.6.2) + oro/doctrine-extensions(1.0.7) + symfony/symfony(v2.3.27)

[Yevhen ShyshkinParticipant]

I don’t see any major issues here, so you can leave it.

Accidently I’ve found another solution – you can initialize widget with “reload-grid-name” option and this grid will be automatically refreshed with widget reloading – you can also try this one.

[jakabadambalazsParticipant]

Thanks! but I don’t think in this case it is of use:
I have this button to open the dialog:

{% if referenceableEntityConfig.get("datagrid_name_select") %} {{ UI.clientButton({ 'dataUrl': path('mekit_relationship_widget_select_items', {id: referenceableElement.id, type: entity_class} ), 'aCss': 'no-hash btn-mini btn-primary btn-uppercase', 'iCss': '', 'dataId': referenceableElement.id, 'title' : "mekit.relationship.select_references.label"|trans|replace({'%s': referenceableEntityConfig.get("label")|trans}), 'label' : "mekit.relationship.select.label"|trans, 'widget' : { 'type': 'dialog', 'multiple' : false, 'reload-grid-name' : referenceableEntityConfig.get("datagrid_name_list"), 'stateEnabled': false, 'options' : { 'dialogOptions' : { 'title' : "mekit.relationship.select_references.label"|trans|replace({'%s': referenceableEntityConfig.get("label")|trans}), 'allowMaximize': true, 'allowMinimize': false, 'width': 900 } } } }) }} {% endif %}

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

{% if referenceableEntityConfig.get("datagrid_name_select") %} {{ UI.clientButton({ 'dataUrl': path('mekit_relationship_widget_select_items', {id: referenceableElement.id, type: entity_class} ), 'aCss': 'no-hash btn-mini btn-primary btn-uppercase', 'iCss': '', 'dataId': referenceableElement.id, 'title' : "mekit.relationship.select_references.label"|trans|replace({'%s': referenceableEntityConfig.get("label")|trans}), 'label' : "mekit.relationship.select.label"|trans, 'widget' : { 'type': 'dialog', 'multiple' : false, 'reload-grid-name' : referenceableEntityConfig.get("datagrid_name_list"), 'stateEnabled': false, 'options' : { 'dialogOptions' : { 'title' : "mekit.relationship.select_references.label"|trans|replace({'%s': referenceableEntityConfig.get("label")|trans}), 'allowMaximize': true, 'allowMinimize': false, 'width': 900 } } } }) }} {% endif %}

I already have a ‘reload-widget-name’ under the widget section which reloads the datagrid in the page when i trigger the “widget_success:wid” (mediator.trigger(‘widget_success:’ + widget.getWid());) from the dialog. and it works ok – my problem is/was with the datagrid inside the dialog widget.

thanks a lot
a\

---

oro/platform(1.6.2) + oro/doctrine-extensions(1.0.7) + symfony/symfony(v2.3.27)

[Author]

Replies