Check documentation for the latest version of dhtmlxSuite Step 6. Create a Grid <br> (using Model, View, Controller objects) DHTMLX Docs

Step 6. Create a Grid
(using Model, View, Controller objects)

The technique stated on Step 4 and Step 5 works well if data is loaded from a single DB table. But if data requires more difficult loading and saving, it's better to create a separate model class.

As an example, let's create a model object for the grid we built on Step 4.

We will divide the step into 3 substeps:

Step 6.1. Configuring the Model object

In our model we will specify functions for:

  • Getting an array of data items;
  • Getting an individual properties of a data item;
  • Processing Insert/Update/Delete operations;
  • Validating data before saving.
To configure the Model object:
  1. In the "models " folder create a new file and name it event_model.php
  2. Open the "event_model.php " file and add the following code there:

    "models/event_model.php" file

    <?php
     
    class Event_model extends CI_Model {
        var $event_name;
        var $start_date;
        var $end_date;
     
        function __construct()
        {
            parent::__construct();
        }
        //returns an array with data
        function get($request){
            $query = $this->db->get("events");
            return $query->result_array();
        }
        //the function takes values of the row data
        protected function get_values($action){
            $this->event_name   = $action->get_value("event_name");
            $this->start_date   = $action->get_value("start_date");
            $this->end_date     = $action->get_value("end_date");
        }
        //inserts a new event
        function insert($action){
            $this->get_values($action);
     
            if ($this->validate($action)){ 
               $this->db->insert("events", $this);
               $action->success($this->db->insert_id());
           }
        }
        //updates an event
        function update($action){
            $this->get_values($action);
     
            if ($this->validate($action)){ 
                $this->db->update(
                    "events", 
                    $this, 
                    array("event_id" => $action->get_id())
                );
                $action->success();
            }
        }
        // validates an event before saving
        function validate($action){
            if ($this->event_name == ""){
                $action->invalid();
                $action->set_response_attribute(
                    "details",
                    "Empty text is not allowed"
                );
                return false;
            }
            return true;
        }
        //deletes an event
        function delete($action){
            $this->db->delete("events", array("event_id" => $action->get_id()));
            $action->success();
        } 
    }
    ?>

Step 6.2. Configuring the View object

We won't create a new view and will use the view file specified on Step 4.

Step 6.3. Configuring the Controller object

And let's create a new controller that will process our model.

The difference between the current controler and the controller file of the Step 4 lies is 2 commands:

$this->load->model("event_model");// loads the model
$connector->useModel($this->event_model);//applies the model

The commands allows us to load our model and apply it in the project.

To configure the Controller object:
  1. In the "controllers " folder create a new file and name it "gridmodel.php "
  2. Open the "gridmodel.php " file and add the following code there:

    "controllers/gridmodel.php" file

    require_once("./dhtmlx/connector/grid_connector.php");
    require_once("./dhtmlx/connector/db_phpci.php");
    DataProcessor::$action_param ="dhx_editor_status";
     
    class GridModel extends CI_Controller {
        public function index()
        {
            //grid's view
            $this->load->view('grid'); 
        }
        public function data()
        {
            //data feed
            $this->load->database();
            $this->load->model("event_model");
     
            $connector = new GridConnector($this->db, "PHPCI");
            $connector->configure(
                "events", 
                "event_id", 
                "start_date, end_date, event_name"
            );
            $connector->useModel($this->event_model);
            $connector->render();
        }
    }
That's all. We believe you have enjoyed the tutorial and seen how easy you could integrate CodeIgniter with dhtmlxConnector. The final application logic was not the goal of this article, but interface built here is a good start for creating full functional web application.

Follow our other tutorials to be a true DHTMLX expert.
Back to top