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.

Editable Datagrid Cells

Editable datagrid cells are used to change data directly in the grid. Currently select and radio buttons editable cells are supported.

Example of Use

Demonstrative example is customer-product-visibility-grid. On product edit page added customers grid with visibilityForCustomer column. User be able to set visibility type of current product for customer in grid. For example, imagine that we already have entity CustomerProductVisibility with relations between customer, product and enum visibility.

In this case, a developer should perform three steps, discussed below.

  1. Mark editable some fields in the datagrid config and add cellSelection

Example of grid configuration:

 1 datagrids:
 2     customer-product-visibility-grid:
 3         source:
 4             acl_resource:      acme_product_view
 5             type:              orm
 6             query:
 7                 select:
 8                     - customer.id
 9                     - customer.name
10                     - IDENTITY(customerProductVisibility.visibility) as visibility
11                 from:
12                     - { table: 'Acme\Bundle\AcmeBundle\Entity\Customer', alias: customer }
13                 join:
14                     left:
15                         - { join: 'Acme\Bundle\AcmeBundle\Entity\CustomerProductVisibility', alias: customerProductVisibility, conditionType: WITH, condition: 'customerProductVisibility.customer = customer' }
16                 where:
17                     and:
18                         - IDENTITY(customerProductVisibility.product) = :product_id
19             bind_parameters:
20                 - product_id
21         inline_editing:
22             enable: true # this grid will allow to edit some cells
23         columns:
24             name:
25                 label: acme.customer.name.label
26             visibility:
27                 label: acme.customer.product_visibility.label
28                 frontend_type: select
29                 inline_editing:
30                     enable: true # this cell wil be editable
31                 expanded: true # this cell will be rendered as radio buttons
32                 choices: "@oro_entity_extend.enum_value_provider->getEnumChoicesByCode('cust_prod_visibility')"
33         options:
34             cellSelection:
35                 dataField: id
36                 columnName:
37                     - visibility
38                 selector: '#customer-product-visibility-changeset'
39         properties:
40             id: ~

Common options:

Section inline_editing with option enable for columns makes the cell editable. Option cellSelection adds behavior of the editable cell in grid in the frontend.

Event listener \Oro\Bundle\DataGridBundle\EventListener\CellSelectionListener is applied to all grids with the cellSelection option. If this option is specified, the listener will add a js module orodatagrid/js/datagrid/listener/change-editable-cell-listener to handle changes behavior in the frontend.

To receive the select options or radio buttons values, use the oro_entity_extend.enum_value_provider service which provides the ability to get enum values by enum code.

  1. Add oro_entity_changeset to form type

 1 $builder
 2     ...
 3     ->add(
 4         'visibilityForCustomer',
 5         EntityChangesetType::NAME,
 6         [
 7             'class' => 'OroB2B\Bundle\CustomerBundle\Entity\Customer'
 8         ]
 9     )
10     ...

Option class in \Oro\Bundle\FormBundle\Form\Type\EntityChangesetType is required. It is the class name of the grid item.

Then, add visibilityForCustomer field in the template.

1 ...
2 form_row(form.visibilityForCustomer, {'id': 'customer-product-visibility-changeset'})
3 ...

Attribute id must be specified in the selector parameter of the the grid config: selector: '#customer-product-visibility-changeset'.

As a result, field visibilityForCustomer which contains data in current format is going to be hidden:

1 {"<customerId>" : {"<visibility>" : "<value>", ...}, ... }
  1. Create custom form handler with processing editable grid cells

To convert enum value in the handler, use method getEnumValueByCode of the oro_entity_extend.enum_value_provider service.

Below is an example of such handler:

 1 ...
 2 /**
 3  * Process form
 4  *
 5  * @param Product $product
 6  * @return bool True on successful processing, false otherwise
 7  */
 8 public function process(Product $product)
 9 {
10     $this->form->setData($product);
11     if (in_array($this->request->getMethod(), ['POST', 'PUT'], true)) {
12         $this->form->submit($this->request);
13
14         if ($this->form->isValid()) {
15             $this->onSuccess($product);
16
17             return true;
18         }
19     }
20
21     return false;
22 }
23
24 /**
25  * "Success" form handler
26  *
27  * @param Product $product
28  */
29 protected function onSuccess(Product $product)
30 {
31     $changeSet = $this->form->get('visibilityForCustomer')->getData();
32
33     foreach ($changeSet as $item) {
34         /** @var Customer $customer */
35         $customer = $item['entity'];
36         $productVisibility = $this->manager->getRepository('OroB2BCustomerBundle:CustomerProductVisibility')
37             ->findOneBy(['product' => $product, 'customer' => $customer]);
38
39         if (!$productVisibility) {
40             $productVisibility = new CustomerProductVisibility();
41             $productVisibility->setProduct($product);
42             $productVisibility->setCustomer($customer);
43         }
44
45             'cust_prod_visibility',
46             $item['data']['visibility']
47         );
48
49         $productVisibility->setVisibility($visibility);
50         $this->manager->persist($productVisibility);
51     }
52
53     $this->manager->persist($product);
54     $this->manager->flush();
55 }
56 ...