Customizing Grids¶

Note

We assume that you are familiar with grids. If not check the documentation of the Grid Bundle and Grid Component first.

Why would you customize grids?¶

When you would like to change how the index view of an entity looks like in the administration panel, then you have to override its grid.

remove a field from a grid
change a field of a grid
reorder fields
override an entire grid

How to customize grids?¶

Tip

One way to change anything in any grid in Sylius is to create a special file in the app/config/ directory: app/config/grids.yml which has to be imported in the app/config/config.yml.

# app/config/config.yml
imports:
    - { resource: "grids.yml" }

How to customize fields of a grid?¶

How to remove a field from a grid?¶

If you would like to remove a field from an existing Sylius grid, you will need to disable it in the app/config/grids.yml.

Let’s imagine that we would like to hide the title of product review field on the sylius_admin_product_review grid.

# app/config/grids.yml
sylius_grid:
    grids:
        sylius_admin_product_review:
            fields:
                title:
                    enabled: false

That’s all. Now the title field will be disabled (invisible).

How to modify a field of a grid?¶

If you would like to modify for instance a label of any field from a grid, that’s what you need to do:

# app/config/grids.yml
sylius_grid:
    grids:
        sylius_admin_product_review:
            fields:
                date:
                    label: "When was it added?"

How to customize filters of a grid?¶

How to remove a filter from a grid?¶

If you would like to remove a filter from an existing Sylius grid, you will need to disable it in the app/config/grids.yml.

Let’s imagine that we would like to hide the titles filter of product reviews on the sylius_admin_product_review grid.

# app/config/grids.yml
sylius_grid:
    grids:
        sylius_admin_product_review:
            filters:
                title:
                    enabled: false

That’s all. Now the title filter will be disabled.

How to customize actions of a grid?¶

How to remove an action from a grid?¶

If you would like to disable some actions in any grid, you just need to set its enabled option to false like below:

# app/config/grids.yml
sylius_grid:
    grids:
        sylius_admin_product_review:
            actions:
                item:
                    delete:
                        type: delete
                        enabled: false

How to modify an action of a grid?¶

If you would like to change the link to which an action button is redirecting, this is what you have to do:

Warning

The show button does not exist in the sylius_admin_product grid by default. It is assumed that you already have it customized, and your grid has the show action.

# app/config/grids.yml
sylius_grid:
    grids:
        sylius_admin_product:
            actions:
                item:
                    show:
                        type: show
                        label: Show in the shop
                        options:
                            link:
                                route: sylius_shop_product_show
                                parameters:
                                    slug: resource.slug

The above grid modification will change the redirect of the show action to redirect to the shop, instead of admin show. Also the label was changed here.

How to modify positions of fields, filters and actions in a grid?¶

For fields, filters and actions it is possible to easily change the order in which they are displayed in the grid.

See an example of fields order modification on the sylius_admin_product_review grid below:

# app/config/grids.yml
sylius_grid:
    grids:
        sylius_admin_product_review:
            fields:
                date:
                    position: 5
                title:
                    position: 6
                rating:
                    position: 3
                status:
                    position: 1
                reviewSubject:
                    position: 2
                author:
                    position: 4

Customizing grids by events¶

There is also another way to customize grids: via events. Every grid configuration dispatches an event when its definition is being converted.

For example, sylius_admin_product grid dispatches such an event:

sylius.grid.admin_product # For the grid of products in admin

To show you an example of a grid customization using events, we will remove a field from a grid using that method. Here are the steps, that you need to take:

1. In order to remove fields from the product grid in Sylius you have to create a AppBundle\Grid\AdminProductsGridListener class.

In the example below we are removing the images field from the sylius_admin_product grid.

<?php

namespace AppBundle\Grid;

use Sylius\Component\Grid\Event\GridDefinitionConverterEvent;

final class AdminProductsGridListener
{
    /**
     * @param GridDefinitionConverterEvent $event
     */
    public function removeImageField(GridDefinitionConverterEvent $event)
    {
        $grid = $event->getGrid();

        $grid->removeField('image');
    }
}

2. After creating your class with a proper method for the grid customizations you need, subscribe your listener to the sylius.grid.admin_product event in the AppBundle/Resources/config/services.yml.

# AppBundle/Resources/config/services.yml
services:
    app.listener.admin.products_grid:
        class: AppBundle\Grid\AdminProductsGridListener
        tags:
            - { name: kernel.event_listener, event: sylius.grid.admin_product, method: removeImageField }

3. Result:

After these two steps your admin product grid should not have the image field.

How to override an entire grid?¶

Tip

This is the other way to customize grids. If you need to change more, than just slight adjustments we do recommend to override an entire grid file in the app/Resources/ directory.

Let’s assume that you would like to modify the shipping_categories grid by removing filters and the delete action from it.

To achieve that you need to create the app/Resources/SyliusAdminBundle/config/grids/shipping_category.yml file.
Then into the created file copy the content of Sylius/Bundle/AdminBundle/Resources/config/grids/shipping_category.yml.
And modify it to your needs:

# app/Resources/SyliusAdminBundle/config/grids/shipping_category.yml
sylius_grid:
    grids:
        sylius_admin_shipping_category:
            driver:
                name: doctrine/orm
                options:
                    class: "%sylius.model.shipping_category.class%"
                    repository:
                        method: createListQueryBuilder
            fields:
                code:
                    type: string
                    label: sylius.ui.code
                name:
                    type: string
                    label: sylius.ui.name
                createdAt:
                    type: datetime
                    label: sylius.ui.creation_date
                    options:
                        format: d-m-Y H:i
                updatedAt:
                    type: datetime
                    label: sylius.ui.updating_date
                    options:
                        format: d-m-Y H:i
            actions:
                main:
                    create:
                        type: create
                item:
                    update:
                        type: update

In the above example the delete action and the filters section have been removed.

That’s it! The grid has been modified and it will look like that: