Check documentation for the latest version of dhtmlxSuite Using Connector with Frameworks (version 1.5) DHTMLX Docs

Using Connector with Frameworks (version 1.5)

Starting from version 1.5 dhtmlxConnector can be used with popular PHP frameworks. You can built web applications with your favorite frameworks and still use dhtmlxConnector.

In this article we will give you brief tips referring to such a use-case of dhtmlxConnector. You can get detailed information in the related tutorials:

  1. Using dhtmlxConnector with the CodeIgniter framework;
  2. Using dhtmlxConnector with the Yii framework;
  3. Using dhtmlxConnector with the CakePHP framework.

For example, let's consider creating an app that presents a grid loaded with data from db. The app is built with one of the frameworks and uses dhtmlxConnector to load data in.

Tips common for all frameworks

Model:

Doesn't have any specificity and created as usual.

View:

  • View contains a standard JavaScript code of the component and defines the client side logic;
  • To load data use standard 'loading' methods of the components but as the URL parameter specify the relative path to an action that answers for loading logic. If you use dataProcessor, specify in its constructor this relative path to the action as well;
mygrid = new dhtmlXGridObject('grid_here'); 
...
mygrid.init();                           
mygrid.load("./data"); //refers to the 'data' action 
 
var dp = new dataProcessor("./data"); //refers to the 'data' action as well
dp.init(mygrid);

Controller:

  • Controller defines the server side logic and contains at least 2 actions: one loads the view, the other one loads the data;
  • To handle an event, add a function of the corresponding event name (e.g. to handle the beforeRender event, add public function beforeRender($action){...}) and define the handling logic as usual. The functions will take the same parameters as the ordinary events do;
  • SQL query to database is configured with the help of the configure() method that takes as parameters:
    • $sql - any sql code that will be used as the base for data selection (for the Yii framework the hardcoded value - '-');
    • $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.
  • GridConnector (or any other connector) takes as parameters:
    • the DB connection variable that refers to the model used in the app)
    • the hardcoded value specifying the framework ( "phpCI", "PHPYii" or "PHPCake").
//sample code for the YII framework
<?php
require_once(dirname(FILE)."/../../../dhtmlx/connector/grid_connector.php");
require_once(dirname(FILE)."/../../../dhtmlx/connector/db_phpyii.php");
 
class EventController extends Controller
{
    public function actionIndex(){ $this->render('index');}
    public function actionGrid() { $this->render('grid'); }
 
    public function actionGrid_data()
{
        $grid = new GridConnector(Events::model(), "PHPYii");
        $grid->configure("-", "event_id", "start_date, end_date, event_name");
        $grid->render();
}
 
    public function beforeProcessing($action){
        //validation before saving
        if ($action->get_value("event_name") == ""){
            $action->invalid();// if data isn't validated  - call $action->invalid();
            $action->set_response_attribute("details", "Empty data not allowed");
        }
    } 
}

Framework-specific tips

CodeIgniter

View

  • While working with CodeIgniter you should rename the query status parameter !nativeeditor_status cause the default name of the parameter is blocked by the framework. Renaming must be repeated on the server side.
var dp = new dataProcessor("./data"); //refers to the 'data' action 
dp.action_param = "dhx_editor_status";
dp.init(mygrid);

Controller

  • The required connector file is db_phpci.php (and of course, you should also include the connector files related to the components used in the app, e.g. if you use dhtmlxGrid - you also include grid_connector.php);
  • The query status parameter !nativeeditor_status must be renamed on the server side as well.
require_once("./dhtmlx/connector/grid_connector.php");
require_once("./dhtmlx/connector/db_phpci.php");
DataProcessor::$action_param ="dhx_editor_status";
 
class Grid extends CI_Controller {
    public function index()
    {
        $this->load->view('grid'); //grid's view
    }
    public function data()
    {
        $this->load->database();
 
        $connector = new GridConnector($this->db, "phpCI");
        $connector->configure("events", "event_id", "start_date, end_date, event_name");
        $connector->render();
    }
}

Yii

Controller

  • The required connector file is db_phpyii.php.
<?php 
    require_once(dirname(FILE)."/../../../dhtmlx/connector/grid_connector.php");
    require_once(dirname(FILE)."/../../../dhtmlx/connector/db_phpyii.php");
 
        class EventController extends Controller {
            public function actionIndex() { $this->render('index'); }
            public function actionGrid()  { $this->render('grid');  }
            public function actionGrid_data() 
            {
                $grid = new GridConnector(Events::model(), "PHPYii");
                $grid->configure("-", "event_id", "start_date, end_date, event_name");
                $grid->render();
            }
       }
?>

CakePHP

Controller

  • The required connector file is db_phpcake.php.
<?php 
 require_once("../Vendor/connector/grid_connector.php");
 require_once("../Vendor/connector/db_phpcake.php");
 
  class EventController extends AppController{
    public function grid(){}
    public function index(){}
    public function grid_data()
    {
      $this->autoRender = false;
 
      $connector = new GridConnector($this->Event, "PHPCake");
      $connector->configure("events", "event_id", "start_date, end_date, event_name");
      $connector->render();
    }
  }
?>
Back to top