Symfony Ag Grid Bundle Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require ansien/symfony-ag-grid-bundle
   

   Enable the bundle in config/bundles.php:

   return [
       // ...
       Ansien\AgGridBundle\AgGridBundle::class => ['all' => true],
   ];
   

2. First Use Case:

   • Register a grid in a controller:

     use Ansien\AgGridBundle\Grid\GridFactory;
     
     public function gridAction(GridFactory $gridFactory)
     {
         $grid = $gridFactory->create('my_grid');
         $grid->setDataSource($this->getDoctrine()->getRepository(MyEntity::class)->findAll());
         return $this->render('my_template.html.twig', ['grid' => $grid]);
     }
     

   • Use Twig template:

     {{ ag_grid(grid) }}
     

3. Key Files:

   • config/packages/ag_grid.yaml (if auto-generated)
   • templates/ag_grid/_grid.html.twig (default template location)

Implementation Patterns

Common Workflows

1. Dynamic Data Binding:

   $grid->setDataSource(function() {
       return $this->entityManager->getRepository(MyEntity::class)
           ->createQueryBuilder('e')
           ->where('e.status = :status')
           ->setParameter('status', 'active')
           ->getQuery()
           ->getResult();
   });
   

2. Column Configuration:

   $grid->setColumns([
       ['field' => 'id', 'headerName' => 'ID', 'width' => 100],
       ['field' => 'name', 'headerName' => 'Name', 'editable' => true],
       ['field' => 'createdAt', 'headerName' => 'Created At', 'valueFormatter' => 'dateFormatter'],
   ]);
   

3. Event Handling:

   $grid->setEventListeners([
       'onCellClicked' => function($params) {
           $this->addFlash('info', 'Clicked: ' . $params['data']['name']);
       }
   ]);
   

4. Integration with Forms:

   $grid->setFormType(MyEntityType::class);
   $grid->setFormHandler(function($entity, $data) {
       $entity->setName($data['name']);
       $this->entityManager->flush();
   });
   

Twig Integration Tips

• Override default template by copying templates/ag_grid/_grid.html.twig to your project.
• Pass custom options:

  {{ ag_grid(grid, {
      'defaultColDef': {
          'filter': true,
          'sortable': true,
          'resizable': true
      }
  }) }}
  

Gotchas and Tips

Common Pitfalls

1. Abandoned Package:

   • No active maintenance; expect compatibility issues with newer Symfony/Doctrine versions.
   • Consider forking or migrating to alternatives like egeloen/ag-grid-bundle.

2. Configuration Quirks:

   • Bundle may not auto-generate ag_grid.yaml; manually create it if needed.
   • Default template assumes specific JS/CSS includes; verify your base.html.twig includes:

     {{ encore_entry_link_tags('ag-grid') }}
     

3. Doctrine Integration:

   • setDataSource() expects an array or Traversable; ensure your repository method returns compatible data.
   • Lazy-loading collections may cause issues; use ->getResult() or ->toArray().

4. JavaScript Dependencies:

   • Bundle expects AG-Grid JS/CSS to be available via Encore or similar. If using CDN:

     // assets/js/app.js
     window.agGrid = require('ag-grid-community');
     

Debugging Tips

• Check Console Errors: AG-Grid may fail silently if dependencies are missing.
• Verify Grid ID: Ensure create('unique_id') is called with a unique string.
• Inspect Rendered HTML: Use browser dev tools to confirm grid markup is generated.

Extension Points

1. Custom Templates: Extend _grid.html.twig to add features like:

   {# Add a custom toolbar #}
   <div class="ag-grid-custom-toolbar">
       <button onclick="refreshGrid()">Refresh</button>
   </div>
   

2. Event Listeners: Register global listeners in a service:

   # config/services.yaml
   services:
       App\EventListener\AgGridListener:
           tags:
               - { name: kernel.event_listener, event: ag_grid.onGridReady, method: onGridReady }
   

3. API Integration: For server-side row model, extend GridFactory to implement custom data fetching:

   $grid->setServerSide(true)
        ->setServerSideDataprovider(new CustomServerSideProvider());