DHTMLX Integration with Yii PHP Framework

The DHTMLX component library offers a pure JavaScript/CSS solution for building web interfaces. The advantage of developing with the client-side library is that you can use it with your favorite server-side technology. In this tutorial, we will explain how to use the DHTMLX UI components with one of the most popular PHP frameworks, Yii framework.

The tutorial describes how to integrate dhtmlxGrid and dhtmlxScheduler in a Yii application. You’ll learn how to bind the grid and the scheduler to the database and update data on the server when user makes changes on the client side.

The integration with Yii will be done through the dhtmlxConnector layer, which handles client-server data communication. This tutorial gives step-by-step instructions but it is assumed that you have the basic knowledge of the Yii framework and the DHTMLX library.

In the root folder of your app, create a sub-folder with the name ‘DHTMLX’. Add the required JS/CSS files of dhtmlxConnector, dhtmlxGrid, dhtmlxScheduler, and dataProcessor (included in both dhtmlxGrid and dhtmlxScheduler packages) to the ‘DHTMLX’ folder, or simply copy the folder with the required files from the final demo package (find the download link above).

Thus, you have two folders in the root folder of your demo app: one with Yii files, and the other one with DHTMLX files:

In our demo Yii app, we use the events database. You can create a local copy of this database by importing the SQL dump file events.sql (find it in the root folder of the final package) or you can just use any available database. Note that if you use your own database, you will need to adapt the code examples by yourself.

Creating Model Class

To connect our web application to the database, we need to create a model class. You can make it by using the built-in web-based code generator Gii. For more details of generating a model class, read Creating Your First Yii Application article in the Yii documentation.

The newly created Events model class allows us to access the backend database ‘events’ table, which stores our data for the grid and the scheduler.

Grid Integration

Creating Controller Object

In the ‘controllers’ folder (which is automatically created by Yii framework), create a new file and name it EventController.php. Place the following code within this file:

• Add the files required for working with dhtmlxConnector and create a root controller class EventController with the primary action:

class EventController extends Controller {publicfunction actionIndex(){$this->render('index');}// here you should place all your functions}?>

Note that we’ve also added the connector files for the scheduler, which will be required for the scheduler integration described below. If you don’t plan to use the scheduler in your app, just do not include the file ‘scheduler_connector.php’.

• Create an action that will load a view displaying the grid:

publicfunction actionGrid(){$this->render('grid');//loads the 'grid' view that we will create later}

GridConnector takes as parameters a DB connection variable and a database type. Since we’re working with Yii, these parameters have the following values:

Events::model()

– refers to the model Events used in the app,

"PHPYii"

– a constant value.

The configure method generates an SQL query and takes as parameters:

‘-‘ – a 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

You can see the resulting EventController.php file in the demo package. This file processes all the operations with data (add, edit, remove records) and saves the changes made by user to the database on the server.

Creating View Object

In the ‘views’ folder create a new file and name it grid.php. In the view file, add the following code:

<scripttype="text/javascript"charset="utf-8">
mygrid = new dhtmlXGridObject('grid_here');
mygrid.setHeader("Start date,End date,Text");
mygrid.init();
mygrid.loadXML("./grid_data"); //refers to the 'Grid_data' action we created in the previous step

var dp = new dataProcessor("./grid_data"); //refers to the 'Grid_data' action as well
dp.init(mygrid);

</script></body>

It’s a standard code that initializes dhtmlxGrid on a page. If you have already worked with the grid component before, it won’t be difficult for you to understand the code. If anything is not clear, refer to the grid documentation.

When the grid.php file is ready, run webhost/cdemo/event/grid. The page should now display the grid filled with data from the server-side database. The grid is editable and all the changes you make in grid are saved to the database.

Scheduler Integration

Creating Controller Object

We have already created EventController.php file (see the instructions for the grid integration above). Now we just need to add the following code to display the scheduler on a page and fill it with content from the database table:

• Create an action that will load a view displaying the scheduler:

publicfunction actionScheduler(){$this->render('scheduler');//loads the 'scheduler' view that we will create later}

Again, we used a standard code that initializes the scheduler component. For a deeper learning of dhtmlxScheduler initialization, read the documentation.

Now, if you run webhost/cdemo/event/scheduler, you should see the scheduler that loads data from the ‘events’ table in the database. The same as with the grid – all changes made in the scheduler are saved to the database. Users can create, modify or delete events, and the data in the database will be updated automatically.

That’s all. We now have a Yii demo application created with dhtmlxGrid, dhtmlxScheduler, and the dhtmlxConnector library. We have integrated editable data grid and scheduler that can update the database table when user make changes on the client side. The application logic was not the goal of the tutorial but we hope that this example will inspire you to create fully functional web apps with DHTMLX and Yii.

Comments

This is what I have been searching for on the internet to get something that is easy to integrate in YII structure. I want to developer a school management application and this tutorial has just nailed it. I know we have other js framework but they do not plug in YII as this one. Am going to start developing my app now using this library.
Thanks again.

2. This demo only seems to work if Yii is set to use URLs in path-format
(eg. localhost/myappname/event/grid) but doesn’t work if using the default Yii URLs
(eg. localhost/myappname/index.php?r=event/grid).

I have installed DHTML PRO (eval) successfully and I have been able to run the Yii framework connection example (cdemo).
I have then created a grid within my applicaton in Yii and again this works fine.
I have modified the grid to test checkboxes, calendars, date and number formatting and all works fine.

I am now trying to use combo box inside a column but as soon as I change the “ed” editor type to co or coro or combo I have an error, can anyone please help.

Ruggero, please submit a ticket to the online support system (find the login instructions in the email with the download link to the evaluation version). Support team will help you to solve this issue. You can also use forum for your technical questions (registration is free):http://forum.dhtmlx.com

Thank you for really great lib!
Scheduler connector work fine but when I trying use units or matrix view I can’t set sections.
Seems “typeid(value),name(label)” syntax work only for pure mysql but phpyii.
May be there is a workaround of this issue?
Thanks.

Great post indeed and thanks for all the information, it was very helpful i really like that you are providing information on PHP and MYSQL with basic JAVASCRIPT, being enrolled here. I was looking for such information online to assist me on php and mysql and your information helped me a lot. Thanks.

Thanks for the great library and documentations.
I tried to use the demo application as follows.
01. Download and extracted to htdocs directory.
02. Set database configurations and import the ‘Events.sql’ script

The application loaded without any problem. Then I clicked on the link ‘Grid’. It redirects me to localhost.

Then i accessed those pages by manually typing the address. But unfortunately the grid or scheduler not loaded.

I checked the results with firebug and it says following errors respectively.

Thank you for the great tutorial!
I have a question:
I tried to follow the mvc pattern as you show in this tutorial using a dhtmlxLayout to display the main application interface, but I cannot figure out what are the steps to work respecting the mvc pattern with a layout. The only way I can guess is to declare all the interface logic in the main index files. Do you know a more “mvc way” to do it? Can you provide a tutorial for yii and dhtmlxlayout in the future?
Thank you and best regards

Thanks Ivan,
I found a problem with dataprocessor, I had troubles to insert and update rows that have non a numerical “ID” containing underscores.
I solved it modfying the code of “dataprocessor.php”.
I think it may be a problem for more than a few users. I write it here because I’m not a licensed customer of dhtmlx and cannot submit support/bug tickets.

My Events model is relational which means that there are entries in related tables that are required for my scheduler.
I’ve just spend the whole evening creating a actionScheduler_data_wrapper() in EventController.php that modifies the data before it passes it to actionScheduler_data().

I’ve now got the event_name in a different (and linked) table. It’s a massive hack and I had to rewrite the GET functionality to make it work and remove some of the “die”‘s from your library.

When working with YII, you are providing the model object to the connector. You can define your own implementation for findAll method on the model, that will hide all inner complexity. In such case there will be no need for changes in connector’s code.