Ajax grid for Symfony2

v1.0.0 2015-03-31 12:11 UTC


Build Status Version Downloads License

Ajax grid for Symfony2


Using Twitter Bootstrap, jQuery Bootstrap Datepicker and fake data with Faker.


  1. Twitter Bootstrap (not mandatory)
    • If you choose to don't use Twitter Bootstrap, it'll be necessary to create your own style.
  2. 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".


  1. Add as a dependency in your composer file

    "require": {
  2. Add to your Kernel

    // application/ApplicationKernel.php
    public function registerBundles()
        $bundles = array(
            new PedroTeixeira\Bundle\GridBundle\PedroTeixeiraGridBundle()
  3. Add to your assetics configuration

    # application/config/config.yml
        bundles: [ PedroTeixeiraGridBundle ]
  4. Add assets to your layout

    {% stylesheets
    <link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="screen" />
    {% endstylesheets %}
    {% javascripts
    <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
  5. (optional) Adjust configurations

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

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

Create your grid

  1. Create the grid class

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

    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')
            $this->addColumn('Created At')
                        'key' => 'value'
  2. Use the grid factory in your controller

    namespace PedroTeixeira\Bundle\TestBundle\Controller;
    use Symfony\Bundle\FrameworkBundle\Controller\Controller;
    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()
            /** @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');
            if ($grid->isResponseAnswer()) {
                return $grid->render();
            return array(
                'grid'   => $grid->render()
  3. Render in your template

    {{ pedroteixeira_grid(grid) }}

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

     {{ pedroteixeira_grid_html(grid) }}
     {{ pedroteixeira_grid_js(grid) }}


Continuous integration

To execute locally the checks that are executed on Travis:

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