Important
You are browsing the documentation for version 4.1 of OroCommerce, OroCRM and OroPlatform, which is no longer maintained. Read version 5.1 (the latest LTS version) of the Oro documentation to get up-to-date information.
See our Release Process documentation for more information on the currently supported and upcoming releases.
Advanced Grid Configuration¶
This page contains basic examples of advanced datagrid configuration. More detailed explanation for each extension could be found in the Extensions documentation.
Problems and Solutions¶
Problem 1¶
Datagrid should show data dependent on some param. For example, a grid should show users for group that currently editing.
Solution:
Macros that renders datagrid can retrieve parameters that will be used to generate a URL for data retrieving.
Example:
1[dataGrid.renderGrid(gridName, {groupId: entityId})]
This param will be passed to the datagrid parameter bag and will be bound to the datasource query in the listener of the oro_datagrid.datagrid.build.after
event automatically if you specify the bind_parameters
option in the datasource configuration:
1 datagrids:
2 acme-demo-grid:
3 source:
4 type: orm
5 query:
6 select:
7 - u
8 from:
9 { table: AcmeDemoBundle:User, alias:u }
10 where:
11 and:
12 - u.group = :groupId
13 bind_parameters:
14 - groupId
Hint
Read more in parameters binding.
Problem 2¶
Let’s take the previous problem, but in addition fill a form field dependent on the grid state. For example, a grid should show users for a group that are currently editing and a user should be able to add/remove users from a group.
Solution:
To solve this problem, we have to modify the query. We are going to add an additional field that will show the value of the “assigned state”.
1 datagrids:
2 acme-demo-grid:
3 source:
4 type: orm
5 query:
6 select:
7 - u.id
8 - u.username
9 - >
10 (CASE WHEN (:groupId IS NOT NULL) THEN
11 CASE WHEN (:groupId
12 MEMBER OF u.groups OR u.id IN (:data_in)) AND u.id NOT IN (:data_not_in)
13 THEN true ELSE false END
14 ELSE
15 CASE WHEN u.id IN (:data_in) AND u.id NOT IN (:data_not_in)
16 THEN true ELSE false END
17 END) as isAssigned
18 from:
19 { table: AcmeDemoBundle:User, alias:u }
20 bind_parameters:
21 - groupId
22 columns:
23 isAssigned: # column has name correspond to data_name
24 label: Assigned
25 frontend_type: boolean
26 editable: true # put cell in editable mod
27 username:
28 label: Username
29 properties:
30 id: ~ # Identifier property must be passed to frontend
When this done, we have to create form fields that will contain an assigned/removed user ids and process them in the backend.
For example, the fields are:
1 form_widget(form.appendUsers, {'id': 'groupAppendUsers'}),
2 form_widget(form.removeUsers, {'id': 'groupRemoveUsers'}),
The last step is to set the rowSelection
option, which will add behavior of selecting rows in the frontend and handle binding
of data_in
and data_not_in
parameters to the datasource:
1 datagrids:
2 acme-demo-grid:
3 ... # previous configuration
4 options:
5 entityHint: oro.account.plural_label
6 rowSelection:
7 dataField: id
8 columnName: isAssigned # frontend column name
9 selectors:
10 included: '#groupAppendUsers' # field selectors
11 excluded: '#groupRemoveUsers'
Problem 3¶
Let’s take the previous problem when we need to fill a form field dependent on the grid state. For example, a grid should show users for group that is currently editing and a user should be able to select a parameter from the dropwown for users in this group.
Solution:
To solve this problem, we have to create a form field that will contain the changeset of the edited user fields and process it in the backend. For example, the fields are:
1 form_widget(form.changeset, {'id': 'changeset'}),
The next step is to modify the query. We are going to add an additional field enabled
that a user will be able to change.
1 datagrids:
2 acme-demo-grid:
3 source:
4 type: orm
5 query:
6 select:
7 - u.id
8 - u.username
9 - CASE WHEN u.enabled = true THEN 'enabled' ELSE 'disabled' END as enabled
10 from:
11 { table: AcmeDemoBundle:User, alias:u }
12 bind_parameters:
13 - groupId
14 options:
15 entityHint: oro.user.entity_plural_label
16 properties:
17 id: ~
18 columns:
19 username:
20 label: oro.user.username.label
21 enabled:
22 label: oro.user.enabled.label
23 frontend_type: select
24 editable: true
25 choices:
26 enabled: Active
27 disabled: Inactive
Similarly to Symfony2 choice Field Type
approach, an editable cell can be rendered as one of several different HTML fields, depending on the expanded
and multiple
options.
Currently supported are select tag
, select tag (with multiple attributes)
and radio buttons
.
Example for radio buttons:
1 datagrids:
2 acme-demo-grid:
3 ... # some configuration
4 columns:
5 username:
6 label: oro.user.username.label
7 enabled:
8 label: oro.user.enabled.label
9 frontend_type: select
10 editable: true
11 expanded: true
12 multiple: false
13 choices:
14 enabled: Active
15 disabled: Inactive
By default, expanded
and multiple
are false
and their presence in the config may be omitted.
The last step is to set the cellSelection
option which is going to add behavior of selecting rows in the frontend:
1 datagrids:
2 acme-demo-grid:
3 # previous configuration
4 options:
5 cellSelection:
6 dataField: id
7 columnName:
8 - enabled
9 selector: '#changeset'
Problem 4¶
Let’s take previous problem, but fill the selector in addiction to enum values.
Solution:
To solve this problem, use @oro_entity_extend.enum_value_provider->getEnumChoicesByCode('enum_code')
instead of the choice the array is using.
1 choices:
2 enabled: Active
3 disabled: Inactive
Example:
1 datagrids:
2 acme-demo-grid:
3 # some configuration
4 columns:
5 username:
6 label: oro.user.username.label
7 enabled:
8 label: oro.user.enabled.label
9 frontend_type: select
10 editable: true
11 choices: "@oro_entity_extend.enum_value_provider->getEnumChoicesByCode('user_status')"
Problem 5¶
I’m developing an extension for the grid, how can I add my frontend builder (a class that should show my widget)?
Solution:
Any builders can be passed under the gridconfig[options][jsmodules] node. Your builder should have method init, which is going to be called when the grid-builder finishes building the grid.
Example:
1 datagrids:
2 acme-demo-grid:
3 ... # some configuration
4 options:
5 jsmodules:
6 - your/builder/amd/module/name
Problem 6¶
I’m developing a grid that should be shown in the modal window, so I don’t need the “grid state URL”
Solution:
Grid states processed using Backbone.Router, and it can be easily disabled in the configuration by setting the routerEnabled option to false
.
Example:
1 datagrids:
2 acme-demo-grid:
3 ... # some configuration
4 options:
5 routerEnabled: false
Problem 7¶
I’m developing a grid that should not be under ACL control
Solution:
set option ‘skip_acl_apply’ to TRUE
Example:
1 datagrids:
2 acme-demo-grid:
3 ... # some configuration
4 source:
5 skip_acl_apply: true
6 ... # some configuration of source
Problem 8¶
I want to implement a custom security verification/logic without any default ACL, even if an ``acl_resource`` have been defined, e.g., I’m extending an existing grid but with custom acl logic.
Solution:
configure the grid (set option ‘skip_acl_apply’ to TRUE)
override option ‘acl_resource’ and to make it
false
1 datagrids: 2 acme-demo-grid: 3 ... # some configuration 4 acl_resource: false 5 source: 6 skip_acl_apply: true 7 ... # some configuration of source
declare your own grid listener
1 my_bundle.event_listener.my_grid_listener: 2 class: 'Acme\DemoBundle\EventListener\MyGridListener' 3 tags: 4 - { name: kernel.event_listener, event: oro_datagrid.datagrid.build.before.my-grid-name, method: onBuildBefore }
implement the grid listener, for example:
Oro/Bundle/UserBundle/Resources/config/oro/datagrids.yml
(owner-users-select-grid)Oro/Bundle/UserBundle/EventListener/OwnerUserGridListener.php
(service name: “oro_user.event_listener.owner_user_grid_listener”)
Problem 9¶
I want to have a grid secured by ACL resource but skip application of ACL to the DQL query of the grid.
Solution
configure the grid with option ‘skip_acl_apply’ set to TRUE, which will ignore applying of ACL to the source query of the grid
configure the grid with option ‘acl_resource’ set to the name of an ACL resource, it will check the permission to this ACL resource before the datagrid data is loaded
1 datagrids: 2 acme-demo-grid: 3 ... # some configuration 4 acl_resource: 'acme_demo_entity_view' 5 source: 6 skip_acl_apply: true
Problem 10¶
I need to add a new column to the datagrid which should be secured by an additional ACL resource (e.g., budget fields should be visible only to managers)
Solution:
Create a datagrid event listener listening to the BuildBefore event and add columns only if the user has appropriate permissions
1 <?php 2 3 namespace Acme\Bundle\AcmeBundle\EventListener\Datagrid; 4 5 use Oro\Bundle\DataGridBundle\Event\BuildBefore; 6 use Symfony\Component\Security\Core\Authorization\AuthorizationCheckerInterface; 7 8 class BudgetColumnsListener 9 { 10 /** @var AuthorizationCheckerInterface */ 11 private $authorizationChecker; 12 13 /** 14 * @param AuthorizationCheckerInterface $authorizationChecker 15 */ 16 public function __construct(AuthorizationCheckerInterface $authorizationChecker) 17 { 18 $this->authorizationChecker = $authorizationChecker; 19 } 20 21 /** 22 * @param BuildBefore $event 23 */ 24 public function onBuildBefore(BuildBefore $event) 25 { 26 if (!$this->authorizationChecker->isGranted('acme_bundle_show_budget_columns')) { 27 return; 28 } 29 30 $config = $event->getConfig(); 31 32 $this->addSourceQueryConfig($config); 33 $this->addColumnsConfig($config); 34 } 35 }
Problem 11¶
I want to override the default “no data messages” for empty grid and empty filtered grid.
Solution:
There are 2 cases, when noDataMessage shown:
grid is empty because there are no entities to show
grid is empty because no entities were found to match the search criteria after applying filters.
There are several ways to configure these messages.
If the entityHint option is set in the grid configuration, it is used to compile noDataMessage.
For example:
1datagrids: 2 acme-demo-grid: 3 source: 4 type: orm 5 query: 6 select: 7 - u.id 8 - u.username 9 from: 10 { table: AcmeDemoBundle:User, alias:u } 11 options: 12 entityHint: oro.user.entity_plural_label
“There are no users” message is displayed for an empty grid and “No users were found to match your search. Try modifying your search criteria…” is shown for empty filtered grid.
If entityHint is not set in the grid configuration, then it is automatically taken from the entity on the basis of which this grid is built.
For example:
1 datagrids: 2 acme-demo-grid: 3 source: 4 type: orm 5 query: 6 select: 7 - u.id 8 - u.username 9 from: 10 { table: AcmeDemoBundle:User, alias:u } 11 options: 12 ...
“There are no users” message is shown for empty grid and “No users were found to match your search. Try modifying your search criteria…” is shown for empty filtered grid.
If noDataMessages option is set in the grid configuration, then corresponding messages for empty grid and empty filtered grid are taken from the specified translation keys.
For example:
1datagrids: 2 acme-demo-grid: 3 source: 4 type: orm 5 query: 6 select: 7 - u.id 8 - u.username 9 from: 10 { table: AcmeDemoBundle:User, alias:u } 11 options: 12 noDataMessages: 13 emptyGrid: acme.my_custom_empty_grid_message 14 emptyFilteredGrid: acme.my_custom_empty_filtered_grid_message 15 ...
messages.en.yml:
1 acme: 2 my_custom_empty_grid_message: 'There are no users' 3 my_custom_empty_filtered_grid_message: 'No users were found to match your search. Try modifying your search criteria...'