UNPKG

@progress/kendo-ui

Version:

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

1,598 lines (1,596 loc) 70.6 kB
const require_dropdowns_loader = require('./dropdowns-loader-Ct0fKyLR.js'); const require_valueMapper = require('./valueMapper-CMu0c73J.js'); //#region ../src/dropdowntree/treeview.js (function($, undefined) { var kendo = window.kendo, ui = kendo.ui, keys = kendo.keys, DISABLED = "k-disabled", SELECT = "select", CHECKED = "checked", DATABOUND = "dataBound", CLICK = "click", NS = ".kendoTreeView", INDETERMINATE = "indeterminate", NAVIGATE = "navigate", subGroup, TreeView = ui.TreeView; function contentChild(filter) { return function(node) { var result = node.children(".k-animation-container"); if (!result.length) { result = node; } return result.children(filter); }; } subGroup = contentChild(".k-treeview-group"); var Tree = TreeView.extend({ init: function(element, options, dropdowntree) { var that = this; that.dropdowntree = dropdowntree; TreeView.fn.init.call(that, element, options); if (that.dropdowntree._isMultipleSelection()) { that.wrapper.on(CLICK + NS, ".k-treeview-item-content.k-selected .k-treeview-leaf", that._clickSelectedItem.bind(that)); } }, _checkOnSelect: function(e) { if (!e.isDefaultPrevented()) { var dataItem = this.dataItem(e.node); dataItem.set("checked", !dataItem.checked); } }, _setCheckedValue: function(node, value) { node.set(CHECKED, value); }, _click: function(e) { var that = this; if (that.dropdowntree._isMultipleSelection()) { that.one("select", that._checkOnSelect); } TreeView.fn._click.call(that, e); }, _clickSelectedItem: function(e) { var that = this, node = $(e.currentTarget), dataItem = this.dataItem(node); if (!that._trigger(SELECT, node)) { dataItem.set("checked", !dataItem.checked); that.dataItem(node).set("selected", false); } }, defaultrefresh: function(e) { var that = this; var node = e.node; var action = e.action; var items = e.items; var parentNode = this.wrapper; var options = this.options; var loadOnDemand = options.loadOnDemand; var checkChildren = options.checkboxes && options.checkboxes.checkChildren; var i; if (this._skip) { return; } if (e.field) { if (!items[0] || !items[0].level) { return; } return this._updateNodes(items, e.field); } if (node) { parentNode = this.findByUid(node.uid); this._progress(parentNode, false); } if (checkChildren && action != "remove") { var bubble = false; for (i = 0; i < items.length; i++) { if ("checked" in items[i]) { bubble = true; break; } } if (!bubble && node && node.checked) { for (i = 0; i < items.length; i++) { items[i].checked = true; } } } if (action == "add") { this._appendItems(e.index, items, parentNode); } else if (action == "remove") { this._remove(this.findByUid(items[0].uid), false); } else if (action == "itemchange") { this._updateNodes(items); } else if (action == "itemloaded") { this._refreshChildren(parentNode, items, e.index); } else { this._refreshRoot(items); } if (action != "remove") { for (i = 0; i < items.length; i++) { if (!loadOnDemand || items[i].expanded) { items[i].load(); } } } that.wrapper.find(">ul").attr("role", "tree"); this._applyLevelStyles(); this.trigger(DATABOUND, { node: node ? parentNode : undefined }); this.dropdowntree._treeViewDataBound({ node: node ? parentNode : undefined, sender: this }); if (this.options.checkboxes.checkChildren) { this.updateIndeterminate(); } }, _previousVisible: function(node) { var that = this, lastChild, result; if (!node.length || node.prev().length) { if (node.length) { result = node.prev(); } else { result = that.root.children().last(); } while (that._expanded(result)) { lastChild = subGroup(result).children().last(); if (!lastChild.length) { break; } result = lastChild; } } else { result = that.parent(node) || node; if (!result.length) { if (that.dropdowntree.checkAll && that.dropdowntree.checkAll.is(":visible")) { that.dropdowntree.checkAll.find(".k-checkbox").trigger("focus"); } else if (that.dropdowntree.filterInput) { that.dropdowntree.filterInput.trigger("focus"); } else { that.dropdowntree.wrapper.trigger("focus"); } } } return result; }, _keydown: function(e) { var that = this, key = e.keyCode, target, focused = that.current(), expanded = that._expanded(focused), checkbox = focused.find(".k-checkbox-wrap").first().find(":checkbox"), rtl = kendo.support.isRtl(that.element); if (e.target != e.currentTarget) { return; } if (!rtl && key == keys.RIGHT || rtl && key == keys.LEFT) { if (expanded) { target = that._nextVisible(focused); } else if (!focused.find(".k-treeview-item-content").first().hasClass(DISABLED)) { that.expand(focused); } } else if (!rtl && key == keys.LEFT || rtl && key == keys.RIGHT) { if (expanded && !focused.find(".k-treeview-item-content").first().hasClass(DISABLED)) { that.collapse(focused); } else { target = that.parent(focused); if (!that._enabled(target)) { target = undefined; } } } else if (key == keys.DOWN) { target = that._nextVisible(focused); } else if (key == keys.UP && !e.altKey) { target = that._previousVisible(focused); } else if (key == keys.HOME) { target = that._nextVisible($()); } else if (key == keys.END) { target = that._previousVisible($()); } else if (key == keys.ENTER && !focused.find(".k-treeview-item-content").first().hasClass(DISABLED)) { if (!focused.find(".k-treeview-item-content").first().hasClass("k-selected")) { if (!that._trigger(SELECT, focused)) { that.select(focused); } } } else if (key == keys.SPACEBAR && checkbox.length && !focused.find(".k-treeview-item-content").first().hasClass(DISABLED)) { checkbox.prop(CHECKED, !checkbox.prop(CHECKED)).data(INDETERMINATE, false).prop(INDETERMINATE, false); that._checkboxChange({ target: checkbox }); target = focused; } else if (e.altKey && key === keys.UP || key === keys.ESC) { that._closePopup(); } else if (key === keys.TAB) { e.preventDefault(); that._closePopup(); } if (target) { e.preventDefault(); if (focused[0] != target[0]) { that._trigger(NAVIGATE, target); that.current(target); that.scrollTo(target); } } }, _closePopup: function() { this.dropdowntree.close(); this.dropdowntree.wrapper.trigger("focus"); }, refresh: function(e) { this.defaultrefresh(e); if (this.dropdowntree.options.skipUpdateOnBind) { return; } if (e.action === "itemchange") { if (this.dropdowntree._isMultipleSelection()) { if (e.field === "checked") { this.dropdowntree._checkValue(e.items[0]); } } else if (e.field !== "checked" && e.field !== "expanded" && e.items[0].selected) { this.dropdowntree._selectValue(e.items[0]); } } else { this.dropdowntree.refresh(e); } } }); kendo.ui._dropdowntree = Tree; })(window.kendo.jQuery); //#endregion //#region ../src/kendo.dropdowntree.js const __meta__ = { id: "dropdowntree", name: "DropDownTree", category: "web", description: "The DropDownTree widget displays a hierarchy of items and allows the selection of single or multiple items.", depends: [ "treeview", "popup", "binder", "html.chip", "html.chiplist", "html.button", "html.input", "label", "icons", "actionsheet" ] }; (function($, undefined) { var kendo = window.kendo, ui = kendo.ui, html = kendo.html, encode = kendo.htmlEncode, mediaQuery = kendo.mediaQuery, Widget = ui.Widget, TreeView = ui._dropdowntree, ObservableArray = kendo.data.ObservableArray, ObservableObject = kendo.data.ObservableObject, extend = $.extend, activeElement = kendo._activeElement, ns = ".kendoDropDownTree", keys = kendo.keys, support = kendo.support, HIDDENCLASS = "k-hidden", WIDTH = "width", browser = support.browser, outerWidth = kendo._outerWidth, DOT = ".", DISABLED = "disabled", READONLY = "readonly", STATEDISABLED = "k-disabled", ARIA_DISABLED = "aria-disabled", HOVER = "k-hover", FOCUSED = "k-focus", HOVEREVENTS = "mouseenter" + ns + " mouseleave" + ns, TABINDEX = "tabindex", CLICK = "click", OPEN = "open", CLOSE = "close", CHANGE = "change", quotRegExp = /"/g, CHIP = ".k-chip"; function getterFunction(field) { if (Array.isArray(field)) { var count = field.length; var levels = $.map(field, function(x) { return function(d) { return d[x]; }; }); return function(dataItem) { var level = dataItem._level; if (!level && level !== 0) { return; } return levels[Math.min(level, count - 1)](dataItem); }; } else { return kendo.getter(field); } } var DropDownTree = kendo.ui.Widget.extend({ init: function(element, options) { var that = this; that.ns = ns; kendo.ui.Widget.fn.init.call(that, element, options); that._selection = that._getSelection(); that._focusInputHandler = that._focusInput.bind(that); that._initial = that.element.val(); that._values = []; var value = this.options.value; if (value === null || !value.length) { this._noInitialValue = true; } if (!this._isNullorUndefined(value)) { this._valueMethodCalled = true; value = this._isArrayOfObjects(value) && that.options.autoBind ? value.map((x) => x[that.options.dataValueField]) : value; this._values = Array.isArray(value) ? value.slice(0) : [value]; } that.bigScreenMQL = mediaQuery("large"); that.smallScreenMQL = mediaQuery("small"); if (that.options.adaptiveMode == "auto") { that.smallScreenMQL.onChange(function() { if (that.popup && kendo.isFunction(that.popup.fullscreen)) { that.popup.fullscreen(that.smallScreenMQL.mediaQueryList.matches); } }); } this._bindLoader(); this._inputTemplate(); this._accessors(); this._setTreeViewOptions(this.options); this._dataSource(); this._selection._initWrapper(); this._applyCssClasses(); this._placeholder(true); this._tabindex(); this.wrapper.data(TABINDEX, this.wrapper.attr(TABINDEX)); this.tree = $("<div/>").attr({ tabIndex: -1, "aria-hidden": true }); this.list = $("<div/>").append(this.tree); this._header(); this._noData(); this._footer(); this._reset(); this._popup(); if (that.options.adaptiveMode == "auto") { that.bigScreenMQL.onChange(() => { that.list = $("<div class='k-list-container'/>").append(that.tree); that._header.bind(that)(); that._noData.bind(that)(); that._footer.bind(that)(); that._reset.bind(that)(); if (that.popup) { if (that.popup.wrapper) { that.popup.wrapper.remove(); } that.popup.destroy(); that.popup.element.remove(); that.popup = null; } if (that.treeview) { that.treeview.destroy(); } that._popup.bind(that)(); that._filterHeader.bind(that)(); that._treeview.bind(that)(); that._renderFooter.bind(that)(); that._checkAll.bind(that)(); that._enable.bind(that)(); that._toggleCloseVisibility.bind(that)(); that._aria.bind(that)(); }); } this._clearButton(); this._filterHeader(); this._treeview(); this._renderFooter(); this._checkAll(); this._enable(); this._toggleCloseVisibility(); if (!this.options.autoBind) { var text = options.text || ""; if (!this._isNullorUndefined(options.value)) { this._preselect(options.value); } else if (text) { this._textAccessor(text); } else if (options.placeholder) { this._placeholder(true); } } var disabled = $(this.element).parents("fieldset").is(":disabled"); if (disabled) { this.enable(false); } this._valueMethodCalled = false; if (this.options.label) { this._label(); } if (this.options.loadOnDemand && this.options.loadOnDemand.valueMapper && this.options.value) { this.one("dataBound", () => this.requireValueMapper(this.options)); } this._aria(); kendo.notify(this); }, _bindLoader: function() { const that = this; that._initLoader = require_dropdowns_loader.initLoader.bind(that); that._initLoader(); }, _label: function() { var that = this; var options = that.options; var labelOptions = $.isPlainObject(options.label) ? options.label : { content: options.label }; that.label = new kendo.ui.Label(null, $.extend({}, labelOptions, { widget: that, floatCheck: that._floatCheck.bind(that) })); that._inputLabel = that.label.element; }, _floatCheck: function() { var hasValue = this.value() && !this._isMultipleSelection() || this.value().length || this.text(); return !hasValue && !this.popup.visible(); }, _refreshFloatingLabel: function() { var that = this; if (that.label && that.label.floatingLabel) { that.label.floatingLabel.refresh(); } }, _preselect: function(data, value) { this._selection._preselect(data, value); }, _setTreeViewOptions: function(options) { var treeviewOptions = { autoBind: options.autoBind, checkboxes: options.checkboxes, dataImageUrlField: options.dataImageUrlField, dataSpriteCssClassField: options.dataSpriteCssClassField, dataTextField: options.dataTextField, dataUrlField: options.dataUrlField, loadOnDemand: options.loadOnDemand, size: options.size }; this.options.treeview = $.extend({}, treeviewOptions, this.options.treeview); if (options.template) { this.options.treeview.template = options.template; } if (options.size) { this.options.treeview.size = options.size; } }, _dataSource: function() { const that = this; const rootDataSource = that.options.dataSource; that._requestStartHandler = that._showBusy; that._requestEndHandler = that._hideBusy; that._errorHandler = function() { that._hideBusy(); }; that.dataSource = kendo.data.HierarchicalDataSource.create(rootDataSource).bind("progress", that._requestStartHandler).bind("error", that._errorHandler).bind("requestEnd", that._requestEndHandler); if (rootDataSource) { $.extend(that.options.treeview, { dataSource: that.dataSource }); } }, _popupOpen: function() { var popup = this.popup; popup.wrapper = kendo.wrap(popup.element); }, _getSelection: function() { if (this._isMultipleSelection()) { this.options._altname = "MultiSelectTree"; return new ui.DropDownTree.MultipleSelection(this); } else { return new ui.DropDownTree.SingleSelection(this); } }, setDataSource: function(dataSource) { this._isDataSourceSet = true; if (this._tags) { this._noInitialValue = true; this.setValue([]); this._tags.empty(); this.span.show(); this._multipleTags.empty(); } this.dataSource = dataSource; this.treeview.setDataSource(dataSource); this._isDataSourceSet = false; }, _isMultipleSelection: function() { return this.options && (this.options.treeview.checkboxes || this.options.checkboxes); }, _isArrayOfObjects: function(value) { return Array.isArray(value) && value.map((x) => typeof x == "object").includes(true); }, options: { name: "DropDownTree", adaptiveMode: "none", animation: {}, autoBind: true, autoClose: true, autoWidth: false, clearButton: true, dataTextField: "", dataValueField: "", dataImageUrlField: "", dataSpriteCssClassField: "", dataUrlField: "", delay: 500, enabled: true, enforceMinLength: false, filter: "none", height: 200, ignoreCase: true, index: 0, loadOnDemand: false, messages: { "singleTag": "item(s) selected", "clear": "clear", "deleteTag": "delete", "noData": "No data found.", "filterInputPlaceholder": "Filter" }, minLength: 1, checkboxes: false, noDataTemplate: true, placeholder: "", checkAll: false, checkAllTemplate: () => "Check all", tagMode: "multiple", template: null, text: null, treeview: {}, valuePrimitive: false, footerTemplate: () => "", headerTemplate: () => "", value: null, valueTemplate: null, popup: null, filterLabel: null, size: undefined, fillMode: undefined, rounded: undefined, label: null, adaptiveTitle: null, adaptiveSubtitle: null }, events: [ "open", "close", "dataBound", CHANGE, "select", "filtering" ], focus: function() { this.wrapper.trigger("focus"); }, dataItem: function(node) { return this.treeview.dataItem(node); }, readonly: function(readonly) { this._editable({ readonly: readonly === undefined ? true : readonly, disable: false }); this._toggleCloseVisibility(); if (this.label && this.label.floatingLabel) { this.label.floatingLabel.readonly(readonly === undefined ? true : readonly); } }, enable: function(enable) { this._editable({ readonly: false, disable: !(enable = enable === undefined ? true : enable) }); this._toggleCloseVisibility(); if (this.label && this.label.floatingLabel) { this.label.floatingLabel.enable(enable = enable === undefined ? true : enable); } }, toggle: function(open) { this._toggle(open); }, open: function() { var popup = this.popup; if (!this.options.autoBind && !this.dataSource.data().length) { this.treeview._progress(true); if (this._isFilterEnabled()) { this._search(); } else { this.dataSource.fetch(); } } if (popup.visible() || !this._allowOpening()) { return; } popup.one("activate", this._focusInputHandler); popup._hovered = true; popup.open(); }, close: function() { this.popup.close(); }, search: function(word) { var options = this.options; var filter; clearTimeout(this._typingTimeout); if (!options.enforceMinLength && !word.length || word.length >= options.minLength) { filter = this._getFilter(word); if (this.trigger("filtering", { filter }) || Array.isArray(this.options.dataTextField)) { return; } this._filtering = true; this.treeview.dataSource.filter(filter); } }, _mapValuesToId: function(values) { const that = this; if (typeof that.dataSource.options.schema.model === "function") { throw new Error("The valueMapper needs dataSource.schema"); } const field = that.dataSource.options.schema.model.id; return values.map((item) => item[field]); }, requireValueMapper: function(options, value) { const that = this; let hasValue = value ? value : options.value; hasValue = hasValue && (hasValue instanceof Array ? hasValue : [hasValue]); if (hasValue && options.loadOnDemand && typeof options.loadOnDemand.valueMapper !== "function") { throw new Error("ValueMapper is not provided while the value is being set. See http://docs.telerik.com/kendo-ui/controls/editors/combobox/virtualization#the-valuemapper-function"); } if (hasValue.length) { let index = 0; that.options.loadOnDemand.valueMapper(require_valueMapper.valueMapperOptions(that.options, hasValue, that._useValueMapper.bind(that, hasValue, index))); } }, _useValueMapper: function(data, index, response) { const that = this; const deferred = $.Deferred(); that._deferred = deferred; that._handleValueMapperData(index, response); deferred.done(() => { index++; if (index < data.length) { that._useValueMapper(data, index, response); } }); }, _handleValueMapperData: function(index, data) { const that = this; const response = data[index] instanceof Array ? data[index] : data; if (!response || !response.length) { return; } let idIndex = 0; that._loadItem(response, idIndex); }, _loadItem: function(data, index) { const that = this; const node = that.dataSource.get(data[index]); if (node) { node.load().done(() => { index++; if (index < data.length - 1) { that._loadItem(data, index); } else { that._deferred.resolve(); } }); } }, _getFilter: function(word) { return { field: this.options.dataTextField, operator: this.options.filter, value: word, ignoreCase: this.options.ignoreCase }; }, refresh: function() { var data = this.treeview.dataSource.flatView(); this._renderFooter(); this._renderNoData(); if (this.filterInput && this.checkAll) { this.checkAll.toggle(!this.filterInput.val().length); } this.tree.toggle(!!data.length); $(this.noData).toggle(!data.length); }, setOptions: function(options) { if (this.options.checkboxes != options.checkboxes) { delete options.checkboxes; window.console.warn("setOptions method can not be used to set the checkboxes option in DropDownTree"); } Widget.fn.setOptions.call(this, options); this._setTreeViewOptions(options); this._dataSource(); if (this.options.treeview || options.size) { this.treeview.destroy(); this._treeview(); } if (options.height && this.tree) { this.tree.css("max-height", options.height); } this._header(); this._noData(); this._footer(); this._renderFooter(); this._renderNoData(); if (this.span && (this._isMultipleSelection() || this.span.hasClass("k-readonly"))) { this._placeholder(true); } this._inputTemplate(); this._accessors(); this._filterHeader(); this._checkAll(); this._enable(); if (options && (options.enable || options.enabled)) { this.enable(true); } this._clearButton(); if (options === undefined || options === null) { options = {}; } if (options.label && this._inputLabel) { this.label.setOptions(options.label); } else if (options.label === false) { this.label._unwrapFloating(); this._inputLabel.remove(); delete this._inputLabel; } else if (options.label) { this._label(); } this._aria(); }, destroy: function() { kendo.ui.Widget.fn.destroy.call(this); if (this.treeview) { this.treeview.destroy(); } this.popup.destroy(); this.wrapper.off(ns); this._clear.off(ns); if (this.filterInput) { this.filterInput.off(ns); } if (this.tagList) { this.tagList.off(ns); } if (this.bigScreenMQL) { this.bigScreenMQL.destroy(); } if (this.smallScreenMQL) { this.smallScreenMQL.destroy(); } kendo.unbind(this.tagList); if (this.options.checkAll && this.checkAll) { this.checkAll.off(ns); } if (this._form) { this._form.off("reset", this._resetHandler); } if (this.label) { this.label.destroy(); } }, setValue: function(value) { value = Array.isArray(value) || value instanceof ObservableArray ? value.slice(0) : [value]; this._values = value; }, items: function() { return this.treeview.items(); }, _useValueMapperWithValue: function(value) { const that = this; let values = value instanceof Array ? value : [value]; if (typeof values[0] === "object") { values = that._mapValuesToId(values); } that.requireValueMapper(this.options, values); that._deferred.done(() => { that._selection._setValue(values); }); }, value: function(value) { const that = this; const loadOnDemand = that.options.loadOnDemand; if (value) { if (that.filterInput && that.dataSource._filter) { that._filtering = true; that.dataSource.filter({}); } else if (!that.dataSource.data().length || !that.treeview.dataSource.data().length) { if (!loadOnDemand) { that.treeview.one("loadCompleted", function() { that._selection._setValue(value); }); if (!that.options.autoBind && that.options.valuePrimitive) { that.dataSource.fetch(); } } else if (loadOnDemand.valueMapper) { that.one("dataBound", () => { that._useValueMapperWithValue(value); }); } else { that.dataSource.fetch(function() { that._selection._setValue(value); }); } return; } else if (loadOnDemand && loadOnDemand.valueMapper) { that._useValueMapperWithValue(value); return; } } return that._selection._setValue(value); }, text: function(text) { var loweredText; var ignoreCase = this.options.ignoreCase; text = text === null ? "" : text; if (text !== undefined && !this._isMultipleSelection()) { if (typeof text !== "string") { this._textAccessor(text); return; } loweredText = ignoreCase ? text : text.toLowerCase(); this._selectItemByText(loweredText); this._textAccessor(loweredText); this._refreshFloatingLabel(); } else { return this._textAccessor(); } }, _aria: function() { var input = this.wrapper.find("span.k-input-inner"); this.wrapper.attr({ "aria-haspopup": "tree", "aria-expanded": false, "aria-controls": this.treeview.element.attr("id"), "role": "combobox" }); this._activeId = kendo.guid(); this._ariaLabel(this.wrapper); if (this.filterInput && this.options.filterLabel) { this.filterInput.attr("aria-label", this.options.filterLabel); } if (this.options.checkboxes) { this.wrapper.attr({ "aria-describedby": this.tagList[0].id }); this.tagList.attr({ "role": "listbox", "aria-orientation": "horizontal", "aria-multiselectable": true }); this._ariaLabel(this.tagList); } }, _header: function() { var list = this; var header = $(list.header); var template = list.options.headerTemplate; kendo.destroy(header); header.remove(); if (!template) { list.header = null; return; } var headerTemplate = typeof template !== "function" ? kendo.template(template) : template; header = $(headerTemplate({})); list.header = header[0] ? header : null; list.list.prepend(header); }, _noData: function() { var list = this; var noData = $(list.noData); var template = list.options.noDataTemplate === true ? encode(list.options.messages.noData) : list.options.noDataTemplate; kendo.destroy(noData); noData.remove(); if (!template) { list.noData = null; return; } list.noData = $("<div class=\"k-no-data\"></div>").hide().appendTo(list.list); list.noDataTemplate = typeof template !== "function" ? kendo.template(() => template) : template; }, _renderNoData: function() { var list = this; var noData = list.noData; if (!noData) { return; } noData.html(list.noDataTemplate({ instance: list })); }, _footer: function() { var list = this; var footer = $(list.footer); var template = list.options.footerTemplate; kendo.destroy(footer); footer.remove(); if (!template) { list.footer = null; return; } list.footer = $("<div class=\"k-footer\"></div>").appendTo(list.list); list.footerTemplate = typeof template !== "function" ? kendo.template(template) : template; }, _renderFooter: function() { var list = this; var footer = list.footer; if (!footer) { return; } footer.html(list.footerTemplate({ instance: list })); }, _enable: function() { var that = this, options = that.options, disabled = that.element.is("[disabled]"); if (options.enable !== undefined) { options.enabled = options.enable; } if (!options.enabled || disabled) { that.enable(false); } else { that.readonly(that.element.is("[readonly]")); } }, _adjustListWidth: function() { var that = this, list = that.list, width = list[0].style.width, wrapper = that.wrapper, computedStyle, computedWidth; if (!list.data(WIDTH) && width) { return; } computedStyle = window.getComputedStyle ? window.getComputedStyle(wrapper[0], null) : 0; computedWidth = parseFloat(computedStyle && computedStyle.width) || outerWidth(wrapper); if (computedStyle && browser.msie) { computedWidth += parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight) + parseFloat(computedStyle.borderLeftWidth) + parseFloat(computedStyle.borderRightWidth); } if (list.css("box-sizing") !== "border-box") { width = computedWidth - (outerWidth(list) - list.width()); } else { width = computedWidth; } list.css({ fontFamily: wrapper.css("font-family"), width: that.options.autoWidth ? "auto" : width, minWidth: width, whiteSpace: that.options.autoWidth ? "nowrap" : "normal" }).data(WIDTH, width); return true; }, _reset: function() { var that = this, element = that.element, formId = element.attr("form"), form = formId ? $("#" + formId) : element.closest("form"); if (form[0]) { that._resetHandler = function() { setTimeout(function() { that.value(that._initial); }); }; that._form = form.on("reset", that._resetHandler); } }, _hasActionSheet: function() { return this.options.adaptiveMode === "auto" && !this.bigScreenMQL.mediaQueryList.matches; }, _popup: function() { var that = this; var list = this; if (that.options.checkboxes) { if (that.options.checkAll) { that.list.attr("role", "application"); } that.list.addClass("k-multiselecttree-popup"); } else { that.list.addClass("k-dropdowntree-popup"); } if (list.options.adaptiveMode == "auto" && !list.bigScreenMQL.mediaQueryList.matches) { $(document.body).append(list.list); list.popup = new ui.ActionSheet(list.list, { adaptive: true, hideOverflowContent: true, headerTemplate: (options) => `<div class="k-text-center k-actionsheet-titlebar" >` + "<div class=\"k-actionsheet-titlebar-group k-hbox\">" + `<div class="k-actionsheet-title">` + `<div class="k-text-center">${list.options.adaptiveTitle || (list.label ? list.label.element.text() : list.options.label || list.options.placeholder || "Select")}</div>` + (list.options.adaptiveSubtitle ? `<div class="k-actionsheet-subtitle k-text-center">${list.options.adaptiveSubtitle || ""}</div>` : "") + "</div>" + (options.closeButton ? "<div class=\"k-actionsheet-actions\">" + kendo.html.renderButton(`<button tabindex="-1" ${kendo.attr("ref-actionsheet-close-button")}></button>`, { icon: "check", fillMode: "flat" }) + "</div>" : "") + "</div>" + (this._isFilterEnabled() ? `<div class="k-actionsheet-titlebar-group k-actionsheet-filter"></div>` : "") + "</div>", closeButton: true, focusOnActivate: false, fullscreen: list.smallScreenMQL.mediaQueryList.matches, popup: extend({}, list.options.popup, { anchor: list.wrapper, open: list._openHandler.bind(list), close: list._closeHandler.bind(list), animation: list.options.animation, isRtl: support.isRtl(list.wrapper), autosize: list.options.autoWidth }), deactivate: () => { this._refreshFloatingLabel(); }, activate: () => { this._refreshFloatingLabel(); } }); } else { list.popup = new ui.Popup(list.list, extend({}, list.options.popup, { anchor: list.wrapper, open: list._openHandler.bind(list), close: list._closeHandler.bind(list), animation: list.options.animation, isRtl: support.isRtl(list.wrapper), autosize: list.options.autoWidth, deactivate: () => { this._refreshFloatingLabel(); }, activate: () => { this._refreshFloatingLabel(); } })); list.popup.one("open", list._popupOpen.bind(list)); } }, _allowOpening: function() { return this.options.noDataTemplate || this.treeview.dataSource.flatView().length; }, _placeholder: function(show) { if (this.span) { this.span.toggleClass("k-readonly", show).text(show ? this.options.placeholder : ""); } }, _currentValue: function(dataItem) { var currentValue = this._value(dataItem); if (!currentValue && currentValue !== 0) { currentValue = dataItem; } return currentValue; }, _checkValue: function(dataItem) { var value = ""; var indexOfValue = -1; var currentValue = this.value(); var isMultiple = this.options.tagMode === "multiple"; if (dataItem || dataItem === 0) { if (dataItem.level) { dataItem._level = dataItem.level(); } value = this._currentValue(dataItem); indexOfValue = currentValue.indexOf(value); } if (dataItem.checked) { var alreadyAddedTag = $.grep(this._tags, function(item) { return item.uid === dataItem._tagUid; }); if (alreadyAddedTag.length) { return; } var itemToAdd = new ObservableObject(dataItem.toJSON()); dataItem._tagUid = itemToAdd.uid; this._tags.push(itemToAdd); if (this._tags.length === 1) { this.span.hide(); if (!isMultiple) { this._multipleTags.push(itemToAdd); } } if (indexOfValue === -1) { currentValue.push(value); this.setValue(currentValue); } } else { var itemToRemove = this._tags.find(function(item) { return item.uid === dataItem._tagUid; }); var idx = this._tags.indexOf(itemToRemove); if (idx !== -1) { this._tags.splice(idx, 1); } else { this._treeViewCheckAllCheck(dataItem); return; } if (this._tags.length === 0) { this.span.show(); if (!isMultiple) { this._multipleTags.splice(0, 1); } } if (indexOfValue !== -1) { currentValue.splice(indexOfValue, 1); this.setValue(currentValue); } } this._treeViewCheckAllCheck(dataItem); if (!this._preventChangeTrigger && !this._valueMethodCalled && !this.dataSource._requestInProgress) { this.trigger(CHANGE); } if (this.options.autoClose && this.popup.visible()) { this.close(); this.wrapper.trigger("focus"); } this.popup.position(); this._toggleCloseVisibility(); this._updateSelectedOptions(); }, _updateSelectedOptions: function() { if (this.element[0].tagName.toLowerCase() !== "select") { return; } var selectedItems = this._tags; var options = ""; var dataItem = null; var value = null; if (selectedItems.length) { for (var idx = 0; idx < selectedItems.length; idx++) { dataItem = selectedItems[idx]; value = this._value(dataItem); options += this._option(value, this._text(dataItem), true); } } this.element.html(options); }, _option: function(dataValue, dataText, selected) { var option = "<option"; if (dataValue !== undefined) { dataValue += ""; if (dataValue.indexOf("\"") !== -1) { dataValue = dataValue.replace(quotRegExp, "&quot;"); } option += " value=\"" + dataValue + "\""; } if (selected) { option += " selected"; } option += ">"; if (dataText !== undefined) { option += kendo.htmlEncode(dataText); } return option += "</option>"; }, _selectValue: function(dataItem) { var value = ""; var text = ""; if (dataItem || dataItem === 0) { if (dataItem.level) { dataItem._level = dataItem.level(); } text = this._text(dataItem) || dataItem; value = this._currentValue(dataItem); } if (value === null) { value = ""; } this.setValue(value); this._textAccessor(text, dataItem); this._accessor(value); if (!this._preventChangeTrigger && !this._valueMethodCalled) { this.trigger(CHANGE); } this._valueMethodCalled = false; if (this.options.autoClose && this.popup.visible()) { this.close(); this.wrapper.trigger("focus"); } this.popup.position(); this._toggleCloseVisibility(); }, _clearClick: function(e) { e.stopPropagation(); this.wrapper.trigger("focus"); this._clearTextAndValue(); }, _clearTextAndValue: function() { var shouldTrigger = this._selection._clearValue(); this.setValue([]); this._clearInput(); this._clearText(); this.popup.position(); this._toggleCloseVisibility(); this._refreshFloatingLabel(); if (shouldTrigger) { this.trigger(CHANGE); } }, _clearText: function() { if (this.options.placeholder) { this._placeholder(true); } else { if (this.span) { this.span.html(""); } } }, _inputTemplate: function() { var template = this.options.valueTemplate; if (!template) { template = (data) => encode(this._text(data)); } else { template = kendo.template(template); } this.valueTemplate = template; }, _assignInstance: function(text, value) { var dataTextField = this.options.dataTextField; var dataItem = {}; if (dataTextField) { assign(dataItem, dataTextField.split(DOT), text); assign(dataItem, this.options.dataValueField.split(DOT), value); dataItem = new ObservableObject(dataItem); } else { dataItem = text; } return dataItem; }, _textAccessor: function(text, dataItem) { var valueTemplate = this.valueTemplate; var span = this.span; if (text === undefined) { return span.text(); } span.removeClass("k-readonly"); if (!dataItem && ($.isPlainObject(text) || text instanceof ObservableObject)) { dataItem = text; } if (!dataItem) { dataItem = this._assignInstance(text, this._accessor()); } var getElements = function() { return { elements: span.get(), data: [{ dataItem }] }; }; try { span.html(valueTemplate(dataItem)); } catch (e) { if (span) { span.html(""); } } }, _accessors: function() { var element = this.element; var options = this.options; var textField = element.attr(kendo.attr("text-field")); var valueField = element.attr(kendo.attr("value-field")); if (!options.dataTextField && textField) { options.dataTextField = textField; } if (!options.dataValueField && valueField) { options.dataValueField = valueField; } options.dataTextField = options.dataTextField || "text"; options.dataValueField = options.dataValueField || "value"; this._text = getterFunction(options.dataTextField); this._value = getterFunction(options.dataValueField); }, _accessor: function(value, idx) { return this._accessorInput(value, idx); }, _accessorInput: function(value) { var element = this.element[0]; if (value === undefined) { return element.value; } else { if (value === null) { value = ""; } element.value = value; } }, _clearInput: function() { var element = this.element[0]; element.value = ""; }, _clearButton: function() { var clearTitle = encode(this.options.messages.clear); if (!this._clear) { this._clear = $("<span unselectable=\"on\" class=\"k-clear-value\" title=\"" + clearTitle + "\">" + kendo.ui.icon("x") + "</span>").attr({ "tabIndex": -1 }); } if (this.options.clearButton) { this._clear.insertAfter(this.span.parent()); } else { if (!this.options.clearButton) { this._clear.remove(); } } }, _toggleCloseVisibility: function() { var isReadOnly = this.element.attr(READONLY); var hasValue = this.value() && !this._isMultipleSelection() || this.value().length; var valueDoesNotEqualPlaceHolder = this.element.val() && this.element.val() !== this.options.placeholder; if (!isReadOnly && (hasValue || valueDoesNotEqualPlaceHolder)) { this._showClear(); } else { this._hideClear(); } }, _showClear: function() { if (this._clear) { this._clear.removeClass(HIDDENCLASS); } }, _hideClear: function() { if (this._clear) { this._clear.addClass(HIDDENCLASS); } }, _openHandler: function(e) { this._adjustListWidth(); if (this.trigger(OPEN)) { e.preventDefault(); } else { this.wrapper.attr("aria-expanded", true); this.tree.attr("aria-hidden", false); } }, _closeHandler: function(e) { if (this.trigger(CLOSE)) { e.preventDefault(); } else { this.wrapper.attr("aria-expanded", false); this.tree.attr("aria-hidden", true); } }, _treeview: function() { var that = this; if (that.options.adaptiveMode != "auto" && that.options.height) { that.tree.css("max-height", that.options.height); } that.tree.attr("id", kendo.guid()); that.treeview = new TreeView(that.tree, extend({ size: that.options.size }, that.options.treeview), that); that.dataSource = that.treeview.dataSource; that.treeview.bind("select", function(e) { that.trigger("select", e); }); that.treeview.bind("expand", function() { if (that.options.autoWidth && that.popup && that.popup.visible()) { setTimeout(function() { that.popup.position(); }, (that.treeview.options?.animation?.expand || {}).duration || 0); } }); that.treeview.bind("collapse", function() { if (that.options.autoWidth && that.popup && that.popup.visible()) { setTimeout(function() { that.popup.position(); }, (that.treeview.options?.animation?.collapse || {}).duration || 0); } }); }, _treeViewDataBound: function(e) { if (e.node && this._prev && this._prev.length) { e.sender.expand(e.node); } if (this._filtering) { if (!e.node) { this._filtering = false; } if (!this._isMultipleSelection()) { this._deselectItem(e); } return; } if (!this.treeview) { this.treeview = e.sender; } if (!e.node) { var rootItems = e.sender.dataSource.data(); this._checkLoadedItems(rootItems); } else { var rootItem = e.sender.dataItem(e.node); if (rootItem) { var subItems = rootItem.children.data(); this._checkLoadedItems(subItems); } } this.trigger("dataBound", e); }, _deselectItem: function(e) { var items = []; if (!e.node) { items = e.sender.dataSource.data(); } else { var rootItem = e.sender.dataItem(e.node); if (rootItem) { items = rootItem.children.data(); } } for (var i = 0; i < items.length; i++) { if (items[i].selected && !this._valueComparer(items[i], this.value())) { items[i].set("selected", false); } } }, _checkLoadedItems: function(items) { var value = this.value(); if (!items) { return; } for (var idx = 0; idx < items.length; idx++) { this._selection._checkLoadedItem(items[idx], value); } }, _treeViewCheckAllCheck: function(dataItem) { if (this.options.checkAll && this.checkAll) { this._getAllChecked(); if (dataItem.checked) { this._checkCheckAll(); } else { this._uncheckCheckAll(); } } }, _checkCheckAll: function() { var checkAllCheckbox = this.checkAll.find(".k-checkbox"); if (this._allItemsAreChecked) { checkAllCheckbox.prop("checked", true).prop("indeterminate", false); } else { checkAllCheckbox.prop("indeterminate", true); } }, _uncheckCheckAll: function() { var checkAllCheckbox = this.checkAll.find(".k-checkbox"); if (this._allItemsAreUnchecked) { checkAllCheckbox.prop("checked", false).prop("indeterminate", false); } else { checkAllCheckbox.prop("indeterminate", true); } }, _filterHeader: function() { var filterTemplate = "<div class=\"k-list-filter\">" + "<span class=\"k-textbox k-input\" type=\"text\" autocomplete=\"off\">" + kendo.ui.icon({ icon: "search", iconClass: "k-input-icon" }) + "</span>" + "</div>"; if (this.filterInput) { this.filterInput.off(ns).parent().remove(); this.filterInput = null; } if (this._isFilterEnabled()) { this._disableCheckChildren(); this.filterInput = $("<input class=\"k-input-inner\" type=\"text\" />").attr({ placeholder: this.element.attr("placeholder") || this.options.messages.filterInputPlaceholder, title: this.element.attr("title"), role: "searchbox", "aria-haspopup": "tree", "aria-autocomplete": "list" }); this.filterInput.on("input", this._filterChange.bind(this)); if (this._hasActionSheet()) { $(filterTemplate).appendTo(this.popup.wrapper.find(".k-actionsheet-filter")).find(".k-textbox").append(this.filterInput); } else { $(filterTemplate).insertBefore(this.tree).find(".k-textbox").append(this.filterInput); } } }, _filterChange: function() { if (this.filterInput) { this._search(); } }, _disableCheckChildren: function() { if (this._isMultipleSelection() && this.options.treeview.checkboxes && this.options.treeview.checkboxes.checkChildren) { this.options.treeview.checkboxes.checkChildren = false; } }, _checkAll: function() { if (this.checkAll) { this.checkAll.find(".k-checkbox-label, .k-checkbox").off(ns); this.checkAll.remove(); this.checkAll = null; } if (this._isMultipleSelection() && this.options.checkAll) { var checkAllCheckbox = html.renderCheckBox(extend({}, this.options, { label: "Check All" })); this.checkAll = $("<div class=\"k-check-all\">" + checkAllCheckbox + "</div>").insertBefore(this.tree); this.checkAll.find(".k-checkbox-label").html(kendo.template(this.options.checkAllTemplate)({ instance: this })); this.checkAll.find(".k-checkbox").on("change" + ns, this._changeCheckAll.bind(this)).on("keydown" + ns, this._keydownCheckAll.bind(this)); this._disabledCheckedItems = []; this._disabledUnCheckedItems = []; this._getAllChecked(); if (!this._allItemsAreUnchecked) { this._checkCheckAll(); } } }, _changeCheckAll: function() { var checkAllCheckbox = this.checkAll.find(".k-checkbox"); var isChecked = checkAllCheckbox.prop("checked"); this._updateCheckAll(isChecked); }, _updateCheckAll: function(isChecked) { var checkAllCheckbox = this.checkAll.find(".k-checkbox"); this._toggleCheckAllItems(isChecked); checkAllCheckbox.prop("checked", isChecked); if (this._disabledCheckedItems.length && this._disabledUnCheckedItems.length) { checkAllCheckbox.prop("indeterminate", true); } else if (this._disabledCheckedItems.length) { checkAllCheckbox.prop("indeterminate", !isChecked); } else if (this._disabledUnCheckedItems.length) { checkAllCheckbox.prop("indeterminate", isChecked); } else { checkAllCheckbox.prop("indeterminate", false); } this._disabledCheckedItems = []; this._disabledUnCheckedItems = []; }, _keydownCheckAll: function(e) { var key = e.keyCode; var altKey = e.altKey; if (altKey && key === keys.UP || key === keys.ESC || key === keys.TAB) { this.close(); this.wrapper.trigger("focus"); e.preventDefault(); return; } if (key === keys.UP) { if (this.filterInput) { this.filterInput.trigger("focus"); } else { this.wrapper.trigger("focus"); } e.preventDefault(); } if (key === keys.DOWN) { if (this.tree && this.tree.is(":visible")) { this.tree.trigger("focus"); } e.preventDefault(); } if (key === keys.SPACEBAR && (browser.msie || browser.edge)) { this._clickCheckAll(); e.preventDefault(); } }, _clickCheckAll: function() { var checkAllCheckbox = this.checkAll.find(".k-checkbox"); var isChecked = checkAllCheckbox.prop("checked"); this._updateCheckAll(!isChecked); checkAllCheckbox.trigger("focus"); }, _dfs: function(items, action, prop) { for (var idx = 0; idx < items.length; idx++) { if (!this[action](items[idx], prop)) { break; } this._traverceChildren(items[idx], action, prop); } }, _uncheckItemByUid: function(uid) { this._dfs(this.dataSource.data(), "_uncheckItemEqualsUid", uid); }, _uncheckItemEqualsUid: function(item, uid) { if (item.enabled !== false && item._tagUid == uid) { item.set("checked", false); return false; } return true; }, _selectItemByText: function(text) { this._dfs(this.dataSource.data(), "_itemEqualsText", text); }, _itemEqualsText: function(item, text) { if (item.enabled !== false && this._text(item) === text) { this.treeview.select(this.treeview.findByUid(item.uid)); this._selectValue(item); return false; } return true; }, _selectItemByValue: function(value) { this._dfs(this.dataSource.data(), "_itemEqualsValue", value); }, _itemEqualsValue: function(item, value) { if (item.enabled !== false && this._valueComparer(item, value)) { this.treeview.select(this.treeview.findByUid(item.uid)); return false; } return true; }, _checkItemByValue: function(value) { var items = this.treeview.dataItems(); for (var idx = 0; idx < value.length; idx++) { this._dfs(items, "_checkItemEqualsValue", value[idx]); } }, _checkItemEqualsValue: function(item, value) { if (item.enabled !== false && this._valueComparer(item, value)) { item.set("checked", true); return false; } return true; }, _valueComparer: function(item, value) { var itemValue = this._value(item); var itemText; if (!this._isNullorUndefined(itemValue)) { if (this._isNullorUndefined(value)) { return false; } var newValue = this._value(value); if (newValue) { return itemValue == newValue; } else { return itemValue == value; } } itemText = this._text(item); if (itemText) { if (this._text(value)) { return itemText == this._text(value); } else { return itemText == value; } } return false; }, _isNullorUndefined: function(value) { return value === undefined || value === null; }, _getAllChecked: function() { this._allCheckedItems = []; this._allItemsAreChecked = true; this._allItemsAreUnchecked = true; this._dfs(this.dataSource.data(), "_getAllCheckedItems"); return this._allCheckedItems; }, _getAllCheckedItems: function(item) { if (this._allItemsAreChecked) { this._allItemsAreChecked = item.checked; } if (this._allItemsAreUnchecked) { this._allItemsAreUnchecked = !item.checked; } if (item.checked) { this._allCheckedItems.push(item); } return true; }, _traverceChildren: function(item, action, prop) { var childrenField = it