Kendo UI Grid Plugin with Show/Hide Columns Pick List
HTML
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.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>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css">
<div id="grid"></div>
<div style="margin-top:20px;">
<span>Learn about this fiddle at:</span>
<a href="http://jsdev.wikidot.com/blog:3" target="_top">Add a Show/Hide Columns Pick List to Your Kendo Grid Toolbar</a>
</div>
JavaScript
/*
* ExtGrid Plugin
*/
/// <summary>Kendo UI Grid Plugin.</summary>
/// <description>Demonstrate a Kendo UI Grid Plugin with a Show/Hide Columns Pick List.</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 ExtGrid = kendo.ui.Grid.extend({
options: {
toolbarColumnMenu: true,
name: "ExtGrid"
},
init: function (element, options) {
/// <summary>
/// Initialize the widget.
/// </summary>
if (options.toolbarColumnMenu === true && typeof options.toolbar === "undefined") {
options.toolbar = [];
}
// Call the base class init.
kendo.ui.Grid.fn.init.call(this, element, options);
this._initToolbarColumnMenu();
},
_initToolbarColumnMenu: function () {
/// <summary>
/// Determine whether the column menu should be displayed, and if so, display it.
/// </summary>
// The toolbar column menu should be displayed.
if (this.options.toolbarColumnMenu === true && this.element.find(".k-ext-grid-columnmenu").length === 0) {
// Create the column menu items.
var $menu = $("<ul></ul>");
// Loop over all the columns and add them to the column menu.
for (var idx = 0; idx < this.columns.length; idx++) {
var column = this.columns[idx];
// A column must have a title to be added.
if ($.trim(column.title).length > 0) {
// Add columns to the column menu.
$menu.append(kendo.format("<li><input type='checkbox' data-index='{0}' data-field='{1}' data-title='{2}' {3}>{4}</li>",
idx, column.field, column.title, column.hidden ? "" : "checked", column.title));
}
}
// Create a "Columns" menu for the toolbar.
...