Kendo Chart with Filter Example - custom widget

my-widget.js

/* https://jpllosa.blogspot.com/ */

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

    var MyFilter = Widget.extend({
        options: {
            name: 'MyFilter',
            start: 0,
            end: 0,
        },

        events: [ APPLYFILTER ],

        init: function(element, options) {
            var that = this;

            Widget.fn.init.call(that, element, options);
            that._create();
        },

        destroy: function() {
            var that = this;

            Widget.fn.destroy.call(that);
            kendo.destroy(that.element.children());
        },

        _create: function() {
            var that = this;
            that._range = {
                start: that.options.start,
                end: that.options.end,
            };
            var html = 
                  '<div>'
                +   '<span class="k-textbox-container">'
                +     '<input id="start" />'
                +     '<label class="k-label">Start</label>'
                +   '</span>&nbsp;'
                +   '<span class="k-textbox-container">'
                +     '<input id="end" />'
                +     '<label class="k-label">End</label>'
                +   '</span>&nbsp;'
                +   '<span class="k-textbox-container">'
                +     '<button type="button" id="applyFilter"></button>'
                +   '</span>'
                + '</div>';

            that.element.append(html);
            
            that.element.find('#start').kendoNumericTextBox({
                value: that.options.start,
                decimals: 0,
                restrictDecimals: true,
                format: '#',
                change: function(e) {
                    that._range.start = this.value();
                },
            });

            that.element.find('#end').kendoNumericTextBox({
                value: that.options.end,
                decimals: 0,
                restrictDecimals: true,
                format: '#',
                change: function(e) {
                    that._range.end = this.value();
                },
            });

            that.element.find('#applyFilter').kendoButton({
                icon: 'filter',
                click: function(e) {
                    that.trigger(APPLYFILTER, that._range);
                },
            });
        },
    });

    ui.plugin(MyFilter);

})(jQuery);