Kendo UI with CakePHP 2.x - cakephp

Question

I am developing an appliction in CakePHP 2.x. and want to use Kendo UI. How can I do that and use it in my app? Can anyone tell me if it is possible and if so how?
My Controller:
class ClientDetailsController extends AppController {
var $name = "ClientDetails";
public $helpers = array('js');
public $components = array('RequestHandler');
function index(){
$this->loadModel('User');
$userdata = $this->User->find('all');
$this->set('user',$userdata);
}
}
My View:
<h1> User in Index Pages of the Client Details .... </h1>
<?php
//pr($user);
echo $this->Html->link('Personal Detail',array('controller'=>'ClientDetails','action'=>'add'));
?>
<div id="calendar" ></div>
<div id="info" > </div>
<?php
echo $this->Html->link('Room Details ',array('controller'=>'RoomDetails','action'=>'index'));
?>

Answer 1

I am not familiar with Kendo, however, I have used Knockout.js extensively with CakePHP. If you've used jQuery with CakePHP, the implementation with Kendo should be no different. I took a quick look and they appear to be similar in implementation, so this is what I would do.
Here in the Kendo documentation it says to simply link the necessary files. I don't see how this is any different than jQuery. Once the files are loaded you should be able to use them.
For example, use the following code at the top of your view (but obviously with your paths)
<!-- Common Kendo UI Web CSS -->
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<!-- Default Kendo UI Web theme CSS -->
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<!-- jQuery JavaScript -->
<script src="js/jquery.min.js"></script>
<!-- Kendo UI Web combined JavaScript -->
<script src="js/kendo.web.min.js"></script>
//rest of your code here
Now you can use Kendo however you like. In their documentation they list the datepicker, such as
<input id="datepicker" />
<script>
$(function() {
// Initialize the Kendo DatePicker by calling the kendoDatePicker jQuery plugin
$("#datepicker").kendoDatePicker();
});
</script>
So, if you had a date input, just put put the ID of that input where "#datepicker" is listed in the example above.