AzoftCase StudiesDataGridBundle: Creating Data Grids in Symfony 2.1

DataGridBundle: Creating Data Grids in Symfony 2.1

By Alexey Romanenko on February 5, 2013

Recently, while working on one of our web development projects using Symfony 2.1 framework we needed a tool for creating data grids with the ability to sort, filter, and export data. To learn about our options we turned to the Packagist service, a Composer package repository that provides several convenient grids. We found several solutions but they either did not provide the necessary functionality or documentation, or we encountered problems while working with the filters. After searching for other alternatives, it turned out that DataGridBundle was the best fit for our requirements.

In this article I will discuss how to install and configure DataGridBundle in Symfony 2.1 and provide one practical example.

DataGridBundle offers the following features:

  • Supports Entity (ORM), Document (ODM) and Vector (Array) sources
  • Sortable and filterable with operators
  • Auto-typing columns
  • Export (CSV, Excel, PDF, XML, JSON, HTML, …)
  • Row and mass actions
  • Pagination
  • Grid manager for multi-grid on the same page
  • Easy templates overriding (twig)
  • Support for multiple languages

To learn about other features provided by DataGridBundle, click here.

After applying CSS-styles, a table would look like this:

datagridbundle 01(1) DataGridBundle: Creating Data Grids in Symfony 2.1

datagridbundle 02 DataGridBundle: Creating Data Grids in Symfony 2.1

FYI This example was taken from GitHub – a web portal for resource allocation and development collaboration. There you can also find all necessary documentation for dataGridBundle, screenshots of various tables, as well as DataGridBundle files available for download.

Now, lets take a look at the installation process.

  • The following lines should be added to the deps file::
[DataGridBundle]
       git=git://github.com/Abhoryo/APYDataGridBundle.git
       target=bundles/APY/DataGridBundle
  • Update the bundle using the script:
php bin/vendors install
  • Add the name space to autoload.php:

              <?php
               // app/autoload.php

               $loader->registerNamespaces(array(
               // ...
               'APY' => __DIR__.'/../vendor/bundles',
                ));
  • Enable this bundle in AppKernel.php

                <?php
               // app/AppKernel.php

                public function registerBundles()
                {
                 $bundles = array(
                 // ...
                 new APY\DataGridBundle\APYDataGridBundle(),
                 );
                }

In the above example we have created a grid from array data. Then, for the “Name” column, we set the “Select” filter type.

Keep in mind that all work is done within the method

$grid->getGridResponse()

Therefore, if the table is not displayed or you receive a message saying that there is no data, you should go back and check your code for the call.

In order to display the table in the template you have to call the function:

Controller:

$data = array(
   array(
       'name' => 'Alexey',
       'login' => 'alexey',
       'age' => 25,
       'password' => 'qwerty',
       'salt' => 'ytrewq',
       'boolean' => 1,
   ),
   array(
       'name' => 'Alexey1',
       'login' => 'alexey1',
       'age' => 25,
       'password' => 'qwerty1',
       'salt' => 'ytrewq1',
       'boolean' => 1,
   ),
   array(
       'name' => 'Alexey2',
       'login' => 'alexey2',
       'age' => 25,
       'password' => 'qwerty2',
       'salt' => 'ytrewq2',
       'boolean' => 0,
   ),
);

   $source = new Vector($data);

   /** @var $grid \APY\DataGridBundle\Grid\Grid */
   $grid = $this->get('grid');

   $grid->setSource($source);

   /* @var $nameColumn \APY\DataGridBundle\Grid\Column\Column */
   $nameColumn = $grid->getColumn('name');
   $nameColumn->setFilterType('select')->setSelectFrom('query');

   return $grid->getGridResponse();

In the above example we have created a grid from array data. Then, for the “Name” column, we set the “Select” filter type.

You can use either internal (default) filter or external filter. Display the external filter. To enable the filter, write:

{{ grid_search(grid) }}
{{ grid(grid, _self) }} 

To hide the filter from the grid, write:

{% block grid_filters %}{% endblock grid_filters%}

Be careful when using _self inside the templates. Once, we encountered a problem which made it impossible to get access to the variables within the template, even though {{debug}} function was showing that the variable was defined and did, in fact, exist. To avoid this issue we recommend that you move the template to a separate file for later use.

So, these are the basic methods for working with DataGridBundle in web applications developed using Symfony 2.1 framework. We hope our advice will come in handy if you ever find yourself in a similar situation.

For more information about the DataGridBundle you can browse the documentation posted on GitHub website.

VN:F [1.9.22_1171]
Rating: 3.5/5 (2 votes cast)
VN:F [1.9.22_1171]
Rating: +3 (from 3 votes)
DataGridBundle: Creating Data Grids in Symfony 2.1, 3.5 out of 5 based on 2 ratings

Content created by Alexey Romanenko