Implementation of KendoUI with Yii framework

We needed to use the KendoUI library along with Yii for a client on his project.

Although jQueryUI and KendoUI are built for similar goals but it has major advantages over jQueryUI. For example, KendoUI has more widgets than jQueryUI, supports templates, DataSource, MVVM and specially the mobile device compatibly built-in into it. One might argue that there are a lot of plugins available for jQueryUI that could provide the features of it, but the answer is that it code is more optimized; very efficient thus provides better performance.

Incorporating KendoUI with Yii is tricky. it widgets doesn’t understand the ActiveDataProviders from Yii. So we can’t use this powerful feature from Yii.  We had to write custom SQL or use command builders and then format the data arrays to work with it widgets. KendoUI uses jQuery as its base framework. In order to use this jQuery files need to load in proper order.

Implementation:

In order to solve the issues, we first make sure the proper loading order of this jQuery library files to do so we use Yii’s below mentioned Map property to load jQuery version provided with KendoUI:

 Yii::app()->clientScript->script

Also use Yii’s below mentioned function in specific order under base controllers before Action method:

Yii::app()->clientScript->registerScriptFile()

In order to use it widgets such as grid control, Yii provides bases for creating custom widgets. We extend our widget class form CWidget. In this way, we can also utilize the power of DataProviders from Yii.

Limitations:

In our experience, using KendoUI with Yii requires a lot more work to be performed than one can estimate initially. Overall its a good package though.