Multiple grids

In order to have multiple grids into one page, you will need to consider two things:

The first thing is that the output is nothing more than the initial data and the url path. All the rest you can implement it at the specified URL
The JavaScript and the CSS is common. This means that you will need to load the JavaScript and the CSS only once

With those two in mind, we can give you a simple example of how the files will look like with a simple native php example:

<?php
// both.php
include("vendor/autoload.php");

use GroceryCrud\Core\GroceryCrud;

$database = include('database.php');
$config = include('config.php');

$crud = new GroceryCrud($config, $database);

$crud->setApiUrlPath('/films.php');

$output = $crud->render();

$css_files = $output->css_files;
$js_files = $output->js_files;

$output = $output->output;

$crud2 = new GroceryCrud($config, $database);
$crud2->setApiUrlPath('/customers.php');

$output2 = $crud2->render();

$output .= '<br/>' . $output2->output;

include('view.php');

Let's go and explain line by line what the above code is doing. The code:

include("vendor/autoload.php");

use GroceryCrud\Core\GroceryCrud;

$database = include('database.php');
$config = include('config.php');

$crud = new GroceryCrud($config, $database);

Is initialising our first CRUD as we already know.

The code:

$crud->setApiUrlPath('/films.php');

Is simply telling to Grocery CRUD that it will not use the default path (that in our case is /both.php) but instead it will use the path: /films.php

Then the below lines:

$output = $crud->render();

$css_files = $output->css_files;
$js_files = $output->js_files;

$output = $output->output;

will collect the output, the CSS files and the JS to be rendered. As we are always doing.

The below code:

$crud2 = new GroceryCrud($config, $database);
$crud2->setApiUrlPath('/customers.php');

$output2 = $crud2->render();

$output .= '<br/>' . $output2->output;

Is initialising a second crud and at the render we are just append it to the other CRUD. Of course the $output2->output can be used for your own purposes in a completely different way. We are using a simply <br/> for the simplicity of the example. As you can see the JavaScript and the CSS files are not getting collected again as they are common with the first CRUD. And then lastly the code:

include('view.php');

is simply rendering the JS, CSS and output files.

Where view.php is the below code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php
    foreach($css_files as $file): ?>
        <link type="text/css" rel="stylesheet" href="<?php echo $file; ?>" />
    <?php endforeach; ?>

</head>
<body>
<div style="padding: 20px 10px;">
    <?php echo $output; ?>
</div>
<?php foreach($js_files as $file): ?>
    <script src="<?php echo $file; ?>"></script>
<?php endforeach; ?>
</body>
</html>

films.php :

<?php
// films.php
include("vendor/autoload.php");

use GroceryCrud\Core\GroceryCrud;

$database = include('database.php');
$config = include('config.php');

$crud = new GroceryCrud($config, $database);

$crud->setTable('film');
$crud->setSubject('Film', 'Films');
$crud->setRead();
$crud->setRelationNtoN('actors', 'film_actor', 'actor', 'film_id', 'actor_id', 'fullname');
$crud->setRelationNtoN('categories', 'film_category', 'category', 'film_id', 'category_id', 'name');

$output = $crud->render();

if ($output->isJSONResponse) {
    header('Content-Type: application/json; charset=utf-8');
    echo $output->output;
    exit;
} else {
    throw new \Exception('Wrong data');
}

and customers.php :

<?php
// customers.php
include("vendor/autoload.php");

use GroceryCrud\Core\GroceryCrud;

$database = include('database.php');
$config = include('config.php');

$crud = new GroceryCrud($config, $database);

$crud->setTable('customers');
$crud->setSubject('Customer', 'Customers');
$crud->setRead();

$output = $crud->render();

if ($output->isJSONResponse) {
    header('Content-Type: application/json; charset=utf-8');
    echo $output->output;
    exit;
} else {
    throw new \Exception('Wrong data');
}

All the above example can of course be written with a much smarter and optimised way, especially when you are using multiple grids all the time and you also hate copy-pasting the same code again and again (I do!)

Working Example

So let's have a real example at this page. As you've already have guessed this website is using Codeigniter framework. And hence we have a simpler code to have multiple grids in one page. The code is as follows:

protected function _getGroceryCrudEnterprise() {
    $db = include('path/to/database.php');
    $config = include('path/to/config.php');

    $groceryCrud = new GroceryCrud($config, $db);

    return $groceryCrud;
}

public function demo_multigrid() {
    $crud = $this->_getGroceryCrudEnterprise();

    $crud->setApiUrlPath('/demo_example_films');
    $output = $crud->render();

    $crud2 = $this->_getGroceryCrudEnterprise();

    $crud2->setApiUrlPath('/demo_example_customers');
    $output2 = $crud2->render();

    $output->output .= '<br/>' . $output2->output;

    $this->_example_output($output);
}

public function demo_example_films() {
    $crud = $this->_getGroceryCrudEnterprise();

    $crud->setTable('film');
    $crud->setSubject('Film', 'Films');
    $crud->setRead();
    $crud->setRelationNtoN('actors', 'film_actor', 'actor', 'film_id', 'actor_id', 'fullname');
    $crud->setRelationNtoN('categories', 'film_category', 'category', 'film_id', 'category_id', 'name');

    $output = $crud->render();

    $this->_example_output($output);
}

public function demo_example_customers() {
    $crud = $this->_getGroceryCrudEnterprise();

    $crud->setTable('customers');
    $crud->setSubject('Customer', 'Customers');
    $crud->setRead();

    $output = $crud->render();

    $this->_example_output($output);
}

public function _example_output($output = null) {
   if (isset($output->isJSONResponse) && $output->isJSONResponse) {
      header('Content-Type: application/json; charset=utf-8');
      echo $output->output;
      exit;
    }

   $this->load->view('example.php', $output); 
}

And the result of the above code is the below. Feel free to click page source to see the source of the multigrid to understand better the code example: