Kendo UI ComboBoxGrid Plugin

Kendo UI Custom Plugin that displays a Grid as the dropdown for a ComboBox

by jddevight

HTML

<link rel="stylesheet" href="https://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">
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
<input id="comboBoxGrid" style="width:500px;" />

<div id="console"><b>Console:</b><br/></div>

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

JavaScript

/*
* Create the ExtComboBoxGrid Plugin
*/

(function ($, kendo) {
    var ExtComboBoxGrid = kendo.ui.ComboBox.extend({
        options: {
            name: "ExtComboBoxGrid",
            grid: {
                selectable: "row"
            }
        },

        _grid: null,
        
        init: function (element, options) {
            /// <summary>
            /// Initialize the widget.
            /// </summary>
        
            var that = this;
            
            // Call the base class init.
            kendo.ui.ComboBox.fn.init.call(this, element, options);

            // Replace the dropdownlist with a grid.
            this.list.html("<div class='k-ext-grid'></div>");
            this._grid = this.list.find(".k-ext-grid").kendoGrid(
            	$.extend({}, this.options.grid, { dataSource: options.dataSource })
            ).data("kendoGrid");
            
            // When the combobox dropdown is displayed for the first time, resize the grid.
            this.one("open", function () {
            	setTimeout(function () {
                var height = typeof that.options.grid.height === "undefined"
                  ? 400
                  : that.options.grid.height;

                that._grid.wrapper.height(height);
                that._grid.resize();
              }, 100);
            });
            
            this.popup.close = function () {
            	/// <summary>
              /// Override the popup.close function and call the Popup close if the user isn't
              /// trying to set a filter.
              /// </summary>
              
            	setTimeout(function () {
            	if (that.popup.element.find("form.k-filter-menu.k-popup").is(":visible") === false) {
            		kendo.ui.Popup.fn.close.call(that.popup);
              }
              }, 100);
            }
            
            this._grid.bind("change", function () {
            	/// <summary>
              /// When an item is selected in the grid,...