You are currently viewing Implementation of KendoUI with Yii framework

Implementation of KendoUI with Yii framework

  • Post published:March 24, 2014

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 KendoUI 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 KendoUI, but the answer is that KendoUI code is more optimized; very efficient thus provides better performance.

Incorporating KendoUI with Yii is tricky. KendoUI 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 KendoUI widgets. KendoUI uses jQuery as its base framework. In order to use KendoUI jQuery files need to load in proper order.

Implementation:

In order to solve the issues, we first make sure the proper loading order of KendoUI 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 KendoUI 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.