MVVM KendoUI custom Widget - Part 1 - Options

A simple custom KendoUI widget with options.

HTML

<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
This example shows a simpl KendoUI MVVM aware widget creation.  <br /><br />
<div id="modelBound">
Input Markup: <input data-role="simplewidget" data-someoption="myoption" /><br />
Input JS: <input id="jswidget" />
</div>

JavaScript

(function ($) {
    var kendo = window.kendo,
        ui = kendo.ui,
        Widget = ui.Widget;

    var SimpleWidget = Widget.extend({
        // Kendo calls this method when a new widget is created
        init: function (element, options) {
            var that = this;
            Widget.fn.init.call(this, element, options);
            //use an option value to set the value property of our element            
            //$(that.element).val(options.someoption);
            //Options are already available in our widget's options property
            $(that.element).val(that.options.someoption);
        },
        //List of all options supported and default values
        options: {
            name: "SimpleWidget",
            value: null,
            width: "650",
            someoption: ""
        }    
    });
    ui.plugin(SimpleWidget);
})(jQuery);

var viewModel = kendo.observable({
    simpleValue : 'StartValue'
});

kendo.bind( $("#modelBound"), viewModel);
//Create a widget using javascript declaration
$('#jswidget').kendoSimpleWidget({ someoption: 'jsOption' });