KendoUI MVVM Column Sort Header

by cn172

HTML

<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css">
<div id="modelBound">
<table>
<thead>
 <th data-role="mcolumnheader" data-field="text1" data-title="Text Value" data-bind="value: sortValue, events:{change: onSortChanged}" ></th>
 <th data-role="mcolumnheader" data-field="text2" data-title="Text Value 2" data-bind="value: sortValue, events:{change: onSortChanged}" ></th>
 <th data-role="mcolumnheader" data-field="text3" data-title="Text Value 3" data-bind="value: sortValue, events:{change: onSortChanged}" ></th>
</thead>
</table>
</div>
<div id="eventsData" />

JavaScript

(function ($) {
    var kendo = window.kendo,
        ui = kendo.ui,
        Widget = ui.Widget,
        CHANGE = "change",
        CLICK = "click"
        ns = ".kendoMColumnHeader";

    var MColumnHeader = 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);
            that._value = '';
            //Create the DOM elements to build the widget
            that._create();
        },
        //List of all options supported and default values
        options: {
            name: "MColumnHeader",
            width: "150px;",
            field: '',
            title: '',
            sortable: ''
        },
        //Convenience method to set the value of the control externally
        //Useful for event handlers in dependent methods to be able to
        //set the control's value and have it propogate to the MVVM subscribers
        set: function (value) {
            var that = this;
            if (that._old != value) {
                //It is different, update the value
                that._update(value);
                //Capture the new value for future change detection
                that._old = value;
                // trigger the external change event to notify subscribers
            }
            that._value = '';
        },
        //MVVM framework calls 'value' when the viewmodel 'value' binding changes
        value: function(value) {            
            var that = this;
            if (value === undefined) {
                return that._value;
            }
            if (value !== that._old)
            {
                //Is this value for me?
                //Must start with field name explicitly + 1 space
                if (value.indexOf(that.options.field + ' ') == 0) {
                    that._value = value;
                    that._old = that._value;
                }
         ...