Skip to content

Swahjak/grid-bundle

 
 

Repository files navigation

pedro-teixeira/grid-bundle

Build Status Version Downloads License

Ajax grid for Symfony2

Example

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

Requirements

  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".

Installation

  1. Add as a dependency in your composer file

    "require": {
        "pedro-teixeira/grid-bundle":"dev-master"
    }
  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
    assetic:
        bundles: [ PedroTeixeiraGridBundle ]
  4. Add assets to your layout

    {% 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 %}
  5. (optional) Adjust configurations

    # 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.

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.

    <?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);
        }
    }
  2. Use the grid factory in your controller

    <?php
    
    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');
            $grid->setQueryBuilder($queryBuilder);
    
            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) }}

Understanding

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

Packages

No packages published

Languages

  • PHP 81.0%
  • JavaScript 10.8%
  • HTML 5.8%
  • CSS 2.4%