UNPKG

@progress/kendo-ui

Version:

This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.

1,401 lines (1,160 loc) 83.1 kB
'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); require('./kendo.popup.js'); require('./kendo.tabstrip.js'); require('./kendo.filtermenu.js'); require('./kendo.menu.js'); require('./kendo.expansionpanel.js'); require('./kendo.html.button.js'); require('./kendo.icons.js'); require('./kendo.core.js'); require('./kendo.licensing.js'); require('@progress/kendo-licensing'); require('./kendo.data.js'); require('./kendo.data.odata.js'); require('./kendo.data.xml.js'); require('./kendo.sortable.js'); require('./kendo.draganddrop.js'); require('./kendo.userevents.js'); require('./kendo.datepicker.js'); require('./kendo.calendar.js'); require('./kendo.selectable.js'); require('./kendo.html.icon.js'); require('./kendo.html.base.js'); require('@progress/kendo-svg-icons'); require('./kendo.dateinput.js'); require('./kendo.label.js'); require('./kendo.floatinglabel.js'); require('@progress/kendo-dateinputs-common'); require('./kendo.actionsheet.js'); require('./kendo.numerictextbox.js'); require('./prefix-suffix-containers-BmDm564f.js'); require('./kendo.dropdownlist.js'); require('./kendo.list.js'); require('./dropdowns-loader-Bc4IELFi.js'); require('./kendo.mobile.scroller.js'); require('./kendo.fx.js'); require('./kendo.virtuallist.js'); require('./valueMapper-q_OtZ-Tj.js'); require('./kendo.buttongroup.js'); require('./kendo.togglebutton.js'); require('./kendo.button.js'); require('./kendo.badge.js'); require('./kendo.binder.js'); require('./kendo.pane.js'); require('./kendo.view.js'); const __meta__ = { id: "columnmenu", name: "Column Menu", category: "framework", depends: [ "popup", "tabstrip", "filtermenu", "menu", 'expansionpanel', 'html.button', "icons" ], advanced: true }; (function($, undefined$1) { var kendo = window.kendo, encode = kendo.htmlEncode, ui = kendo.ui, extend = $.extend, grep = $.grep, encode = kendo.htmlEncode, map = $.map, inArray = $.inArray, Comparer = kendo.data.Comparer, ACTIVE = "k-selected", ASC = "asc", DESC = "desc", CHANGE = "change", INIT = "init", OPEN = "open", SELECT = "select", STICK = "stick", UNSTICK = "unstick", POPUP = "kendoPopup", FILTERMENU = "kendoFilterMenu", TABSTRIP = "kendoTabStrip", MENU = "kendoMenu", EXPANSIONPANEL = "kendoExpansionPanel", NS = ".kendoColumnMenu", COLUMN_HEADER_SELECTOR = ".k-table-th", Widget = ui.Widget; function trim(text) { return kendo.trim(text).replace(/&nbsp;/gi, ""); } function toHash(arr, key) { var result = {}; var idx, len, current; for (idx = 0, len = arr.length; idx < len; idx ++) { current = arr[idx]; result[current[key]] = current; } return result; } function columnsGroupFilterHandler(column) { return this.columns.indexOf(column.title) >= 0 || this.columns.indexOf(column.field) >= 0; } function leafColumns(columns) { var result = []; for (var idx = 0; idx < columns.length; idx++) { if (!columns[idx].columns) { result.push(columns[idx]); continue; } result = result.concat(leafColumns(columns[idx].columns)); } return result; } function attrEquals(attrName, attrValue) { return "[" + kendo.attr(attrName) + "='" + (attrValue || "").replace(/'/g, "\"") + "']"; } function insertElementAt(index, element, container) { if (index > 0) { element.insertAfter(container.children().eq(index - 1)); } else { container.prepend(element); } } function columnOccurrences(columns) { var columnDict = {}; var signature; for (var i = 0; i < columns.length; i++) { signature = JSON.stringify(columns[i]); if (columnDict[signature]) { columnDict[signature].push(i); } else { columnDict[signature] = [i]; } } return columnDict; } function oldColumnOccurrences(renderedListElements, checkBoxes) { var indexAttr = kendo.attr("index"); var fieldAttr = kendo.attr("field"); var columnDict = {}; var signature; var columCheckbox; var index; var field; var title; for (var j = 0; j < renderedListElements.length; j++) { columCheckbox = checkBoxes.eq(j); index = parseInt(columCheckbox.attr(indexAttr), 10); field = columCheckbox.attr(fieldAttr); title = columCheckbox.attr("title"); signature = field ? field : title; if (columnDict[signature]) { columnDict[signature].push(index); } else { columnDict[signature] = [index]; } } return columnDict; } var ColumnMenu = Widget.extend({ init: function(element, options) { var that = this, columnHeader; options = options || {}; options.componentType = options.componentType || "classic"; Widget.fn.init.call(that, element, options); element = that.element; options = that.options; that.owner = options.owner; that.dataSource = options.dataSource; that.field = element.attr(kendo.attr("field")); that.title = element.attr(kendo.attr("title")); columnHeader = $(element.closest(COLUMN_HEADER_SELECTOR)); if (columnHeader.length) { that.appendTo = columnHeader.find(options.appendTo); } else { that.appendTo = $(options.appendTo); } that.link = that._createLink(); that.wrapper = $('<div />'); that._applyCssClasses(); that._refreshHandler = that.refresh.bind(that); that.dataSource.bind(CHANGE, that._refreshHandler); }, _init: function() { var that = this; that.pane = that.options.pane; if (that.pane) { that._isMobile = true; } if (that._isMobile) { that._createMobileMenu(); } else { that._createMenu(); } that._sort(); that._columns(); that._filter(); that._lockColumns(); that._reorderColumns(); that._stickyColumns(); that._sizeColumns(); that._clearAllFilters(); that._groupColumn(); that.trigger(INIT, { field: that.field, container: that.wrapper }); }, events: [ INIT, OPEN, "sort", "filtering", STICK, UNSTICK ], options: { name: "ColumnMenu", messages: { sortAscending: "Sort Ascending", sortDescending: "Sort Descending", filter: "Filter", clearAllFilters: "Clear All Filters", column: "Column", columns: "Columns", columnVisibility: "Column Visibility", clear: "Clear", cancel: "Cancel", done: "Done", settings: "Edit Column Settings", lock: "Lock Column", unlock: "Unlock Column", stick: "Stick Column", unstick: "Unstick Column", setColumnPosition: "Set Column Position", apply: "Apply", reset: "Reset", buttonTitle: "{0} edit column settings", movePrev: "Move previous", moveNext: "Move next", groupColumn: "Group column", ungroupColumn: "Ungroup column", autoSizeColumn: "Autosize This Column", autoSizeAllColumns: "Autosize All Columns" }, filter: "", columns: true, sortable: true, filterable: true, clearAllFilters: false, autoSize: false, hideAutoSizeColumn: false, animations: { left: "slide" }, encodeTitles: false, componentType: "classic", appendTo: null }, _applyCssClasses: function() { var that = this, componentType = that.options.componentType, wrapper = that.wrapper; if (componentType === "tabbed") { wrapper.addClass("k-column-menu-tabbed"); } wrapper.addClass("k-column-menu k-column-menu-popup"); }, _createMenu: function() { var that = this, options = that.options, columns = that._ownerColumns(), flattenMenuCols, menuTemplate, menuElement; const isGridColumnMenu = that.owner && that.owner.options && (that.owner.options.name === "Grid" || that.owner.options.name === "TreeList"); if (that._hasGroups()) { columns = that._groupColumns(columns); flattenMenuCols = that._flattenMenuCols(columns); if (flattenMenuCols.length !== that.owner.columns.length) { that._syncMenuCols(flattenMenuCols, that.owner.columns); } } if (that._isModernComponentType()) { menuTemplate = kendo.template(modernTemplate); } else if (that._isTabbedComponentType()) { menuTemplate = kendo.template(tabbedTemplate); } else { menuTemplate = kendo.template(template); } menuElement = $(menuTemplate({ uid: kendo.guid(), ns: kendo.ns, messages: options.messages, sortable: options.sortable, filterable: options.filterable, columns: columns, showColumns: options.columns, hasLockableColumns: options.hasLockableColumns, hasStickableColumns: options.hasStickableColumns, encodeTitles: options.encodeTitles, omitWrapAttribute: kendo.attr("omit-wrap"), reorderable: options.reorderable, groupable: options.groupable, autoSize: options.autoSize, hideAutoSizeColumn: options.hideAutoSizeColumn, clearAllFilters: options.clearAllFilters })); kendo.applyStylesFromKendoAttributes(menuElement, ["display"]); that.wrapper.empty().append(menuElement); that.popup = that.wrapper[POPUP]({ anchor: that.link, copyAnchorStyles: false, open: that._open.bind(that), activate: that._activate.bind(that), deactivate: that._deactivate.bind(that), close: function(e) { if (that._preventMenuCloseOnColumnVisibilityChange) { e.preventDefault(); that._preventMenuCloseOnColumnVisibilityChange = false; return; } if (that.menu) { that.menu._closing = e.sender.element; } if (that.options.closeCallback) { that.options.closeCallback(that.element); } } }).data(POPUP); if (that._isModernComponentType() || that._isTabbedComponentType() || isGridColumnMenu) { that.popup.element.addClass("k-grid-columnmenu-popup"); that.popup.element.removeClass("k-column-menu-popup"); } if (that._isModernComponentType() || that._isTabbedComponentType()) { that._createExpanders(); } else { that.menu = that.wrapper.children()[MENU]({ orientation: "vertical", closeOnClick: false, autoSize: true, open: function() { that._updateMenuItems(); } }).data(MENU); } if (that._isTabbedComponentType()) { that.tabStrip = menuElement[TABSTRIP]({ applyMinHeight: false, animation: { open: { effects: "fadeIn" } } }).data(TABSTRIP); that.tabStrip.activateTab(that.tabStrip.tabGroup.find("li:first")); } }, _createLink: function() { var that = this, element = that.element, appendTarget = that.appendTo.length ? element.find(that.appendTo) : element, link = element.is(".k-grid-column-menu") ? element : element.find(".k-grid-column-menu"), title = encode(kendo.format(that.options.messages.buttonTitle, that.title || that.field)); if (!link[0]) { element.addClass("k-filterable"); link = appendTarget .append('<a class="k-grid-column-menu k-grid-header-menu" href="#" aria-hidden="true" title="' + title + '">' + kendo.ui.icon("more-vertical") + '</a>') .find(".k-grid-column-menu"); } link.attr("tabindex", -1) .on("click" + NS, that._click.bind(that)); return link; }, _createExpanders: function() { var that = this; var options = that.options; var columnsExpanderOptions = that.options.columnsExpanderOptions || {}; var expanderOptions = { expanded: false, headerClass: "k-columnmenu-item", useBareTemplate: true }; if (that._isModernComponentType()) { that.wrapper.find(".k-columns-item")[EXPANSIONPANEL]($.extend(true, {}, expanderOptions, columnsExpanderOptions, { title: kendo.ui.icon("columns") + '<span>' + encode(options.messages.columnVisibility) + '</span>' })); that.wrapper.find(".k-column-menu-filter")[EXPANSIONPANEL]($.extend(true, {}, expanderOptions,{ title: kendo.ui.icon("filter") + '<span>' + encode(options.messages.filter) + '</span>' })); } that.wrapper.find(".k-column-menu-position")[EXPANSIONPANEL]($.extend(true, {}, expanderOptions,{ title: kendo.ui.icon("set-column-position") + '<span>' + encode(options.messages.setColumnPosition) + '</span>' })); }, _syncMenuCols: function(menuCols, ownerCols) { var length = ownerCols.length; var ownerCol; var menuColsFields = menuCols.map(function(col) { return col.field; }); for (var i = 0; i < length; i++) { ownerCol = ownerCols[i]; if (menuColsFields.indexOf(ownerCol.field) < 0) { ownerCol.menu = false; } } }, _flattenMenuCols: function(cols) { var result = []; var length = cols.length; for (var i = 0; i < length; i++) { if (cols[i].columns) { result = result.concat(this._flattenMenuCols(cols[i].columns)); } else if (!cols[i].groupHeader) { result.push(cols[i]); } } return result; }, _groupColumns: function(columns, nest) { var result = []; var groups = this.options.columns.groups; var length = groups.length; var i; var currGroup; var filterHandler; var group; var groupColumns; for (i = 0; i < length; i++) { currGroup = groups[i]; filterHandler = columnsGroupFilterHandler.bind(currGroup); group = { title: currGroup.title, groupHeader: true }; groupColumns = columns.filter(filterHandler); result.push(group); if (nest) { group.columns = groupColumns; } else { result = result.concat(groupColumns); } } return result; }, _hasGroups: function() { return this.options.columns && this.options.columns.groups && this.options.columns.groups.length; }, _isModernComponentType: function() { return this.options.componentType === 'modern' && !this._isMobile; }, _isTabbedComponentType: function() { return this.options.componentType === 'tabbed' && !this._isMobile; }, _deactivate: function() { if (this.menu) { this.menu._closing = false; } }, _createMobileMenu: function() { var that = this, options = that.options, columns = that._ownerColumns(), groups, flattenMenuCols; if (that._hasGroups()) { groups = that._groupColumns(columns, true); flattenMenuCols = that._flattenMenuCols(groups); if (flattenMenuCols.length !== that.owner.columns.length) { that._syncMenuCols(flattenMenuCols, that.owner.columns); } } var html = kendo.template(mobileTemplate)({ ns: kendo.ns, field: that.field, title: that.title || that.field, messages: options.messages, sortable: options.sortable, filterable: options.filterable, columns: columns, showColumns: options.columns, hasLockableColumns: options.hasLockableColumns, hasStickableColumns: options.hasStickableColumns, hasGroups: that._hasGroups(), groups: groups, reorderable: options.reorderable, groupable: options.groupable }); that.view = that.pane.append(html); that.view.state = { columns: {} }; that.wrapper = that.view.element.find(".k-column-menu"); that.menu = new MobileMenu(that.wrapper.children(), { pane: that.pane, columnMenu: that }); // The toggle animation of the switches should not propagate to the view that.menu.element.on("transitionend" + NS, function(e) { e.stopPropagation(); }); var viewElement = that.view.wrapper && that.view.wrapper[0] ? that.view.wrapper : that.view.element; viewElement.on("click", ".k-header-done", function(e) { e.preventDefault(); that.menu._applyChanges(); that.menu._cancelChanges(false); that.close(); }); viewElement.on("click", ".k-header-cancel", function(e) { e.preventDefault(); that.menu._cancelChanges(true); that.close(); }); that.view.bind("showStart", function() { var view = that.view || { }; if (that.options.hasLockableColumns) { that._updateLockedColumns(); } if (that.options.hasStickableColumns) { that._updateStickyColumns(); } if (that.options.reorderable) { that._updateReorderColumns(); } if (that.options.groupable) { that._updateGroupColumns(); } if (view.element.find(".k-sort-asc.k-selected").length) { view.state.initialSort = "asc"; } else if (view.element.find(".k-sort-desc.k-selected").length) { view.state.initialSort = "desc"; } }); }, destroy: function() { var that = this; Widget.fn.destroy.call(that); if (that.filterMenu) { that.filterMenu.destroy(); } if (that._refreshHandler) { that.dataSource.unbind(CHANGE, that._refreshHandler); } if (that.options.columns && that.owner) { if (that._updateColumnsMenuHandler) { that.owner.unbind("columnShow", that._updateColumnsMenuHandler); that.owner.unbind("columnHide", that._updateColumnsMenuHandler); } if (that._updateColumnsLockedStateHandler) { that.owner.unbind("columnLock", that._updateColumnsLockedStateHandler); that.owner.unbind("columnUnlock", that._updateColumnsLockedStateHandler); } } if (that.menu) { that.menu.element.off(NS); that.menu.destroy(); } that.wrapper.off(NS); if (that.popup) { that.popup.destroy(); } if (that.view) { that.view.purge(); } that.link.off(NS); that.owner = null; that.wrapper = null; that.element = null; }, close: function() { this._preventMenuCloseOnColumnVisibilityChange = false; if (this.menu) { this.menu.close(); } if (this.popup) { this.popup.close(); this.popup.element.off("keydown" + NS); } }, _click: function(e) { var that = this; e.preventDefault(); e.stopPropagation(); var options = this.options; if (options.filter && this.element.is(!options.filter)) { return; } if (!this.popup && !this.pane) { this._init(); } else { that._updateMenuItems(); } if (this._isMobile) { this.pane.navigate(this.view, this.options.animations.left); } else { this.popup.toggle(); } }, _updateMenuItems: function() { var that = this; if (that.options.columns) { that._setMenuItemsVisibility(); if (!that.options.columns.sort && !that.options.columns.groups) { that._reorderMenuItems(); } else { that._updateDataIndexes(); } } }, _setMenuItemsVisibility: function() { var that = this; that._eachRenderedMenuItem(function(index, column, renderedListElement) { if (column.matchesMedia === false) { renderedListElement.hide(); } else { renderedListElement.show(); } }); }, _reorderMenuItems: function() { var that = this; that._eachRenderedMenuItem(function(index, column, renderedListElement, renderedList) { if (renderedListElement[0] && renderedListElement.index() !== index) { insertElementAt(index, renderedListElement, renderedList); } }); that._updateDataIndexes(); }, _updateDataIndexes: function() { var that = this; var renderedList = that._isMobile && that.view ? $(that.view.element).find(".k-columns-item").children("ul") : $(that.wrapper).find(".k-menu-group").first(), mappedColumns = that._ownerColumns(true).map(function(x) { return x.title || x.field; }); renderedList.find("span." + (this._isMobile ? "k-listgroup-form-field-wrapper" : "k-menu-link") + " input").each(function(i) { var columns; var index; if (that.options.columns.sort) { columns = that._ownerColumns(); index = mappedColumns.indexOf(columns[i].title); $(this).attr(kendo.attr("index"), index); } else { $(this).attr(kendo.attr("index"), i); } }); }, _eachRenderedMenuItem: function(callback) { var that = this; var renderedListElement; var duplicateColumnIndex; var fieldValue; var currentColumn; var columns = grep(leafColumns(that.owner.columns), function(col) { var result = true, title = trim(col.title || ""); if (col.menu === false || (!col.field && !title.length)) { result = false; } return result; }).map(function(col) { return { field: col.field, title: col.title, matchesMedia: col.matchesMedia }; }); var renderedList = that._getRenderedList(); var renderedListElements = that._getRenderedListElements(renderedList); var oldOccurances = oldColumnOccurrences(renderedListElements, renderedList.find("input[type=checkbox]")); var columnOccurrence = columnOccurrences(columns); var columnElements; for (var i = 0; i < columns.length; i++) { currentColumn = columns[i]; fieldValue = currentColumn.field ? currentColumn.field : currentColumn.title; duplicateColumnIndex = $.inArray(i, columnOccurrence[JSON.stringify(currentColumn)]); columnElements = $(); if (!oldOccurances[fieldValue]) { continue; } for (var idx = 0; idx < oldOccurances[fieldValue].length; idx++) { columnElements = columnElements.add(renderedListElements.eq(oldOccurances[fieldValue][idx])); } renderedListElement = columnElements.find(attrEquals("field", fieldValue)).closest(that._isModernComponentType() ? "label" : "li").eq(duplicateColumnIndex); callback(i, currentColumn, renderedListElement, renderedList); } }, _getRenderedList: function() { var that = this; if (that._isModernComponentType() || that._isTabbedComponentType()) { return $(that.wrapper).find('.k-columns-item'); } else { return that._isMobile && that.view ? $(that.view.element).find(".k-columns-item").children("ul") : $(that.wrapper).find(".k-menu-group").first(); } }, _getRenderedListElements: function(renderedList) { var that = this; if (that._isModernComponentType() || that._isTabbedComponentType()) { return renderedList.find('label'); } else { return renderedList.find("span." + (this._isMobile ? "k-listgroup-form-field-wrapper" : "k-menu-link")); } }, _open: function() { var that = this, instance, menuitem; $(".k-column-menu").not(that.wrapper).each(function() { let popup = $(this).data(POPUP); if (popup) { popup.close(); } }); that.popup.element.off("keydown" + NS).on("keydown" + NS, function(e) { var target = $(e.target); if ((that._isModernComponentType() || that._isTabbedComponentType()) && e.keyCode === kendo.keys.ENTER) { target.click(); } if (e.keyCode == kendo.keys.ESC) { instance = kendo.widgetInstance(target.find("select")); if (target.hasClass("k-picker") && instance && instance.popup.visible()) { e.stopPropagation(); return; } menuitem = target.closest(".k-popup").closest(".k-menu-item"); if (menuitem.length > 0) { menuitem.addClass("k-focus"); if (that.menu) { that.menu.element.trigger("focus"); } else { that.popup.element.find('[tabindex=0]').eq(0).trigger("focus"); } } target.closest(".k-popup").getKendoPopup().close(); } }); if (that.options.hasLockableColumns) { that._updateLockedColumns(); } if (that.options.hasStickableColumns) { that._updateStickyColumns(); } if (that.options.reorderable) { that._updateReorderColumns(); } if (that.options.groupable) { that._updateGroupColumns(); } }, _activate: function() { if (this.menu) { this.menu.element.trigger("focus"); } else { this.popup.element.find('[tabindex=0]').eq(0).trigger("focus"); } this.trigger(OPEN, { field: this.field, container: this.wrapper }); }, _checkItemClass: function(item, _class) { if (item.is("svg,path")) { item = item.closest(`.${_class}`); } return item.hasClass(_class); }, _ownerColumns: function(omitSort) { var columns = leafColumns(this.owner.columns), menuColumns = grep(columns, function(col) { var result = true, title = trim(col.title || ""); if (col.menu === false || (!col.field && !title.length)) { result = false; } return result; }), result, sort = this.options.columns.sort; result = map(menuColumns, function(col) { return { originalField: col.field, field: col.field || col.title, title: col.title || col.field, hidden: col.hidden, matchesMedia: col.matchesMedia, index: inArray(col, columns), locked: !!col.locked, _originalObject: col, uid: col.headerAttributes.id }; }); if (sort && !omitSort) { result.sort(Comparer.create({ field: "title", dir: sort })); } return result; }, _sort: function() { var that = this; if (that.options.sortable) { that.refresh(); if (that._isModernComponentType() || that._isTabbedComponentType()) { that.wrapper.on("click" + NS, ".k-sort-asc, .k-sort-desc", that._sortHandler.bind(that)); } else { that.menu.bind(SELECT, that._sortHandler.bind(that)); } } }, _sortHandler: function(e) { var that = this, item = e.item ? $(e.item) : $(e.target), dir; if (that._checkItemClass(item, "k-sort-asc")) { dir = ASC; } else if (that._checkItemClass(item, "k-sort-desc")) { dir = DESC; } if (!dir) { return; } that._getSortItemsContainer(item).find(".k-sort-" + (dir == ASC ? DESC : ASC)).removeClass(ACTIVE); that._sortDataSource(item, dir); if (!that._isMobile) { that.close(); } }, _getSortItemsContainer: function(item) { return this._isModernComponentType() || this._isTabbedComponentType() ? item.parents('.k-columnmenu-item-wrapper').first() : item.parent(); }, _sortDataSource: function(item, dir) { var that = this, sortable = that.options.sortable, compare = sortable.compare === null ? undefined$1 : sortable.compare, dataSource = that.dataSource, idx, length, sort = dataSource.sort() || []; var removeClass = item.hasClass(ACTIVE) && sortable && sortable.allowUnsort !== false; dir = !removeClass ? dir : undefined$1; if (that.trigger("sort", { sort: { field: that.field, dir: dir, compare: compare } })) { return; } if (removeClass) { item.removeClass(ACTIVE); } else { item.addClass(ACTIVE); } if (sortable.mode === "multiple") { for (idx = 0, length = sort.length; idx < length; idx++) { if (sort[idx].field === that.field) { sort.splice(idx, 1); break; } } sort.push({ field: that.field, dir: dir, compare: compare }); } else { sort = [ { field: that.field, dir: dir, compare: compare } ]; } dataSource.sort(sort); }, _columns: function() { var that = this; if (that.options.columns) { that._updateColumnsMenu(); that._updateColumnsMenuHandler = that._updateColumnsMenu.bind(that); that.owner.bind(["columnHide", "columnShow"], that._updateColumnsMenuHandler); that._updateColumnsLockedStateHandler = that._updateColumnsLockedState.bind(that); that.owner.bind(["columnUnlock", "columnLock" ], that._updateColumnsLockedStateHandler); if (that._isModernComponentType() || that._isTabbedComponentType()) { that.wrapper.on("click" + NS, '.k-columns-item .k-button:not(.k-button-solid-primary)', function() { that._updateColumnsMenu(); }); that.wrapper.on("click" + NS, '.k-columns-item .k-button.k-button-solid-primary', that._applyColumnVisibility.bind(that)); that.wrapper.on("click" + NS, '.k-columns-item .k-checkbox', function() { that._updateColumnsMenu(true); }); } else { that.menu.bind(SELECT, function(e) { var item = $(e.item), input, column, uidAttr = kendo.attr("uid"), colIdx = 0, columns = grep(leafColumns(that.owner.columns), function(col) { var result = true, title = trim(col.title || ""); if (col.menu === false || (!col.field && !title.length)) { result = false; } return result; }); if (that._isMobile) { e.preventDefault(); } if (!item.parent().closest("li.k-columns-item")[0]) { return; } input = item.find(":checkbox"); if (input.attr("disabled")) { return; } colIdx = columns.map(function(col) { return col.headerAttributes.id; }).indexOf(input.attr(uidAttr)); column = columns[colIdx]; if (column.hidden === true) { that.owner.showColumn(column); } else { that.owner.hideColumn(column); } that._preventMenuCloseOnColumnVisibilityChange = true; }); } } }, _applyColumnVisibility: function() { var that = this; var fieldAttr = kendo.attr("field"); var uidAttr = kendo.attr("uid"); var checkboxes = that.wrapper.find(".k-columns-item input[" + fieldAttr + "]"); var columnsInMenu = grep(leafColumns(this.owner.columns), function(col) { var result = true, title = trim(col.title || ""); if (col.menu === false || (!col.field && !title.length)) { result = false; } return result; }); var length = checkboxes.length; var idx; var colIdx; var checkbox; var column; that.owner.unbind("columnShow", that._updateColumnsMenuHandler); that.owner.unbind("columnHide", that._updateColumnsMenuHandler); for (idx = 0; idx < length; idx++) { checkbox = $(checkboxes[idx]); colIdx = columnsInMenu.map(function(col) { return col.headerAttributes.id; }).indexOf(checkbox.attr(uidAttr)); column = columnsInMenu[colIdx]; if (checkbox.is(":checked") && column.hidden) { that.owner.showColumn(column); } else if (checkbox.is(":not(:checked)") && !column.hidden) { that.owner.hideColumn(column); } } that.popup.close(); that.owner.bind(["columnHide", "columnShow"], that._updateColumnsMenuHandler); }, _sizeColumns: function() { var that = this; if (that._isModernComponentType() || that._isTabbedComponentType()) { that.wrapper.on("click" + NS, ".k-auto-size-column, .k-auto-size-all", that._autoSizeHandler.bind(that)); } else { that.menu.bind(SELECT, that._autoSizeHandler.bind(that)); } }, _clearAllFilters: function() { var that = this; if (that._isModernComponentType() || that._isTabbedComponentType()) { that.wrapper.on("click" + NS, ".k-clear-all-filters", that._clearAllFiltersHandler.bind(that)); } else { that.menu.bind(SELECT, that._clearAllFiltersHandler.bind(that)); } }, _clearAllFiltersHandler: function(e) { var that = this, item = e.item ? $(e.item) : $(e.target); if (item.hasClass("k-clear-all-filters") && that.owner && that.owner.dataSource) { that.owner.dataSource.filter({}); } }, _autoSizeHandler: function(e) { var that = this, item = e.item ? $(e.item) : $(e.target); if (that._checkItemClass(item, "k-auto-size-column")) { that.owner.autoFitColumn(that.field); } else if (that._checkItemClass(item, "k-auto-size-all")) { that.owner.autoFitColumns(); } }, _updateColumnsMenu: function(omitCheckState) { var idx, length, current, checked, locked, that = this; var fieldAttr = kendo.attr("field"), lockedAttr = kendo.attr("locked"), uidAttr = kendo.attr("uid"), colIdx = 0; omitCheckState = omitCheckState === true; var columnsInMenu = grep(leafColumns(this.owner.columns), function(col, idx) { var result = true, title = trim(col.title || ""); if (col.menu === false || (!col.field && !title.length)) { result = false; } return result; }), visibleFields = grep(this._ownerColumns(), function(field) { if (omitCheckState) { return that.wrapper.find("[role='menuitemcheckbox'] [" + uidAttr + "='" + field.uid + "']").prop('checked'); } return !field.hidden && field.matchesMedia !== false; }), visibleDataFields = grep(visibleFields, function(field) { return field.originalField; }), lockedCount = grep(visibleDataFields, function(col) { return col.locked === true; }).length, nonLockedCount = grep(visibleDataFields, function(col) { return col.locked !== true; }).length, columnsNotInMenu = grep(this.owner.columns, function(col) { return col.menu === false; }), hiddenColumnsNotInMenu = grep(columnsNotInMenu, function(col) { return col.hidden; }), visibleColumnsNotInMenu = grep(columnsNotInMenu, function(col) { return !col.hidden; }); this.wrapper.find("[role='menuitemcheckbox']").attr("aria-checked", false); var checkboxes = this.wrapper .find(".k-columns-item input[" + fieldAttr + "]") .prop("disabled", false); if (!omitCheckState) { checkboxes.prop("checked", false); } var switchWidget; for (idx = 0, length = checkboxes.length; idx < length; idx ++) { current = checkboxes.eq(idx); locked = current.attr(lockedAttr) === "true"; checked = false; switchWidget = current.data("kendoSwitch"); colIdx = columnsInMenu.map(function(col) { return col.headerAttributes.id; }).indexOf(current.attr(uidAttr)); checked = omitCheckState ? current.prop('checked') : !columnsInMenu[colIdx].hidden && columnsInMenu[colIdx].matchesMedia !== false; current.prop("checked", checked); if (switchWidget) { switchWidget.enable(true); switchWidget.check(checked); } current.closest("[role='menuitemcheckbox']").attr("aria-checked", checked); if (checked) { if (lockedCount == 1 && locked) { current.prop("disabled", true); if (switchWidget) { switchWidget.enable(false); } } const anyColumnsNotInMenu = columnsNotInMenu.length === 0; const anyHiddenColumnsNotInMenu = columnsNotInMenu.length === hiddenColumnsNotInMenu.length; const anyVisibleColumnsNotInMenu = columnsNotInMenu.length === visibleColumnsNotInMenu.length; const singleNonLockedColumn = nonLockedCount == 1 && !locked; if ((anyColumnsNotInMenu || anyHiddenColumnsNotInMenu || anyVisibleColumnsNotInMenu) && singleNonLockedColumn) { current.prop("disabled", true); if (switchWidget) { switchWidget.enable(false); } } } } }, _updateColumnsLockedState: function() { var idx, length, current, column; var fieldAttr = kendo.attr("field"); var lockedAttr = kendo.attr("locked"); var columns = toHash(this._ownerColumns(), "field"); var checkboxes = this.wrapper .find(".k-columns-item input[type=checkbox]"); for (idx = 0, length = checkboxes.length; idx < length; idx ++ ) { current = checkboxes.eq(idx); column = columns[current.attr(fieldAttr)]; if (column) { current.attr(lockedAttr, column.locked?.toString()); } } this._updateColumnsMenu(); }, _filter: function() { var that = this, widget = FILTERMENU, options = that.options; if (options.filterable !== false) { if (options.filterable.multi) { widget = "kendoFilterMultiCheck"; if (options.filterable.dataSource) { options.filterable.checkSource = options.filterable.dataSource; delete options.filterable.dataSource; } } that.filterMenu = that.wrapper.find(".k-filterable")[widget]( extend(true, {}, { appendToElement: true, dataSource: options.dataSource, values: options.values, field: that.field, title: that.title, change: function(e) { if (that.trigger("filtering", { filter: e.filter, field: e.field })) { e.preventDefault(); } }, componentType: that.options.componentType, cycleForm: !that._isModernComponentType() && !that._isTabbedComponentType() }, options.filterable) ).data(widget); if (that._isMobile) { that.menu.bind(SELECT, function(e) { var item = $(e.item); if (item.hasClass("k-filter-item")) { that.pane.navigate(that.filterMenu.view, that.options.animations.left); } }); } } }, _lockColumns: function() { var that = this; if (that._isModernComponentType() || that._isTabbedComponentType()) { that.wrapper.on("click" + NS, ".k-lock, .k-unlock", that._lockableHandler.bind(that)); } else { that.menu.bind(SELECT, that._lockableHandler.bind(that)); } }, _lockableHandler: function(e) { var that = this; var item = e.item ? $(e.item) : $(e.target); if (that._checkItemClass(item, "k-lock")) { that.owner.lockColumn(that.field); if (!that._isMobile) { that.close(); } } else if (that._checkItemClass(item, "k-unlock")) { that.owner.unlockColumn(that.field); if (!that._isMobile) { that.close(); } } }, _reorderColumns: function() { var that = this; if (that._isModernComponentType() || that._isTabbedComponentType()) { that.wrapper.on("click" + NS, ".k-move-prev, .k-move-next", that._reorderHandler.bind(that)); } else { that.menu.bind(SELECT, that._reorderHandler.bind(that)); } }, _reorderHandler: function(e) { var that = this; var item = e.item ? $(e.item) : $(e.target); if (item.hasClass("k-move-prev")) { that.owner._moveColumn(that.element, true); if (!that._isMobile) { that.close(); } } else if (item.hasClass("k-move-next")) { that.owner._moveColumn(that.element, false); if (!that._isMobile) { that.close(); } } }, _groupColumn: function() { var that = this; if (that._isModernComponentType() || that._isTabbedComponentType()) { that.wrapper.on("click" + NS, ".k-group, .k-ungroup", that._groupHandler.bind(that)); } else { that.menu.bind(SELECT, that._groupHandler.bind(that)); } }, _groupHandler: function(e) { var that = this, item = e.item ? $(e.item) : $(e.target); if (item.hasClass("k-group") || item.hasClass("k-ungroup")) { that.owner._handleSpaceKey(that.element, true); if (!that._isMobile) {