Ember Kendo Components

components.kendo-calendar.js

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

export default KendoComponent.extend({
  
  widgetType: 'kendoCalendar',
  widgetElement: 'div',
  widgetEvents: [
    {
      "name": "change",
      "action": "onChange",
    	"payload": "value"
    }
  ]
  
});

components.kendo-colorpalette.js

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

export default KendoComponent.extend({
  
  widgetType: 'kendoColorPalette',
  widgetElement: 'div',
  widgetEvents: [
    {
      "name": "change",
      "action": "onChange",
    	"payload": "value"
    }
  ]
  
  
});

components.kendo-colorpicker.js

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

export default KendoComponent.extend({
  
  widgetType: 'kendoColorPicker',
  widgetElement: 'input type="color"',
  widgetEvents: [
    {
      "name": "change",
      "action": "onChange",
    	"payload": "value"
    }
  ]
  
});

components.kendo-combobox.js

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

export default KendoComponent.extend({
  
  widgetType: 'kendoComboBox',
  widgetElement: 'input',
  widgetEvents: [
    {
      "name": "change",
      "action": "onChange",
    	"payload": "value"
    }
  ]
  
});

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') );
  },
  
  didInsertElement: function () {

    this._super(...arguments);
    
    // add widget to dom
    // note - telerik recommends a fresh element on redraw
    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 events
		this.get('widgetEvents').forEach( ({ name, action, payload, debounce }) =>{

      if(debounce === undefined) {
      
        $('#' + this.get('widgetId')).data(this.get('widgetType')).bind( name, (element) => {
          Ember.run( () => {
           this.get(action)(element.sender[payload]());
          });
        });

      } else {

        $('#' + this.get('widgetId')).data(this.get('widgetType')).bind( name, (element) => {
          Ember.run.debounce( () => {
            console.log('debounce fired');
           this.get(action)(element.sender[payload]());
          });
        }, debounce);

      
      }
        
    });
        
	 },
  
  // 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',
  widgetEvents: [
    {
      "name": "change",
      "action": "onChange",
    	"payload": "value"
    }
  ]
  
});

components.kendo-datetimepicker.js

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

export default KendoComponent.extend({
  
  widgetType: 'kendoDateTimePicker',
  widgetElement: 'input',
  widgetEvents: [
    {
      "name": "change",
      "action": "onChange",
    	"payload": "value"
    }
  ]
  
});

components.kendo-dropdownlist.js

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

export default KendoComponent.extend({
  
  widgetType: 'kendoDropDownList',
  widgetElement: 'select',
  widgetEvents: [
    {
      "name": "change",
      "action": "onChange",
    	"payload": "value"
    }
  ]
  
});

components.kendo-editor.js

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

export default KendoComponent.extend({
  
  widgetType: 'kendoEditor',
  widgetElement: 'textarea',
  widgetEvents: [
    {
      "name": "change",
      "action": "onChange",
    	"payload": "value"
    }
  ]
  
});

components.kendo-maskedtextbox.js

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

export default KendoComponent.extend({
  
  widgetType: 'kendoMaskedTextBox',
  widgetElement: 'input',
  widgetEvents: [
    {
      "name": "change",
      "action": "onChange",
    	"payload": "value"
    }
  ]
  
});

components.kendo-mediaplayer.js

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

export default KendoComponent.extend({
  
  widgetType: 'kendoMediaPlayer',
  widgetElement: 'div',
  widgetEvents: [
    {
      "name": "end",
      "action": "onEnd",
    	"payload": "value"
    }
  ]
  
});

components.kendo-numerictextbox.js

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

export default KendoComponent.extend({
  
  widgetType: 'kendoNumericTextBox',
  widgetElement: 'input',
  widgetEvents: [
    {
      "name": "spin",
      "action": "onChange",
    	"payload": "value",
      "debounce": "1000"
    }
  ]
  
});

components.kendo-timepicker.js

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

export default KendoComponent.extend({
  
  widgetType: 'kendoTimePicker',
  widgetElement: 'input',
  widgetEvents: [
    {
      "name": "change",
      "action": "onChange",
    	"payload": "value"
    }
  ]
  
});

components.kendo-treeview.js

import Ember from 'ember';

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

controllers.application.js

import Ember from 'ember';

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

controllers.demos.datetime.calendar.js

import Ember from 'ember';

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

controllers.demos.datetime.datepicker.js

import Ember from 'ember';

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

controllers.demos.datetime.datetimepicker.js

import Ember from 'ember';

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

controllers.demos.datetime.timepicker.js

import Ember from 'ember';

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

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.editor.js

import Ember from 'ember';

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

controllers.demos.editors.maskedtextbox.js

import Ember from 'ember';

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

controllers.demos.editors.numerictextbox.js

import Ember from 'ember';

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

controllers.demos.other.mediaplayer.js

import Ember from 'ember';

export default Ember.Controller.extend({
  
  myValue: null,
  options: {	autoPlay: true,
    					media: { title: "David Bowie - Ashes To Ashes", 
                      	source: "https://www.youtube.com/watch?v=CMThz7eQ6K0" }
           },
  
  actions: {
    updateValue: function(value) {
      this.set('myValue', value);
    }
  }
  
});

controllers.demos.other.treeview.js

import Ember from 'ember';

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

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('colorpicker');
      this.route('colorpalette');
      this.route('combobox');
      this.route('numerictextbox');
      this.route('maskedtextbox');
      this.route('editor');
    });
    this.route('datetime', function() {
      this.route('datepicker');
      this.route('datetimepicker');
      this.route('timepicker');
      this.route('calendar');
    });
    this.route('other', function() {
      this.route('mediaplayer');
      this.route('treeview');
    });
  });
});

export default Router;

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.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>
          <li>{{#link-to 'demos.editors.numerictextbox'}}NumericTextBox{{/link-to}}</li>
          <li>{{#link-to 'demos.editors.maskedtextbox'}}MaskedTextBox{{/link-to}}</li>
          <li>{{#link-to 'demos.editors.editor'}}Editor{{/link-to}}</li>
        </ul>
      </li>

      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Date & Time
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li>{{#link-to 'demos.datetime.datepicker'}}DatePicker{{/link-to}}</li>
          <li>{{#link-to 'demos.datetime.timepicker'}}TimePicker{{/link-to}}</li>
          <li>{{#link-to 'demos.datetime.datetimepicker'}}DateTimePicker{{/link-to}}</li>
          <li>{{#link-to 'demos.datetime.calendar'}}Calendar{{/link-to}}</li>
        </ul>
      </li>

      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Other
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li>{{#link-to 'demos.other.mediaplayer'}}MediaPlayer{{/link-to}}</li>
          <li>{{#link-to 'demos.other.treeview'}}TreeView{{/link-to}}</li>
        </ul>
      </li>


    </ul>
  </div>
</nav>
{{outlet}}

templates.demos.datetime.calendar.hbs

<h3>Calendar</h3>
<div class="panel panel-default">
	<div class="panel-heading">Component</div>
  <div class="panel-body">
  	{{kendo-calendar
    	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.datetime.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')
    }}
  </div>
</div>
<div class="panel panel-default">
	<div class="panel-heading">Controller</div>
  <div class="panel-body">
  	{{input value=myValue}}
  </div>
</div>

templates.demos.datetime.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.datetime.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.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.editor.hbs

<h3>Editor</h3>
<div class="panel panel-default">
	<div class="panel-heading">Component</div>
  <div class="panel-body">
  	{{kendo-editor
    	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.maskedtextbox.hbs

<h3>MaskedTextBox</h3>
<div class="panel panel-default">
	<div class="panel-heading">Component</div>
  <div class="panel-body">
  	{{kendo-maskedtextbox
    	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.numerictextbox.hbs

<h3>NumericTextBox</h3>
<div class="panel panel-default">
	<div class="panel-heading">Component</div>
  <div class="panel-body">
  	{{kendo-numerictextbox
    	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.other.mediaplayer.hbs

<h3>MediaPlayer</h3>
<div class="panel panel-default">
	<div class="panel-heading">Component</div>
  <div class="panel-body">
  	{{kendo-mediaplayer
    	onEnd=(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.other.treeview.hbs

<h3>TreeView</h3>
<div class="panel panel-default">
	<div class="panel-heading">Component</div>
  <div class="panel-body">
  	{{kendo-treeview
    	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.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": {}
}