Kendo UI Grid and ExtFilterPanel

Implementing a Filter Panel Widget with the Kendo UI Grid

HTML

<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css">
<div id="grid"></div>
<div id="filter"></div>

<div style="margin-top:20px;">
<span>Learn about this fiddle at:</span>
<a href="http://jsdev.wikidot.com/blog:1" target="_top">Add a Filter Panel to Your Kendo Grid</a>
</div>

JavaScript

// SCROLL PAST THE ExtFilterPanel Plugin TO SEE THE INITIALIZATION OF THE Grid AND ExtFilterPanel

/*
 * ExtFilterPanel Plugin
 */

/// <summary>Kendo UI Web Filter Panel Plugin.</summary>
/// <description>Display the filter settings applied to a kendo.data.DataSource.</description>
/// <version>1.0</version>
/// <author>John DeVight</author>
/// <license>
/// Licensed under the MIT License (MIT)
/// You may obtain a copy of the License at
/// http://opensource.org/licenses/mit-license.html
/// </license>
(function ($, kendo) {
    var ExtFilterPanel = kendo.ui.Widget.extend({
        /// <summary>Display the filter settings applied to a kendo.data.DataSource.</summary>

        dataSource: null,

        options: {
            name: "ExtFilterPanel",
            template: "Filter: #= filter #",
            placeholder: "No Filter",
            attributes: {
                "class": "k-block k-header",
                "style": "min-height:2.5em;"
            },
            fieldTitles: [],
            clearButton: {
                show: true,
                text: "Clear Filter"
            }
        },

        init: function (element, options) {
            /// <summary>Initialize the widget.</summary>
            /// <param name="element" type="jQuery Object"></param>
            /// <param name="options" type="JSON Object"></param>

            var that = this;

            // Call the base class init.
            kendo.ui.Widget.fn.init.call(this, element, options);

            for (attr in this.options.attributes) {
                var attrText = this.element.attr(attr);
                this.element.attr(attr, kendo.format("{0} {1}", attrText || "", this.options.attributes[attr]));
            }

            if (typeof this.options.dataSource !== "undefined") {
                this.setDataSource(this.options.dataSource);
            }

            this.element.append("<span class='k-message' style='display:inline-block;margin:0.4em;'></span>");

         ...