Ember Kendo Components

components.kendo-colorpalette.js

import Ember from 'ember';
import KendoComponent from './Kendo-Component'

export default KendoComponent.extend({
  
  widgetType: 'kendoColorPalette',
  widgetElement: 'div',
  hasChangeEvent: true
  
});

components.kendo-colorpicker.js

import Ember from 'ember';
import KendoComponent from './Kendo-Component'

export default KendoComponent.extend({
  
  widgetType: 'kendoColorPicker',
  widgetElement: 'input type="color"',
  hasChangeEvent: true
  
});

components.kendo-combobox.js

import Ember from 'ember';
import KendoComponent from './Kendo-Component'

export default KendoComponent.extend({
  
  widgetType: 'kendoComboBox',
  widgetElement: 'input',
  hasChangeEvent: true
  
});

components.Kendo-Component.js

import Ember from 'ember';

export default Ember.Component.extend({

  classNames: ['k-content'],
  style: null,
  options: null,
  widgetType: null,
  widgetId: null,
 
  init: function () {
    this._super(...arguments);
    this.set( 'widgetId', this.get('elementId') + '-' + this.get('widgetType') );
  },
  
  updateComponent() {
    const value = this.get('value');
    $('#' + this.get('widgetId')).kendoDatePicker({value: value})
  },
  
  didUpdateAttrs() {
    this._super(...arguments);
    this.updateComponent();
  },
  
  didInsertElement: function () {

    this._super(...arguments);
    // add widget to dom
    let element = '<' + this.get('widgetElement');
    element += ' id="' + this.get('widgetId') + '">';
    element += '</' + this.get('widgetElement') + '>';
    
    $('#' + this.get('elementId')).append( element );
    
    // initialize widget 
    //this is done by calling a function equal to the widget's type
    // e.g. jQuery('#ember422-kendoDatePicker).kendoDatePicker(options);
        
    $('#' + this.get('widgetId'))[this.get('widgetType')](this.get('options'));
    
    // bind value to change event
    if(this.get('hasChangeEvent')) {
      
      $('#' + this.get('widgetId')).data(this.get('widgetType')).bind('change', (element) => {
        this.get('onChange')(element.sender.value());
      });
      
    }
    
    this.updateComponent();
	 },
  
  // clean up to prevent memory leaks
  willDestroyElement: function () {
    
    this._super(...arguments);
    
    // call kendo destroy method to clean up bindings, etc.
    $('#' + this.get('widgetId'))['destroy'];
    
    // remove dom element (as recommended by telerik)
    $('#' + this.get('elementId')).children().remove();
    
  }

});

components.kendo-datepicker.js

import Ember from 'ember';
import KendoComponent from './Kendo-Component'

export default KendoComponent.extend({
  
  widgetType: 'kendoDatePicker',
  widgetElement: 'input',
  hasChangeEvent: true
  
});

components.kendo-datetimepicker.js

import Ember from 'ember';
import KendoComponent from './Kendo-Component'

export default KendoComponent.extend({
  
  widgetType: 'kendoDateTimePicker',
  widgetElement: 'input',
  hasChangeEvent: true
  
});

components.kendo-timepicker.js

import Ember from 'ember';
import KendoComponent from './Kendo-Component'

export default KendoComponent.extend({
  
  widgetType: 'kendoTimePicker',
  widgetElement: 'input',
  hasChangeEvent: true
  
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

controllers.demos.editors.colorpalette.js

import Ember from 'ember';

export default Ember.Controller.extend({
  
  myValue: null,
  
  actions: {
    updateValue: function(value) {
      this.set('myValue', value);
    }
  }
  
});

controllers.demos.editors.colorpicker.js

import Ember from 'ember';

export default Ember.Controller.extend({
  
  myValue: null,
  
  actions: {
    updateValue: function(value) {
      this.set('myValue', value);
    }
  }
  
});

controllers.demos.editors.combobox.js

import Ember from 'ember';

export default Ember.Controller.extend({
  
  myValue: null,
  options: {
    				dataSource: {
              data: ["One", "Two", "Three"]
            },
    				index: 0
           },
  
  actions: {
    updateValue: function(value) {
      this.set('myValue', value);
    }
  }
  
});

controllers.demos.editors.datepicker.js

import Ember from 'ember';

export default Ember.Controller.extend({
  
  myValue: "2/9/2017",
  
  actions: {
    updateValue: function(value) {
      this.set('myValue', value);
    }
  }
  
});

controllers.demos.editors.datetimepicker.js

import Ember from 'ember';

export default Ember.Controller.extend({
  
  myValue: null,
  
  actions: {
    updateValue: function(value) {
      this.set('myValue', value);
    }
  }
  
});

controllers.demos.editors.timepicker.js

import Ember from 'ember';

export default Ember.Controller.extend({
  
  myValue: null,
  
  actions: {
    updateValue: function(value) {
      this.set('myValue', value);
    }
  }
  
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('demos', function() {
    this.route('editors', function() {
      this.route('datepicker');
      this.route('datetimepicker');
      this.route('timepicker');
      this.route('colorpicker');
      this.route('colorpalette');
      this.route('combobox');
    });
  });
});

export default Router;

routes.demos.datepicker.js

import Ember from 'ember';

export default Ember.Route.extend({
});

routes.demos.datetimepicker.js

import Ember from 'ember';

export default Ember.Route.extend({
});

routes.demos.editors.colorpalette.js

import Ember from 'ember';

export default Ember.Route.extend({
});

routes.demos.editors.combobox.js

import Ember from 'ember';

export default Ember.Route.extend({
});

routes.timepicker.js

import Ember from 'ember';

export default Ember.Route.extend({
});

templates.application.hbs

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Kendo Components</a>
    </div>
    <ul class="nav navbar-nav">
      <li>{{#link-to 'index'}}Home{{/link-to}}</li>
      
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Editors
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li>{{#link-to 'demos.editors.datepicker'}}DatePicker{{/link-to}}</li>
          <li>{{#link-to 'demos.editors.timepicker'}}TimePicker{{/link-to}}</li>
          <li>{{#link-to 'demos.editors.datetimepicker'}}DateTimePicker{{/link-to}}</li>
          <li>{{#link-to 'demos.editors.colorpicker'}}ColorPicker{{/link-to}}</li>
          <li>{{#link-to 'demos.editors.colorpalette'}}ColorPalette{{/link-to}}</li>
          <li>{{#link-to 'demos.editors.combobox'}}ComboBox{{/link-to}}</li>
        </ul>
      </li>
      
    </ul>
  </div>
</nav>
{{outlet}}

templates.demos.editors.colorpalette.hbs

<h3>ColorPalette</h3>
<div class="panel panel-default">
	<div class="panel-heading">Component</div>
  <div class="panel-body">
  	{{kendo-colorpalette
    	onChange=(action 'updateValue')
    }}
  </div>
</div>
<div class="panel panel-default">
	<div class="panel-heading">Controller</div>
  <div class="panel-body">
  	{{input value=myValue}}
  </div>
</div>

templates.demos.editors.colorpicker.hbs

<h3>ColorPicker</h3>
<div class="panel panel-default">
	<div class="panel-heading">Component</div>
  <div class="panel-body">
  	{{kendo-colorpicker
    	onChange=(action 'updateValue')
    }}
  </div>
</div>
<div class="panel panel-default">
	<div class="panel-heading">Controller</div>
  <div class="panel-body">
  	{{input value=myValue}}
  </div>
</div>

templates.demos.editors.combobox.hbs

<h3>ComboBox</h3>
<div class="panel panel-default">
	<div class="panel-heading">Component</div>
  <div class="panel-body">
  	{{kendo-combobox
    	onChange=(action 'updateValue')
      options=options
    }}
  </div>
</div>
<div class="panel panel-default">
	<div class="panel-heading">Controller</div>
  <div class="panel-body">
  	{{input value=myValue}}
  </div>
</div>

templates.demos.editors.datepicker.hbs

<h3>DatePicker</h3>
<div class="panel panel-default">
	<div class="panel-heading">Component</div>
  <div class="panel-body">
  	{{kendo-datepicker
    	onChange=(action 'updateValue')
      value=myValue
    }}
    
  </div>
</div>
<div class="panel panel-default">
	<div class="panel-heading">Controller</div>
  <div class="panel-body">
  	{{input value=myValue}}
  </div>
</div>

templates.demos.editors.datetimepicker.hbs

<h3>DateTimePicker</h3>
<div class="panel panel-default">
	<div class="panel-heading">Component</div>
  <div class="panel-body">
  	{{kendo-datetimepicker
    	onChange=(action 'updateValue')
    }}
  </div>
</div>
<div class="panel panel-default">
	<div class="panel-heading">Controller</div>
  <div class="panel-body">
  	{{input value=myValue}}
  </div>
</div>

templates.demos.editors.timepicker.hbs

<h3>TimePicker</h3>
<div class="panel panel-default">
	<div class="panel-heading">Component</div>
  <div class="panel-body">
  	{{kendo-timepicker
    	onChange=(action 'updateValue')
    }}
  </div>
</div>
<div class="panel panel-default">
	<div class="panel-heading">Controller</div>
  <div class="panel-body">
  	{{input value=myValue}}
  </div>
</div>

templates.index.hbs

This is the demo Twiddle for the Kendo UI Components for EmberJS.
<br><br>
Please select a Widget from the menu above to proceed.

twiddle.json

{
  "version": "0.11.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js",
    "ember": "2.10.2",
    "ember-data": "2.11.0",
    "ember-template-compiler": "2.10.2",
    "ember-testing": "2.10.2",
    "kendo": "https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js",
    "kendo-css": "https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css",
    "kendo-theme": "https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.min.css",
    "bootstrap": "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css",
    "bootstrap-js": "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
  },
  "addons": {}
}