Check documentation for the latest version of dhtmlxSuite Step 4. Create a Controller DHTMLX Docs

Step 4. Create a Controller

In the controller, we need to implement 4 actions:

  1. One, that loads grid's, scheduler's and gantt's views
  2. One, that loads data to the grid
  3. One, that loads data to the scheduler
  4. One, that loads data to the gantt

To load and process data in the components, we will use Connectors. Let's have a look at the Connectors usage on the example of GridConnector:

$connector = new GridConnector(null, "PHPcake");
$connector->configure(TableRegistry::get($modelName),$id,$text,$extra,$relation_id);
$connector->render();

The GridConnector constructor takes 2 parameters:

  • $null - null is passed, as a model, not a database is used;
  • "PHPCake" - the module for working with PHP, the hardcoded value.

The configure method configures the GridConnector model object without rendering data and takes 5 parameters:

  • TableRegistry::get($modelName) - the method that returns a model;
  • $id - the name of the id field;
  • $text - a comma separated list of rendered data fields;
  • $extra - (optional) a comma separated list of extra fields;
  • $relation_id - (optional) used for building hierarchy in case of Tree and TreeGrid.
To configure the Controller object:
  1. Create 3 files in the "Controller" folder and name them "GanttController.php", "GridController.php" and "SchedulerController.php ".

  2. Open the "GridController.php " file and:

    • specify the namespace for controllers
    • include the GridConnector class
    • include the method used for creating the model - TableRegistry()
    • add the class for working with time

    "Controller/GridController.php" file

    <?php
    namespace App\Controller;
    use Dhtmlx\Connector\GridConnector;
    use Cake\ORM\TableRegistry;
    use Cake\I18n\Time;

  3. Open the "GridController.php " file and create the controller class "GridController " with the action answering for displaying the component:

    "Controller/GridController.php" file

    <?php 
    class GridController extends AppController {
     
        public function display() {
            $this->render("grid");
        }
    }

    In the "GanttController.php" and "SchedulerController.php" files create the controller classes "GanttController" and "SchedulerController", respectively, the same as you created the "GridController" class. Then add the corresponding actions for displaying gantt and scheduler.

  4. Open the "GridController.php" and add an action that will load data to the grid. For building the grid structure we'll use the 'SchedulerEvent' model:

    "Controller/GridController.php" file

    class GridController extends AppController {
     
        public function display() {
            $this->render("grid");
        }
     
        public function data() {                                                                // the method is used to render dates in the right format                           Time::setToStringFormat('YYYY-MM-dd HH:mm:ss');                                     $connector = new GridConnector(null, "PHPCake");                                    $connector->configure(TableRegistry::get('SchedulerEvent'), "event_id",                 "start_date, end_date, event_name");                                            $connector->render();                                                           }                                                                                                                                                                               
    }

  5. Open the "SchedulerController.php " and add an action that will load data to the scheduler. To create the scheduler sctructure, we'll use the 'SchedulerEvent' model:

    "Controller/SchedulerController.php" file

    class SchedulerControllerController extends AppController {
     
        public function display() {
            $this->render("scheduler");
        }
     
        public function data() {                                                                // the method is used to render dates in the right format                           Time::setToStringFormat('YYYY-MM-dd HH:mm:ss');                                     $connector = new SchedulerConnector(null, "PHPCake");                               $connector->configure(TableRegistry::get('SchedulerEvent'), "event_id",                 "start_date, end_date, event_name");                                            $connector->render();                                                           }                                                                                                               
    }

  6. Create an action that will load data to the gantt. To create the Gantt's structure we'll need two models - 'GanttLink' and 'GanttTask':

    "Controller/GanttController.php" file

    class GanttController extends AppController {
     
        public function display() {
            $this->render("gantt");
        }
     
        public function data() {                                                            // the method is used to render dates in the right format                       Time::setToStringFormat('YYYY-MM-dd HH:mm:ss');                                 $connector = new GanttConnector(null, "PHPCake");                               $connector->render_links(TableRegistry::get('GanttLink'), "id",                     "source,target,type");                                                      $connector->render_table(TableRegistry::get('GanttTask'), "id",                     "start_date,duration,text,progress,parent");                            }                                                                            
    }

    There are 2 specific methods used for configuring Gantt Connector:
    1) The render_links method configures connector, retrieves data from a table with links and takes 3 parameters:
    • TableRegistry::get($modelName) - the method that returns a model ('GanttLink');
    • $id - the name of the id field;
    • $links - a list of fields which will be used as data properties of a link.
    2) The render_table method configures connector, retrieves data from a table with tasks and takes 3 parameters:
    • TableRegistry::get($modelName) - the method that returns a model ('GanttTask');
    • $id - the name of the id field;
    • $tasks - a list of fields which will be used as data properties of a task.
Back to top