@syncfusion/ej2-dropdowns 25.2.7-130084 → 26.1.35-7502

package/src/drop-down-base/drop-down-base.js

@@ -44,6 +44,9 @@ var FieldSettings = /** @class */ (function (_super) {
     __decorate([
         Property()
     ], FieldSettings.prototype, "htmlAttributes", void 0);
+    __decorate([
+        Property()
+    ], FieldSettings.prototype, "disabled", void 0);
     return FieldSettings;
 }(ChildProperty));
 export { FieldSettings };
@@ -87,7 +90,6 @@ var DropDownBase = /** @class */ (function (_super) {
     function DropDownBase(options, element) {
         var _this = _super.call(this, options, element) || this;
         _this.preventChange = false;
-        _this.isAngular = false;
         _this.isPreventChange = false;
         _this.isDynamicDataChange = false;
         _this.addedNewItem = false;
@@ -298,7 +300,7 @@ var DropDownBase = /** @class */ (function (_super) {
     };
     DropDownBase.prototype.l10nUpdate = function (actionFailure) {
         var ele = this.getModuleName() === 'listbox' ? this.ulElement : this.list;
-        if (this.noRecordsTemplate !== 'No records found' || this.actionFailureTemplate !== 'Request failed') {
+        if ((!isNullOrUndefined(this.noRecordsTemplate) && this.noRecordsTemplate !== 'No records found') || this.actionFailureTemplate !== 'Request failed') {
             var template = actionFailure ? this.actionFailureTemplate : this.noRecordsTemplate;
             var compiledString = void 0;
             var templateId = actionFailure ? this.actionFailureTemplateId : this.noRecordsTemplateId;
@@ -460,7 +462,7 @@ var DropDownBase = /** @class */ (function (_super) {
     DropDownBase.prototype.getTransformValues = function () {
         var translateY = this.viewPortInfo.startIndex * this.listItemHeight;
         translateY = translateY - (this.skeletonCount * this.listItemHeight);
-        translateY = this.viewPortInfo.startIndex === 0 && this.listData && this.listData.length === 0 ? 0 : translateY;
+        translateY = ((this.viewPortInfo.startIndex === 0 && this.listData && this.listData.length === 0) || this.skeletonCount === 0) ? 0 : translateY;
         var styleText = "transform: translate(0px, " + translateY + "px);";
         return styleText;
     };
@@ -605,17 +607,18 @@ var DropDownBase = /** @class */ (function (_super) {
             }
             element.querySelectorAll('select>option');
         }
-        this.updateFields(fields.text, fields.value, this.fields.groupBy, this.fields.htmlAttributes, this.fields.iconCss);
+        this.updateFields(fields.text, fields.value, this.fields.groupBy, this.fields.htmlAttributes, this.fields.iconCss, this.fields.disabled);
         this.resetList(jsonElement, fields);
     };
-    DropDownBase.prototype.updateFields = function (text, value, groupBy, htmlAttributes, iconCss) {
+    DropDownBase.prototype.updateFields = function (text, value, groupBy, htmlAttributes, iconCss, disabled) {
         var field = {
             'fields': {
                 text: text,
                 value: value,
                 groupBy: !isNullOrUndefined(groupBy) ? groupBy : this.fields && this.fields.groupBy,
                 htmlAttributes: !isNullOrUndefined(htmlAttributes) ? htmlAttributes : this.fields && this.fields.htmlAttributes,
-                iconCss: !isNullOrUndefined(iconCss) ? iconCss : this.fields && this.fields.iconCss
+                iconCss: !isNullOrUndefined(iconCss) ? iconCss : this.fields && this.fields.iconCss,
+                disabled: !isNullOrUndefined(disabled) ? disabled : this.fields && this.fields.disabled
             }
         };
         this.setProperties(field, true);
@@ -986,8 +989,16 @@ var DropDownBase = /** @class */ (function (_super) {
     };
     /* eslint-disable @typescript-eslint/no-unused-vars */
     DropDownBase.prototype.postRender = function (listElement, list, bindEvent) {
+        if (this.fields.disabled) {
+            var liCollections = listElement.querySelectorAll('.' + dropDownBaseClasses.li);
+            for (var index = 0; index < liCollections.length; index++) {
+                if (JSON.parse(JSON.stringify(this.listData[index]))[this.fields.disabled]) {
+                    this.disableListItem(liCollections[index]);
+                }
+            }
+        }
         /* eslint-enable @typescript-eslint/no-unused-vars */
-        var focusItem = listElement.querySelector('.' + dropDownBaseClasses.li);
+        var focusItem = this.fields.disabled ? listElement.querySelector('.' + dropDownBaseClasses.li + ':not(.e-disabled') : listElement.querySelector('.' + dropDownBaseClasses.li);
         var selectedItem = listElement.querySelector('.' + dropDownBaseClasses.selected);
         if (focusItem && !selectedItem) {
             focusItem.classList.add(dropDownBaseClasses.focus);
@@ -1341,7 +1352,13 @@ var DropDownBase = /** @class */ (function (_super) {
      */
     DropDownBase.prototype.getIndexByValue = function (value) {
         var index;
-        var listItems = this.getItems();
+        var listItems = [];
+        if (this.fields.disabled && this.getModuleName() === 'multiselect' && this.liCollections) {
+            listItems = this.liCollections;
+        }
+        else {
+            listItems = this.getItems();
+        }
         for (var i = 0; i < listItems.length; i++) {
             if (!isNullOrUndefined(value) && listItems[i].getAttribute('data-value') === value.toString()) {
                 index = i;
@@ -1575,7 +1592,7 @@ var DropDownBase = /** @class */ (function (_super) {
      * @param { Object[] } items - Specifies an array of JSON data or a JSON data.
      * @param { number } itemIndex - Specifies the index to place the newly added item in the popup list.
      * @returns {void}
-     * @deprecated
+
      */
     DropDownBase.prototype.addItem = function (items, itemIndex) {
         if (!this.list || (this.list.textContent === this.noRecordsTemplate && this.getModuleName() !== 'listbox')) {
@@ -1630,6 +1647,9 @@ var DropDownBase = /** @class */ (function (_super) {
             this.notify('addItem', { module: 'CheckBoxSelection', item: li });
             liCollections.push(li);
             if (this.getModuleName() === 'listbox') {
+                if (item.disabled) {
+                    li.classList.add('e-disabled');
+                }
                 this.listData.splice(isListboxEmpty ? this.listData.length : index, 0, item);
                 if (this.listData.length !== this.sortedData.length) {
                     this.sortedData = this.listData;
@@ -1715,6 +1735,41 @@ var DropDownBase = /** @class */ (function (_super) {
         }
         this.addedNewItem = true;
     };
+    /**
+     * Checks if the given HTML element is disabled.
+     *
+     * @param {HTMLElement} li - The HTML element to check.
+     * @returns {boolean} - Returns true if the element is disabled, otherwise false.
+     */
+    DropDownBase.prototype.isDisabledElement = function (li) {
+        if (li && li.classList.contains('e-disabled')) {
+            return true;
+        }
+        return false;
+    };
+    /**
+     * Checks whether the list item at the specified index is disabled.
+     *
+     * @param {number} index - The index of the list item to check.
+     * @returns {boolean} True if the list item is disabled, false otherwise.
+     */
+    DropDownBase.prototype.isDisabledItemByIndex = function (index) {
+        if (this.fields.disabled && this.liCollections) {
+            return this.isDisabledElement(this.liCollections[index]);
+        }
+        return false;
+    };
+    /**
+     * Disables the given list item.
+     *
+     * @param { HTMLLIElement } li - The list item to disable.
+     * @returns {void}
+     */
+    DropDownBase.prototype.disableListItem = function (li) {
+        li.classList.add('e-disabled');
+        li.setAttribute('aria-disabled', 'true');
+        li.setAttribute('aria-selected', 'false');
+    };
     DropDownBase.prototype.validationAttribute = function (target, hidden) {
         var name = target.getAttribute('name') ? target.getAttribute('name') : target.getAttribute('id');
         hidden.setAttribute('name', name);
@@ -1798,7 +1853,7 @@ var DropDownBase = /** @class */ (function (_super) {
         _super.prototype.destroy.call(this);
     };
     __decorate([
-        Complex({ text: null, value: null, iconCss: null, groupBy: null }, FieldSettings)
+        Complex({ text: null, value: null, iconCss: null, groupBy: null, disabled: null }, FieldSettings)
     ], DropDownBase.prototype, "fields", void 0);
     __decorate([
         Property(null)

package/src/drop-down-list/drop-down-list-model.d.ts

@@ -27,7 +27,7 @@ export interface DropDownListModel extends DropDownBaseModel{
      * Specifies a value that indicates whether the component is enabled or not.
      *
      * @default true
-     * @deprecated
+
      */
     enabled?: boolean;
 
@@ -37,7 +37,7 @@ export interface DropDownListModel extends DropDownBaseModel{
      * 1. value
      *
      * @default false
-     * @deprecated
+
      */
     enablePersistence?: boolean;
 
@@ -93,7 +93,7 @@ export interface DropDownListModel extends DropDownBaseModel{
      * {% codeBlock src='dropdownlist/query/index.md' %}{% endcodeBlock %}
      *
      * @default null
-     * @deprecated
+
      */
     query?: Query;
 

package/src/drop-down-list/drop-down-list.d.ts

@@ -104,7 +104,6 @@ export declare class DropDownList extends DropDownBase implements IInput {
     private isSecondClick;
     protected isListSearched: boolean;
     protected preventChange: boolean;
-    protected isAngular: boolean;
     protected selectedElementID: string;
     private preselectedIndex;
     private isTouched;
@@ -127,7 +126,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
      * Specifies a value that indicates whether the component is enabled or not.
      *
      * @default true
-     * @deprecated
+
      */
     enabled: boolean;
     /**
@@ -136,7 +135,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
      * 1. value
      *
      * @default false
-     * @deprecated
+
      */
     enablePersistence: boolean;
     /**
@@ -188,7 +187,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
      * {% codeBlock src='dropdownlist/query/index.md' %}{% endcodeBlock %}
      *
      * @default null
-     * @deprecated
+
      */
     query: Query;
     /**
@@ -391,6 +390,13 @@ export declare class DropDownList extends DropDownBase implements IInput {
     protected getElementByText(text: string): Element;
     protected getElementByValue(value: string | number | boolean | object): Element;
     private initValue;
+    /**
+     * Checks if the given value is disabled.
+     *
+     * @param { string | number | boolean | object } value - The value to check for disablement. Can be a string, number, boolean, or object.
+     * @returns { boolean } A boolean indicating whether the value is disabled.
+     */
+    protected isDisableItemValue(value: string | number | boolean | object): boolean;
     protected updateValues(): void;
     protected onBlurHandler(e: MouseEvent): void;
     protected focusOutAction(e?: MouseEvent | KeyboardEventArgs): void;
@@ -498,7 +504,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
      * @param {Query} query - Specify the query to filter the data.
      * @param {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
      * @returns {void}
-     * @deprecated
+
      */
     filter(dataSource: {
         [key: string]: Object;
@@ -620,6 +626,14 @@ export declare class DropDownList extends DropDownBase implements IInput {
      * @returns {void}
      */
     focusOut(e?: MouseEvent | KeyboardEventArgs): void;
+    /**
+     * Method to disable specific item in the popup.
+     *
+     * @param {string | number | object | HTMLLIElement} item - Specifies the item to be disabled.
+     * @returns {void}
+
+     */
+    disableItem(item: string | number | object | HTMLLIElement): void;
     /**
      * Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.
      *

package/src/drop-down-list/drop-down-list.js

@@ -88,7 +88,6 @@ var DropDownList = /** @class */ (function (_super) {
         var _this = _super.call(this, options, element) || this;
         _this.isListSearched = false;
         _this.preventChange = false;
-        _this.isAngular = false;
         _this.isTouched = false;
         _this.IsScrollerAtEnd = function () {
             return this.list && this.list.scrollTop + this.list.clientHeight >= this.list.scrollHeight;
@@ -213,7 +212,7 @@ var DropDownList = /** @class */ (function (_super) {
         this.removeFocus();
         this.list.scrollTop = 0;
         if (this.getModuleName() !== 'autocomplete' && !isNullOrUndefined(this.ulElement)) {
-            var li = this.ulElement.querySelector('.' + dropDownListClasses.li);
+            var li = this.fields.disabled ? this.ulElement.querySelector('.' + dropDownListClasses.li + ':not(.e-disabled)') : this.ulElement.querySelector('.' + dropDownListClasses.li);
             if (this.enableVirtualization) {
                 li = this.liCollections[this.skeletonCount];
             }
@@ -418,7 +417,32 @@ var DropDownList = /** @class */ (function (_super) {
             this.updateValues();
         }
     };
+    /**
+     * Checks if the given value is disabled.
+     *
+     * @param { string | number | boolean | object } value - The value to check for disablement. Can be a string, number, boolean, or object.
+     * @returns { boolean } A boolean indicating whether the value is disabled.
+     */
+    DropDownList.prototype.isDisableItemValue = function (value) {
+        if (typeof (value) === 'object') {
+            var objectValue = JSON.parse(JSON.stringify(value))[this.fields.value];
+            return this.isDisabledItemByIndex(this.getIndexByValue(objectValue));
+        }
+        return this.isDisabledItemByIndex(this.getIndexByValue(value));
+    };
     DropDownList.prototype.updateValues = function () {
+        if (this.fields.disabled) {
+            if (this.value != null) {
+                this.value = !this.isDisableItemValue(this.value) ? this.value : null;
+            }
+            if (this.text != null) {
+                this.text = !this.isDisabledItemByIndex(this.getIndexByValue(this.getValueByText(this.text))) ? this.text : null;
+            }
+            if (this.index != null) {
+                this.index = !this.isDisabledItemByIndex(this.index) ? this.index : null;
+                this.activeIndex = this.index;
+            }
+        }
         this.selectedValueInfo = this.viewPortInfo;
         if (!isNullOrUndefined(this.value)) {
             var value = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue(((this.fields.value) ? this.fields.value : ''), this.value) : this.value;
@@ -611,7 +635,7 @@ var DropDownList = /** @class */ (function (_super) {
         var target = e.target;
         this.keyboardEvent = null;
         var li = closest(target, '.' + dropDownBaseClasses.li);
-        if (!this.isValidLI(li)) {
+        if (!this.isValidLI(li) || this.isDisabledElement(li)) {
             return;
         }
         this.setSelection(li, e);
@@ -755,7 +779,14 @@ var DropDownList = /** @class */ (function (_super) {
                 }
             }
             else {
-                var li = incrementalSearch(e.charCode, this.liCollections, this.activeIndex, true, this.element.id);
+                var li = void 0;
+                if (this.fields.disabled) {
+                    var enableLiCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li + ':not(.e-disabled)');
+                    li = incrementalSearch(e.charCode, enableLiCollections, this.activeIndex, true, this.element.id);
+                }
+                else {
+                    li = incrementalSearch(e.charCode, this.liCollections, this.activeIndex, true, this.element.id);
+                }
                 if (!isNullOrUndefined(li)) {
                     this.setSelection(li, e);
                     this.setScrollPosition();
@@ -885,6 +916,9 @@ var DropDownList = /** @class */ (function (_super) {
         }
     };
     DropDownList.prototype.updateUpDownAction = function (e, isVirtualKeyAction) {
+        if (this.fields.disabled && this.list && this.list.querySelectorAll('.e-list-item:not(.e-disabled)').length === 0) {
+            return;
+        }
         if (this.allowFiltering && !this.enableVirtualization && this.getModuleName() !== 'autocomplete') {
             var value_1 = this.getItemData().value;
             if (isNullOrUndefined(value_1)) {
@@ -995,6 +1029,25 @@ var DropDownList = /** @class */ (function (_super) {
                 attributes(this.filterInput, { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-active')[0].id });
             }
         }
+        var itemIndex;
+        for (var index = 0; index < this.liCollections.length; index++) {
+            if (this.liCollections[index].classList.contains(dropDownListClasses.focus)
+                || this.liCollections[index].classList.contains(dropDownListClasses.selected)) {
+                itemIndex = index;
+                break;
+            }
+        }
+        if (itemIndex != null && this.isDisabledElement(this.liCollections[itemIndex])) {
+            if (this.getModuleName() !== 'autocomplete') {
+                if (this.liCollections.length - 1 === itemIndex && e.action === 'down') {
+                    e.action = 'up';
+                }
+                if (itemIndex === 0 && e.action === 'up') {
+                    e.action = 'down';
+                }
+            }
+            this.updateUpDownAction(e);
+        }
         e.preventDefault();
     };
     DropDownList.prototype.updateHomeEndAction = function (e, isVirtualKeyAction) {
@@ -1095,6 +1148,9 @@ var DropDownList = /** @class */ (function (_super) {
     DropDownList.prototype.selectCurrentItem = function (e) {
         if (this.isPopupOpen) {
             var li = this.list.querySelector('.' + dropDownListClasses.focus);
+            if (this.isDisabledElement(li)) {
+                return;
+            }
             if (li) {
                 this.setSelection(li, e);
                 this.isTyped = false;
@@ -1864,7 +1920,7 @@ var DropDownList = /** @class */ (function (_super) {
      * @param {Query} query - Specify the query to filter the data.
      * @param {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
      * @returns {void}
-     * @deprecated
+
      */
     DropDownList.prototype.filter = function (dataSource, query, fields) {
         this.isCustomFilter = true;
@@ -3356,6 +3412,10 @@ var DropDownList = /** @class */ (function (_super) {
                     this_1.setEnable();
                     break;
                 case 'text':
+                    if (this_1.fields.disabled) {
+                        newProp.text = newProp.text && !this_1.isDisabledItemByIndex(this_1.getIndexByValue(this_1.getValueByText(newProp.text)))
+                            ? newProp.text : null;
+                    }
                     if (newProp.text === null) {
                         this_1.clearAll();
                         break;
@@ -3407,6 +3467,9 @@ var DropDownList = /** @class */ (function (_super) {
                     }
                     break;
                 case 'value':
+                    if (this_1.fields.disabled) {
+                        newProp.value = newProp.value != null && !this_1.isDisableItemValue(newProp.value) ? newProp.value : null;
+                    }
                     if (newProp.value === null) {
                         this_1.clearAll();
                         break;
@@ -3466,6 +3529,9 @@ var DropDownList = /** @class */ (function (_super) {
                     }
                     break;
                 case 'index':
+                    if (this_1.fields.disabled) {
+                        newProp.index = newProp.index != null && !this_1.isDisabledItemByIndex(newProp.index) ? newProp.index : null;
+                    }
                     if (newProp.index === null) {
                         this_1.clearAll();
                         break;
@@ -3783,6 +3849,65 @@ var DropDownList = /** @class */ (function (_super) {
             Input.calculateWidth(this.inputElement, this.inputWrapper.container);
         }
     };
+    /**
+     * Method to disable specific item in the popup.
+     *
+     * @param {string | number | object | HTMLLIElement} item - Specifies the item to be disabled.
+     * @returns {void}
+
+     */
+    DropDownList.prototype.disableItem = function (item) {
+        if (this.fields.disabled) {
+            if (!this.list) {
+                this.renderList();
+            }
+            var itemIndex = -1;
+            if (this.liCollections && this.liCollections.length > 0 && this.listData && this.fields.disabled) {
+                if (typeof (item) === 'string') {
+                    itemIndex = this.getIndexByValue(item);
+                }
+                else if (typeof item === 'object') {
+                    if (item instanceof HTMLLIElement) {
+                        for (var index = 0; index < this.liCollections.length; index++) {
+                            if (this.liCollections[index] === item) {
+                                itemIndex = this.getIndexByValue(item.getAttribute('data-value'));
+                                break;
+                            }
+                        }
+                    }
+                    else {
+                        var value = JSON.parse(JSON.stringify(item))[this.fields.value];
+                        for (var index = 0; index < this.listData.length; index++) {
+                            if (JSON.parse(JSON.stringify(this.listData[index]))[this.fields.value] === value) {
+                                itemIndex = this.getIndexByValue(value);
+                                break;
+                            }
+                        }
+                    }
+                }
+                else {
+                    itemIndex = item;
+                }
+                var isValidIndex = itemIndex < this.liCollections.length && itemIndex > -1;
+                if (isValidIndex && !(JSON.parse(JSON.stringify(this.listData[itemIndex]))[this.fields.disabled])) {
+                    var li = this.liCollections[itemIndex];
+                    if (li) {
+                        this.disableListItem(li);
+                        var parsedData = JSON.parse(JSON.stringify(this.listData[itemIndex]));
+                        parsedData[this.fields.disabled] = true;
+                        this.listData[itemIndex] = parsedData;
+                        this.dataSource = this.listData;
+                        if (li.classList.contains(dropDownListClasses.focus)) {
+                            this.removeFocus();
+                        }
+                        if (li.classList.contains(dropDownListClasses.selected)) {
+                            this.clear();
+                        }
+                    }
+                }
+            }
+        }
+    };
     /**
      * Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.
      *

package/src/drop-down-tree/drop-down-tree-model.d.ts

@@ -1,4 +1,4 @@
-import { Input, InputObject, FloatLabelType, TextBox, InputEventArgs } from '@syncfusion/ej2-inputs';import { createCheckBox } from '@syncfusion/ej2-buttons';import { NotifyPropertyChanges, INotifyPropertyChanged, Property, Event, EmitType, SanitizeHtmlHelper } from '@syncfusion/ej2-base';import { Component, EventHandler, attributes, formatUnit, ChildProperty, remove, L10n, extend } from '@syncfusion/ej2-base';import { addClass, removeClass, detach, prepend, Complex, closest, setValue, getValue, compile, append } from '@syncfusion/ej2-base';import { select, selectAll, isNullOrUndefined as isNOU, matches, Browser, KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';import { DataManager, Query, DataUtil } from '@syncfusion/ej2-data';import { Popup } from '@syncfusion/ej2-popups';import { TreeView, NodeSelectEventArgs, DataBoundEventArgs, FieldsSettingsModel, NodeClickEventArgs, NodeExpandEventArgs } from '@syncfusion/ej2-navigations';import { NodeCheckEventArgs, FailureEventArgs} from '@syncfusion/ej2-navigations';
+import { Input, InputObject, FloatLabelType, TextBox, InputEventArgs } from '@syncfusion/ej2-inputs';import { createCheckBox } from '@syncfusion/ej2-buttons';import { NotifyPropertyChanges, INotifyPropertyChanged, Property, Event, EmitType, SanitizeHtmlHelper } from '@syncfusion/ej2-base';import { Component, EventHandler, attributes, formatUnit, ChildProperty, remove, L10n, extend } from '@syncfusion/ej2-base';import { addClass, removeClass, detach, prepend, Complex, closest, setValue, getValue, compile, append } from '@syncfusion/ej2-base';import { select, selectAll, isNullOrUndefined as isNOU, matches, Browser, KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';import { DataManager, Query, DataUtil } from '@syncfusion/ej2-data';import { Popup } from '@syncfusion/ej2-popups';import { TreeView, NodeSelectEventArgs, DataBoundEventArgs, FieldsSettingsModel, NodeClickEventArgs } from '@syncfusion/ej2-navigations';import { NodeCheckEventArgs, FailureEventArgs} from '@syncfusion/ej2-navigations';
 import {Mode,ExpandOn,TreeFilterType,SortOrder,DdtBeforeOpenEventArgs,DdtChangeEventArgs,DdtPopupEventArgs,DdtDataBoundEventArgs,DdtFilteringEventArgs,DdtFocusEventArgs,DdtKeyPressEventArgs,DdtSelectEventArgs} from "./drop-down-tree";
 import {ComponentModel} from '@syncfusion/ej2-base';
 
@@ -393,9 +393,9 @@ export interface DropDownTreeModel extends ComponentModel{
     /**
      * Specifies whether to destroy the popup or to maintain it in DOM when it is closed.
      * When this property is set to false, then the popup will not be removed from DOM once it is closed.
-     * 
+     *
      * @default true
-     * @deprecated
+
      */
     destroyPopupOnHide?: boolean;
 
@@ -488,91 +488,91 @@ export interface DropDownTreeModel extends ComponentModel{
     /**
      * Triggers when the data fetch request from the remote server fails.
      *
-     * @event
+     * @event actionFailure
      */
     actionFailure?: EmitType<Object>;
 
     /**
      * Fires when popup opens before animation.
      *
-     * @event
+     * @event beforeOpen
      */
     beforeOpen?: EmitType<DdtBeforeOpenEventArgs>;
 
     /**
      * Triggers when an item in a popup is selected or when the model value is changed by user.
      *
-     * @event
+     * @event change
      */
     change?: EmitType<DdtChangeEventArgs>;
 
     /**
      * Fires when popup close after animation completion.
      *
-     * @event
+     * @event close
      */
     close?: EmitType<DdtPopupEventArgs>;
 
     /**
      * Triggers when the Dropdown Tree input element gets focus-out.
      *
-     * @event
+     * @event blur
      */
     blur?: EmitType<Object>;
 
     /**
      * Triggers when the Dropdown Tree is created successfully.
      *
-     * @event
+     * @event created
      */
     created?: EmitType<Object>;
 
     /**
      * Triggers when data source is populated in the Dropdown Tree.
      *
-     * @event
+     * @event dataBound
      */
     dataBound?: EmitType<DdtDataBoundEventArgs>;
 
     /**
      * Triggers when the Dropdown Tree is destroyed successfully.
      *
-     * @event
+     * @event destroyed
      */
     destroyed?: EmitType<Object>;
 
     /**
      * Triggers on typing a character in the filter bar when the **allowFiltering** is enabled.
      *
-     * @event
+     * @event filtering
      */
     filtering?: EmitType<DdtFilteringEventArgs>;
 
     /**
      * Triggers when the Dropdown Tree input element is focused.
      *
-     * @event
+     * @event focus
      */
     focus?: EmitType<DdtFocusEventArgs>;
 
     /**
      * Triggers when key press is successful. It helps to customize the operations at key press.
      *
-     * @event
+     * @event keyPress
      */
     keyPress?: EmitType<DdtKeyPressEventArgs>;
 
     /**
      * Fires when popup opens after animation completion.
      *
-     * @event
+     * @event open
      */
     open?: EmitType<DdtPopupEventArgs>;
 
     /**
      * Triggers when an item in the popup is selected by the user either with mouse/tap or with keyboard navigation.
      *
-     * @event
+     * @event select
      */
     select?: EmitType<DdtSelectEventArgs>;