@burkeholland

Kendoka Says: 

Know Thy jQuery

• grep
• proxy
• on
• deferred
• end
• extend
• ...

Strawpoll

Kendoka Says: 

Know Thy JavaScript

• closures
• promises
• lexical scoping
• currying
• objects
• variable hoisting
• ...

Strawpoll

Advanced Concept 1

window.kendo

 kendo.stringify

 kendo.keys

 kendo.support

 kendo.parseColor

Advanced Concept 2

Classes

 kendo.Class

Advanced Concept 3

Classical Inheritance

 kendo.Class

Advanced Concept 4

Custom Widgets

(function($) {

    // shorten references to variables. this is better for uglification 
    var kendo = window.kendo,
                ui = kendo.ui,
                Widget = ui.Widget

    var MyWidget = Widget.extend({

        init: function(element, options) {

            // base call to widget initialization
            Widget.fn.init.call(this, element, options);

        },

        options: {
             // the name is what it will appear as off the kendo namespace(i.e. kendo.ui.MyWidget).
             // The jQuery plugin would be jQuery.fn.kendoMyWidget.
             name: "MyWidget",
            // other options go here
            ....
        }

    });

    ui.plugin(MyWidget);

})(jQuery);

(function($) {

    var kendo = window.kendo,
        ui = kendo.ui,
        Widget = ui.Widget,
        CHANGE = "change";

    var Repeater = kendo.ui.Widget.extend({
        init: function(element, options) {
            var that = this;
            kendo.ui.Widget.fn.init.call(that, element, options);
            // initialize or create dataSource
            that._dataSource();
        },
        options: {
            name: "Repeater"
        },
        _dataSource: function() {
            var that = this;
            // returns the datasource OR creates one if using array or configuration
            that.dataSource = kendo.data.DataSource.create(that.option.dataSource);

            // bind to the change event to refresh the widget
            that.dataSource.bind(CHANGE, function() {
                that.refresh();
            });
        }
    });

    kendo.ui.plugin(Repeater);

})(jQuery);

Advanced Concept 5

Promises

Advanced Concept 6

Custom Transports

(function() {
  var ds = new kendo.data.DataSource({
    transport: {
        read: '/customers'
    }
  });
}());

(function() {
  var ds = new kendo.data.DataSource({
    transport: {
        read: {
            url: '/customers'
        }
    }
  });
}());

(function() {
  var JSDO = kendo.Class.extend({
    init: function(serviceURI, catalogURI, resourceName) {
      ...,
      this.fill = function(callback) {
        this.onFill = $.Deferred();
        this.jsdo.fill();
        return this.onFill; 
      }
    },

    _afterFill: function() {
      this.onFill.resolve(this.jsdo.eCustomer.getData());
    }
  });

  jsdo.fill().then(function(result) {
    // manually append result to the DOM
  });

});

Advanced Concept 7

Template Functions

80/20

(function() {
  var chartData = [
                { field: "Cat 1", left: -.80, right: 0 },
                { field: "Cat 2", left: -.56, right: 0 },
                { field: "Cat 3", left: 0, right: .69 },
                { field: "Cat 4", left: 0, right: .29 },
                { field: "Cat 5", left: 0, right: .58 }];

  $("#barchart").kendoChart({
    dataSource: {
      data: chartData
    },
    title: {
      text: 'Bar Chart'
    },
    seriesDefaults: {
      type: 'bar',
      stack: true
    },
    series: [{
      data: [0, 0, .69, .29, .85],
      field: 'right'
    }, {
      data: [-.80, -.56, 0, 0, 0],
      field: 'left'
    }],
    categoryAxis: {
      field: 'field',
      labels: {
        template: '#: value #'
      }
    }
  });
}());

Advanced Concept 8

Touch Events

More Resources

• 30 Days To Learn jQuery

• Kendo UI Docs

• Kendo UI Book

• JavaScript Is Sexy

• JavaScript Enlightenment

Thank You!

http://bit.ly/advanced-kendo-ui