pedro-teixeira/grid-bundle (Symfony3 fork)

, _(*1)

Ajax grid for Symfony3, _(*2)

Example

, _(*3)

Using Twitter Bootstrap, jQuery Bootstrap Datepicker and fake data with Faker., _(*4)

Requirements

Twitter Bootstrap (not mandatory)
- If you choose to don't use Twitter Bootstrap, it'll be necessary to create your own style.
jQuery Bootstrap Datepicker (not mandatory)
- If you choose to don't use Bootstrap Datepicker, please disable the datepicker as default in the configuration, "use_datepicker".

Installation

Add as a dependency in your composer file, _(*5)

"require": {
    "pedro-teixeira/grid-bundle":"dev-master"
}

Add to your Kernel, _(*6)

// application/ApplicationKernel.php
public function registerBundles()
{
    $bundles = array(
        new PedroTeixeira\Bundle\GridBundle\PedroTeixeiraGridBundle()
    );
 }

Add to your assetics configuration, _(*7)

# application/config/config.yml
assetic:
    bundles: [ PedroTeixeiraGridBundle ]

Add assets to your layout, _(*8)

{% stylesheets
    '@PedroTeixeiraGridBundle/Resources/public/css/grid.css'
%}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="screen" />
{% endstylesheets %}

{% javascripts
    '@PedroTeixeiraGridBundle/Resources/public/js/grid.js'
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}

(optional) Adjust configurations, _(*9)

# application/config/config.yml
pedro_teixeira_grid:
    defaults:
        date:
            use_datepicker:     true
            date_format:        'dd/MM/yy'
            date_time_format:   'dd/MM/yy HH:mm:ss'
        pagination:
            limit:              20
        export:
            enabled:            true
            path:               '/tmp/'

The configuration "use_datepicker" will set the input type as "text" and attach a jQuery plugin "datepicker()" to the filter., _(*10)

Create your grid

Create the grid class, _(*11)

In your bundle, create a folder named "Grid" (or wathever namespace you want) and create your grid definition class., _(*12)

<?php

namespace PedroTeixeira\Bundle\TestBundle\Grid;

use PedroTeixeira\Bundle\GridBundle\Grid\GridAbstract;

/**
 * Test Grid
 */
class TestGrid extends GridAbstract
{
    /**
     * {@inheritdoc}
     */
    public function setupGrid()
    {
        $this->addColumn('Hidden Field')
            ->setField('hidden')
            ->setIndex('r.hidden')
            ->setExportOnly(true);

        $this->addColumn('ID')
            ->setField('id')
            ->setIndex('r.id')
            ->getFilter()
                ->getOperator()
                    ->setComparisonType('equal');

        $this->addColumn('Created At')
            ->setField('createdAt')
            ->setIndex('r.createdAt')
            ->setFilterType('date_range')
            ->setRenderType('date');

        $this->addColumn('Name')
            ->setField('name')
            ->setIndex('r.name');

        $this->addColumn('Number')
            ->setField('number')
            ->setIndex('r.number')
            ->setFilterType('number_range');

        $this->addColumn('Options')
            ->setField('option')
            ->setIndex('r.options')
            ->setFilterType('select')
            ->getFilter()
                ->setOptions(array(
                    'key' => 'value'
                ));

        $this->addColumn('Action')
            ->setTwig('PedroTeixeiraTestBundle:Test:gridAction.html.twig')
            ->setFilterType(false);
    }
}

Use the grid factory in your controller, _(*13)

<?php

namespace PedroTeixeira\Bundle\TestBundle\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Request;

use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;

use JMS\SecurityExtraBundle\Annotation\Secure;

/**
 * Default controller
 */
class DefaultController extends Controller
{
    /**
     * @Route("/", name="test")
      * @Template()
      *
      * @return array
      */
    public function indexAction(Request $request)
    {
        /** @var \Doctrine\ORM\EntityRepository $repository */
        $repository = $this->getDoctrine()->getRepository('PedroTeixeiraTestBundle:TestEntity');
        $queryBuilder = $repository->createQueryBuilder('r');

        /** @var \PedroTeixeira\Bundle\TestBundle\Grid\TestGrid $grid */
        $grid = $this->get('pedroteixeira.grid')->createGrid('\PedroTeixeira\Bundle\TestBundle\Grid\TestGrid', $request);
        $grid->setQueryBuilder($queryBuilder);

        if ($grid->isResponseAnswer()) {
            return $grid->render();
        }

        return array(
            'grid'   => $grid->render()
        );
    }
}

Render in your template, _(*14)

```twig {{ pedroteixeira_grid(grid) }}, _(*15)


Or if you want to render the grid's html and the grid's js separately:

```twig
{{ pedroteixeira_grid_html(grid) }}

...

{{ pedroteixeira_grid_js(grid) }}

Understanding

Grid
Column
- Render
- Filter

Continuous integration

To execute locally the checks that are executed on Travis:, _(*16)

composer install
find ./Grid ./DependencyInjection ./Twig -name "*.php" -exec php -l {} \;
./bin/phpcs --extensions=php --standard=PSR2 ./Grid ./DependencyInjection ./Twig