@syncfusion/ej2-dropdowns 26.2.13 → 27.1.50

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

@@ -103,6 +103,13 @@ export interface TreeSettingsModel {
 
     autoCheck?: boolean;
 
+    /**
+     * Determines whether the disabled children will be checked or not if their parent is checked.
+     *
+     * @default true
+     */
+    checkDisabledChildren?: boolean;
+
     /**
      * Specifies the action on which the parent items in the pop-up should expand or collapse. The available actions are
      * * `Auto` - In desktop, the expand or collapse operation happens when you double-click the node,
@@ -462,6 +469,18 @@ export interface DropDownTreeModel extends ComponentModel{
      */
     value?: string[];
 
+    /**
+     * Specifies the way to customize the selected values in the Dropdown Tree component based on application needs. If the **valueTemplate** property is set, the template content overrides the displayed item text.
+     * The property accepts [template string] (https://ej2.syncfusion.com/documentation/common/template-engine/) or HTML element ID holding the content. The context for the valueTemplate comes from the data object passed to it.
+     *
+     * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    valueTemplate?: string | Function;
+
     /**
      * Specifies the width of the component. By default, the component width sets based on the width of its parent container.
      * You can also set the width in pixel values.

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

@@ -91,6 +91,12 @@ export declare class TreeSettings extends ChildProperty<TreeSettings> {
      * @default false
      */
     autoCheck: boolean;
+    /**
+     * Determines whether the disabled children will be checked or not if their parent is checked.
+     *
+     * @default true
+     */
+    checkDisabledChildren: boolean;
     /**
      * Specifies the action on which the parent items in the pop-up should expand or collapse. The available actions are
      * * `Auto` - In desktop, the expand or collapse operation happens when you double-click the node,
@@ -148,8 +154,8 @@ export interface DdtPopupEventArgs {
      */
     popup: Popup;
     /**
-    * Determines whether the current popup close action needs to be prevented or not.
-    */
+     * Determines whether the current popup close action needs to be prevented or not.
+     */
     cancel?: boolean;
 }
 export interface DdtDataBoundEventArgs {
@@ -328,6 +334,7 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
     private isClicked;
     private isCheckAllCalled;
     private isFromFilterChange;
+    private valueTemplateContainer;
     /**
      * Specifies the template that renders to the popup list content of the
      * Dropdown Tree component when the data fetch request from the remote server fails.
@@ -622,6 +629,17 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
      * @aspType Object
      */
     value: string[];
+    /**
+     * Specifies the way to customize the selected values in the Dropdown Tree component based on application needs. If the **valueTemplate** property is set, the template content overrides the displayed item text.
+     * The property accepts [template string] (https://ej2.syncfusion.com/documentation/common/template-engine/) or HTML element ID holding the content. The context for the valueTemplate comes from the data object passed to it.
+     *
+     * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    valueTemplate: string | Function;
     /**
      * Specifies the width of the component. By default, the component width sets based on the width of its parent container.
      * You can also set the width in pixel values.
@@ -778,6 +796,8 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
         [key: string]: string;
     };
     private updateOverFlowView;
+    private checkRemainingTemplate;
+    private updateChipAndValueTemplate;
     private updateRemainTemplate;
     private getOverflowVal;
     private updateDelimMode;
@@ -797,6 +817,8 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
     private setTreeValue;
     private setTreeText;
     private setSelectedValue;
+    private setValueTemplate;
+    private getValueTemplateElement;
     private setValidValue;
     private getItems;
     private getNestedItems;
@@ -842,6 +864,8 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
     private getChildNodeData;
     private getChildMapperFields;
     private removeSelectedData;
+    private initializeValueTemplate;
+    private showOrHideValueTemplate;
     private updateSelectedValues;
     private setChipValues;
     private setTagValues;

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

@@ -137,6 +137,9 @@ var TreeSettings = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], TreeSettings.prototype, "autoCheck", void 0);
+    __decorate([
+        Property(true)
+    ], TreeSettings.prototype, "checkDisabledChildren", void 0);
     __decorate([
         Property('Auto')
     ], TreeSettings.prototype, "expandOn", void 0);
@@ -344,9 +347,11 @@ var DropDownTree = /** @class */ (function (_super) {
             firstUl.removeAttribute('aria-multiselectable');
         }
         this.oldValue = this.value;
-        this.isInitialized = true;
+        if (!this.isRemoteData) {
+            this.isInitialized = true;
+        }
         this.hasTemplate = this.itemTemplate || this.headerTemplate || this.footerTemplate || this.actionFailureTemplate
-            || this.noRecordsTemplate || this.customTemplate;
+            || this.noRecordsTemplate || this.customTemplate || this.valueTemplate;
         this.renderComplete();
     };
     DropDownTree.prototype.hideCheckAll = function (flag) {
@@ -390,6 +395,7 @@ var DropDownTree = /** @class */ (function (_super) {
             cancel: false,
             event: e
         };
+        var focusedElement;
         this.trigger('keyPress', eventArgs, function (observedArgs) {
             if (!observedArgs.cancel) {
                 switch (e.action) {
@@ -404,7 +410,7 @@ var DropDownTree = /** @class */ (function (_super) {
                     case 'moveDown':
                         e.preventDefault();
                         _this.filterObj.element.blur();
-                        var focusedElement = _this.treeObj.element.querySelector('li');
+                        focusedElement = _this.treeObj.element.querySelector('li');
                         if (focusedElement) {
                             focusedElement.focus();
                         }
@@ -753,6 +759,9 @@ var DropDownTree = /** @class */ (function (_super) {
                     removeClass([this.inputEle], CHIP_INPUT);
                 }
             }
+            if (isValue && this.mode !== 'Custom') {
+                this.showOrHideValueTemplate(true);
+            }
             if (!this.wrapText && isValue) {
                 this.updateView();
             }
@@ -825,6 +834,7 @@ var DropDownTree = /** @class */ (function (_super) {
                 if (this.chipWrapper && (this.value && this.value.length !== 0)) {
                     removeClass([this.chipWrapper], HIDEICON);
                     addClass([this.inputEle], CHIP_INPUT);
+                    this.showOrHideValueTemplate(false, true);
                 }
                 addClass([this.inputWrapper], SHOW_CHIP);
                 if (this.popupObj) {
@@ -838,6 +848,7 @@ var DropDownTree = /** @class */ (function (_super) {
                 if (this.mode === 'Delimiter') {
                     removeClass([this.inputWrapper], SHOW_CHIP);
                     removeClass([this.inputEle], CHIP_INPUT);
+                    this.showOrHideValueTemplate(true);
                 }
                 else {
                     addClass([this.inputWrapper], SHOW_CHIP);
@@ -966,7 +977,8 @@ var DropDownTree = /** @class */ (function (_super) {
                         _this.clickHandler(e);
                         break;
                     case 'moveDown':
-                        focusedElement = _this.treeObj.element.querySelector('li');
+                        e.preventDefault();
+                        focusedElement = _this.treeObj.element.querySelector('li[tabindex="0"]') || _this.treeObj.element.querySelector('li');
                         focusedElement.focus();
                         addClass([focusedElement], ['e-node-focus']);
                         break;
@@ -1019,6 +1031,12 @@ var DropDownTree = /** @class */ (function (_super) {
             }
             if (!isNOU(this.value)) {
                 if (this.mode !== 'Box') {
+                    if (this.valueTemplate) {
+                        remaining = this.updateChipAndValueTemplate(false, downIconWidth, remainSize);
+                        this.checkRemainingTemplate(remaining, remainElement, remainContent, totalContent);
+                        this.updateDelimMode();
+                        return;
+                    }
                     for (var index = 0; !isNOU(this.value[index]); index++) {
                         data += (index === 0) ? '' : this.delimiterChar + ' ';
                         temp = this.getOverflowVal(index);
@@ -1061,48 +1079,10 @@ var DropDownTree = /** @class */ (function (_super) {
                     }
                 }
                 else {
-                    addClass([this.chipWrapper], HIDEICON);
-                    var ele = this.chipWrapper.cloneNode(true);
-                    var chips = selectAll('.' + CHIP, ele);
-                    for (var i = 0; i < chips.length; i++) {
-                        temp = this.overFlowWrapper.innerHTML;
-                        this.overFlowWrapper.appendChild(chips[i]);
-                        data = this.overFlowWrapper.innerHTML;
-                        wrapperleng = this.overFlowWrapper.offsetWidth;
-                        overAllContainer = this.inputWrapper.offsetWidth;
-                        if ((wrapperleng + downIconWidth + this.clearIconWidth) > overAllContainer) {
-                            if (tempData !== undefined && tempData !== '') {
-                                temp = tempData;
-                                i = tempIndex + 1;
-                            }
-                            this.overFlowWrapper.innerHTML = temp;
-                            remaining = this.value.length - i;
-                            wrapperleng = this.overFlowWrapper.offsetWidth;
-                            while (((wrapperleng + remainSize + downIconWidth + this.clearIconWidth) >= overAllContainer)
-                                && wrapperleng !== 0 && this.overFlowWrapper.innerHTML !== '') {
-                                this.overFlowWrapper.removeChild(this.overFlowWrapper.lastChild);
-                                remaining++;
-                                wrapperleng = this.overFlowWrapper.offsetWidth;
-                            }
-                            break;
-                        }
-                        else if ((wrapperleng + remainSize + downIconWidth + this.clearIconWidth) <= overAllContainer) {
-                            tempData = data;
-                            tempIndex = i;
-                        }
-                        else if (i === 0) {
-                            tempData = '';
-                            tempIndex = -1;
-                        }
-                    }
+                    remaining = this.updateChipAndValueTemplate(true, downIconWidth, remainSize);
                 }
             }
-            if (remaining > 0) {
-                this.overFlowWrapper.appendChild(this.updateRemainTemplate(remainElement, remaining, remainContent, totalContent));
-            }
-            if (this.mode === 'Box' && !this.overFlowWrapper.classList.contains(TOTAL_COUNT_WRAPPER)) {
-                addClass([remainElement], REMAIN_COUNT);
-            }
+            this.checkRemainingTemplate(remaining, remainElement, remainContent, totalContent);
         }
         else {
             this.overFlowWrapper.innerHTML = '';
@@ -1110,13 +1090,67 @@ var DropDownTree = /** @class */ (function (_super) {
         }
         this.updateDelimMode();
     };
+    DropDownTree.prototype.checkRemainingTemplate = function (remaining, remainElement, remainContent, totalContent) {
+        if (remaining > 0) {
+            this.overFlowWrapper.appendChild(this.updateRemainTemplate(remainElement, remaining, remainContent, totalContent));
+        }
+        if (this.mode === 'Box' && !this.overFlowWrapper.classList.contains(TOTAL_COUNT_WRAPPER)) {
+            addClass([remainElement], REMAIN_COUNT);
+        }
+    };
+    DropDownTree.prototype.updateChipAndValueTemplate = function (isChip, downIconWidth, remainSize) {
+        if (downIconWidth === void 0) { downIconWidth = 0; }
+        var currentHtmlContent = '';
+        var overAllContainer;
+        var previousHtmlContent;
+        var previousData;
+        var index = 1;
+        var wrapperLength;
+        var remainingItemsCount;
+        addClass([isChip ? this.chipWrapper : this.valueTemplateContainer], HIDEICON);
+        var clonedElement = (isChip ? this.chipWrapper :
+            this.valueTemplateContainer).cloneNode(true);
+        var valueElements = isChip ? selectAll('.' + CHIP, clonedElement) : Array.prototype.slice.call(clonedElement.children);
+        for (var i = 0; i < valueElements.length; i++) {
+            previousHtmlContent = this.overFlowWrapper.innerHTML;
+            this.overFlowWrapper.appendChild(valueElements[i]);
+            currentHtmlContent = this.overFlowWrapper.innerHTML;
+            wrapperLength = this.overFlowWrapper.offsetWidth;
+            overAllContainer = this.inputWrapper.offsetWidth;
+            if ((wrapperLength + downIconWidth + this.clearIconWidth) > overAllContainer) {
+                if (previousData !== undefined && previousData !== '') {
+                    previousHtmlContent = previousData;
+                    i = index + 1;
+                }
+                this.overFlowWrapper.innerHTML = previousHtmlContent;
+                remainingItemsCount = this.value.length - i;
+                wrapperLength = this.overFlowWrapper.offsetWidth;
+                while (((wrapperLength + remainSize + downIconWidth + this.clearIconWidth) >= overAllContainer)
+                    && wrapperLength !== 0 && this.overFlowWrapper.innerHTML !== '') {
+                    this.overFlowWrapper.removeChild(this.overFlowWrapper.lastChild);
+                    remainingItemsCount++;
+                    wrapperLength = this.overFlowWrapper.offsetWidth;
+                }
+                break;
+            }
+            else if ((wrapperLength + remainSize + downIconWidth + this.clearIconWidth) <= overAllContainer) {
+                previousData = currentHtmlContent;
+                index = i;
+            }
+            else if (i === 0) {
+                previousData = '';
+                index = -1;
+            }
+        }
+        return remainingItemsCount;
+    };
     DropDownTree.prototype.updateRemainTemplate = function (remainElement, remaining, remainContent, totalContent) {
         if (this.overFlowWrapper.firstChild && this.overFlowWrapper.firstChild.nodeType === 3 &&
             this.overFlowWrapper.firstChild.nodeValue === '') {
             this.overFlowWrapper.removeChild(this.overFlowWrapper.firstChild);
         }
         remainElement.innerHTML = '';
-        remainElement.innerText = (this.overFlowWrapper.firstChild && (this.overFlowWrapper.firstChild.nodeType === 3 || this.mode === 'Box')) ?
+        remainElement.innerText = (this.overFlowWrapper.firstChild && (this.overFlowWrapper.firstChild.nodeType === 3 || this.mode === 'Box' || this.valueTemplateContainer)) ?
             remainContent.replace('${count}', remaining.toString()) : totalContent.replace('${count}', remaining.toString());
         if (this.overFlowWrapper.firstChild && (this.overFlowWrapper.firstChild.nodeType === 3 || this.mode === 'Box')) {
             removeClass([this.overFlowWrapper], TOTAL_COUNT_WRAPPER);
@@ -1463,10 +1497,37 @@ var DropDownTree = /** @class */ (function (_super) {
             this.currentValue = this.value;
         }
     };
+    DropDownTree.prototype.setValueTemplate = function () {
+        var _this = this;
+        if (this.valueTemplate) {
+            var compiledString = this.initializeValueTemplate();
+            this.getValueTemplateElement(this.value[0], compiledString);
+            if (this.hasTemplate && this.portals) {
+                if (this.treeObj.portals) {
+                    this.portals = this.portals.concat(this.treeObj.portals.filter(function (item) {
+                        return !_this.portals.includes(item);
+                    }));
+                }
+                if (this.isReact) {
+                    this.renderReactTemplates(this.reactCallBack);
+                }
+            }
+            this.showOrHideValueTemplate(true);
+        }
+    };
+    DropDownTree.prototype.getValueTemplateElement = function (value, compiledString) {
+        var selectedData = this.getNodeData(value, this.isFilteredData ? this.treeData : this.treeItems);
+        var templateElements = compiledString(selectedData, this, 'valueTemplate', this.element.id + "valueTemplate", this.isStringTemplate, undefined, this.valueTemplateContainer);
+        if (templateElements) {
+            templateElements = Array.prototype.slice.call(templateElements);
+            append(templateElements, this.valueTemplateContainer);
+        }
+    };
     DropDownTree.prototype.setValidValue = function () {
         var _this = this;
         if (!this.showCheckBox && !this.allowMultiSelection) {
             Input.setValue(this.text, this.inputEle, this.floatLabelType);
+            this.setValueTemplate();
             var id = this.value[0].toString();
             if (this.treeObj.selectedNodes[0] !== id) {
                 setValue('selectedNodes', [id], this.treeObj);
@@ -1562,7 +1623,8 @@ var DropDownTree = /** @class */ (function (_super) {
             expandOn: this.treeSettings.expandOn,
             loadOnDemand: this.treeSettings.loadOnDemand,
             nodeSelecting: this.onBeforeSelect.bind(this),
-            nodeTemplate: this.itemTemplate
+            nodeTemplate: this.itemTemplate,
+            checkDisabledChildren: this.treeSettings.checkDisabledChildren
         });
         this.treeObj.root = this.root ? this.root : this;
         this.treeObj.appendTo(this.tree);
@@ -1655,12 +1717,14 @@ var DropDownTree = /** @class */ (function (_super) {
                             removeClass([oldFocussedNode], 'e-node-focus');
                         }
                     }
-                    if (!_this.allowFiltering) {
-                        focusedElement.focus();
+                    if (!isNOU(focusedElement)) {
+                        if (!_this.allowFiltering) {
+                            focusedElement.focus();
+                        }
+                        addClass([focusedElement], ['e-node-focus']);
                     }
-                    addClass([focusedElement], ['e-node-focus']);
                 }
-                if (_this.treeObj.checkedNodes.length > 0) {
+                if (_this.treeObj.checkedNodes.length > 0 && !_this.isFilterRestore) {
                     var nodes = _this.treeObj.element.querySelectorAll('li');
                     var checkedNodes = _this.treeObj.element.querySelectorAll('li[aria-checked=true]');
                     if ((checkedNodes.length === nodes.length || _this.checkSelectAll) && _this.checkBoxElement) {
@@ -1679,8 +1743,10 @@ var DropDownTree = /** @class */ (function (_super) {
         });
     };
     DropDownTree.prototype.reactCallBack = function () {
-        this.updatePopupHeight();
-        this.popupObj.refreshPosition();
+        if (!isNOU(this.popupObj)) {
+            this.updatePopupHeight();
+            this.popupObj.refreshPosition();
+        }
     };
     DropDownTree.prototype.updatePopupHeight = function () {
         if (this.isFirstRender) {
@@ -1819,6 +1885,7 @@ var DropDownTree = /** @class */ (function (_super) {
                 this.updateView();
             }
             this.treeObj.element.focus();
+            this.isInitialized = true;
         }
         var eventArgs = { data: args.data };
         this.trigger('dataBound', eventArgs);
@@ -2038,6 +2105,7 @@ var DropDownTree = /** @class */ (function (_super) {
                 this.setProperties({ text: selectedText }, true);
                 this.currentText = this.text;
                 this.currentValue = this.value;
+                this.setValueTemplate();
                 if (!isNOU(this.value) && this.value.length > 0) {
                     this.inputWrapper.setAttribute('aria-label', args.nodeData.text.toString());
                 }
@@ -2181,11 +2249,13 @@ var DropDownTree = /** @class */ (function (_super) {
             var isValid = this.getValidMode();
             if (this.chipWrapper.classList.contains(HIDEICON) && isValid) {
                 removeClass([this.chipWrapper], HIDEICON);
+                this.showOrHideValueTemplate(false, true);
                 addClass([this.inputWrapper], SHOW_CHIP);
             }
             else if (!isValid) {
                 addClass([this.chipWrapper], HIDEICON);
                 removeClass([this.inputWrapper], SHOW_CHIP);
+                this.showOrHideValueTemplate(true);
             }
             var isValue = this.value !== null ? (this.value.length !== 0 ? true : false) : false;
             if (isValid && isValue) {
@@ -2200,6 +2270,7 @@ var DropDownTree = /** @class */ (function (_super) {
             if (this.chipWrapper) {
                 addClass([this.chipWrapper], HIDEICON);
                 removeClass([this.inputWrapper], SHOW_CHIP);
+                this.showOrHideValueTemplate(true);
             }
         }
     };
@@ -2208,6 +2279,7 @@ var DropDownTree = /** @class */ (function (_super) {
             removeClass([this.inputEle], CHIP_INPUT);
             if (this.chipWrapper) {
                 addClass([this.chipWrapper], HIDEICON);
+                this.showOrHideValueTemplate(true);
             }
         }
     };
@@ -2220,7 +2292,8 @@ var DropDownTree = /** @class */ (function (_super) {
         if (!this.isFilteredData) {
             this.setProperties({ value: this.isFromFilterChange && newValues && newValues.length === 0 ? this.value : newValues }, true);
             this.isFromFilterChange = false;
-            if (newValues && newValues.length !== 0 && !this.showCheckBox && !this.ddtCompareValues(this.treeObj.selectedNodes, this.value.slice())) {
+            if (newValues && newValues.length !== 0 && !this.showCheckBox &&
+                !this.ddtCompareValues(this.treeObj.selectedNodes, this.value.slice())) {
                 this.treeObj.selectedNodes = this.value.slice();
                 this.treeObj.dataBind();
             }
@@ -2259,12 +2332,14 @@ var DropDownTree = /** @class */ (function (_super) {
             addClass([this.inputEle], CHIP_INPUT);
             if (this.chipWrapper) {
                 removeClass([this.chipWrapper], HIDEICON);
+                this.showOrHideValueTemplate(false, true);
             }
         }
         var isValue = this.value ? (this.value.length ? true : false) : false;
         if (this.chipWrapper && (this.mode === 'Box' && !isValue)) {
             addClass([this.chipWrapper], HIDEICON);
             removeClass([this.inputEle], CHIP_INPUT);
+            this.showOrHideValueTemplate(true);
         }
         this.updateSelectedValues();
     };
@@ -2280,7 +2355,7 @@ var DropDownTree = /** @class */ (function (_super) {
         }
         if (isNOU(data)) {
             if (this.treeSettings.loadOnDemand) {
-                data = this.getNodeData(value);
+                data = this.getNodeData(value, this.treeItems);
             }
             else {
                 data = this.treeObj.getNode(value);
@@ -2291,21 +2366,21 @@ var DropDownTree = /** @class */ (function (_super) {
         }
         return data;
     };
-    DropDownTree.prototype.getNodeData = function (id) {
+    DropDownTree.prototype.getNodeData = function (id, dataSource) {
         var childItems;
         if (isNOU(id)) {
             return childItems;
         }
         else if (this.treeDataType === 1) {
-            for (var i = 0, objlen = this.treeItems.length; i < objlen; i++) {
-                var dataId = getValue(this.fields.value, this.treeItems[i]);
-                if (!isNOU(this.treeItems[i]) && !isNOU(dataId) && dataId.toString() === id) {
-                    return this.treeItems[i];
+            for (var i = 0, objlen = dataSource.length; i < objlen; i++) {
+                var dataId = getValue(this.fields.value, dataSource[i]);
+                if (!isNOU(dataSource[i]) && !isNOU(dataId) && dataId.toString() === id) {
+                    return dataSource[i];
                 }
             }
         }
         else {
-            return this.getChildNodeData(this.treeItems, this.fields, id);
+            return this.getChildNodeData(dataSource, this.fields, id);
         }
         return childItems;
     };
@@ -2350,7 +2425,41 @@ var DropDownTree = /** @class */ (function (_super) {
             }
         }
     };
+    DropDownTree.prototype.initializeValueTemplate = function () {
+        if (!this.valueTemplate) {
+            return null;
+        }
+        if (this.valueTemplateContainer) {
+            while (this.valueTemplateContainer.firstChild) {
+                this.valueTemplateContainer.removeChild(this.valueTemplateContainer.firstChild);
+            }
+        }
+        else {
+            this.valueTemplateContainer = this.createElement('span', { className: OVERFLOW_VIEW + ' ' + SHOW_TEXT + ' ' + 'e-input-value' + ' ' + HIDEICON });
+        }
+        this.inputWrapper.insertBefore(this.valueTemplateContainer, this.inputEle);
+        return this.templateComplier(this.valueTemplate);
+    };
+    DropDownTree.prototype.showOrHideValueTemplate = function (show, showChip) {
+        if (showChip === void 0) { showChip = false; }
+        if (!this.valueTemplateContainer || this.mode === 'Box') {
+            return;
+        }
+        if (show) {
+            removeClass([this.valueTemplateContainer], HIDEICON);
+            addClass([this.inputWrapper], SHOW_CHIP);
+            addClass([this.inputEle], CHIP_INPUT);
+        }
+        else {
+            addClass([this.valueTemplateContainer], HIDEICON);
+            if (!showChip) {
+                removeClass([this.inputWrapper], SHOW_CHIP);
+                removeClass([this.inputEle], CHIP_INPUT);
+            }
+        }
+    };
     DropDownTree.prototype.updateSelectedValues = function () {
+        var _this = this;
         this.dataValue = '';
         var temp;
         var text;
@@ -2365,6 +2474,7 @@ var DropDownTree = /** @class */ (function (_super) {
             this.selectedData = [];
         }
         if (!isNOU(this.value)) {
+            var compiledString = this.initializeValueTemplate();
             for (var i = 0, len = this.value.length; i < len; i++) {
                 selectedData = this.getSelectedData(this.value[i]);
                 text = getValue(this.treeSettings.loadOnDemand ? this.fields.text : 'text', selectedData);
@@ -2384,6 +2494,19 @@ var DropDownTree = /** @class */ (function (_super) {
                 }
                 hiddenInputValue += '<option selected value ="' + this.value[i] + '">' +
                     this.selectedText[this.selectedText.length - 1] + '</option>';
+                if (this.valueTemplate) {
+                    this.getValueTemplateElement(this.value[i], compiledString);
+                }
+            }
+            if (this.hasTemplate && this.portals) {
+                if (this.treeObj.portals) {
+                    this.portals = this.portals.concat(this.treeObj.portals.filter(function (item) {
+                        return !_this.portals.includes(item);
+                    }));
+                }
+                if (this.isReact) {
+                    this.renderReactTemplates(this.reactCallBack);
+                }
             }
             if (this.selectedText.length >= 1) {
                 this.setProperties({ text: textValue }, true);
@@ -2399,6 +2522,7 @@ var DropDownTree = /** @class */ (function (_super) {
                 addClass([this.chipWrapper], HIDEICON);
                 removeClass([this.inputWrapper], SHOW_CHIP);
             }
+            this.showOrHideValueTemplate(true);
         }
         Input.setValue(this.dataValue, this.inputEle, this.floatLabelType);
         if (textValue === '') {
@@ -2463,6 +2587,7 @@ var DropDownTree = /** @class */ (function (_super) {
         }
         if (this.chipWrapper.classList.contains(HIDEICON)) {
             removeClass([this.chipWrapper], HIDEICON);
+            this.showOrHideValueTemplate(false, true);
         }
         var chipContent = this.createElement('span', { className: CHIP_CONTENT });
         var template = this.customTemplate;
@@ -2600,6 +2725,7 @@ var DropDownTree = /** @class */ (function (_super) {
         if (!isDynamicChange) {
             this.oldValue = this.value;
             this.setProperties({ value: [] }, true);
+            this.showOrHideValueTemplate(false);
         }
         if (isNOU(this.value) || this.value.length === 0) {
             this.inputWrapper.setAttribute('aria-label', this.getModuleName());
@@ -2671,18 +2797,20 @@ var DropDownTree = /** @class */ (function (_super) {
         }
     };
     DropDownTree.prototype.updateTreeSettings = function (prop) {
-        var value = Object.keys(prop.treeSettings)[0];
-        if (value === 'autoCheck') {
+        if (prop === 'autoCheck') {
             this.treeObj.autoCheck = this.treeSettings.autoCheck;
         }
-        else if (value === 'loadOnDemand') {
+        else if (prop === 'loadOnDemand') {
             this.treeObj.loadOnDemand = this.treeSettings.loadOnDemand;
         }
-        else if (value === 'expandOn') {
+        else if (prop === 'expandOn') {
             this.treeObj.expandOn = this.treeSettings.expandOn;
             this.treeObj.dataBind();
             return;
         }
+        else if (prop === 'checkDisabledChildren') {
+            this.treeObj.checkDisabledChildren = this.treeSettings.checkDisabledChildren;
+        }
         this.treeObj.dataBind();
         this.setMultiSelect();
         this.updateValue(this.value);
@@ -2748,6 +2876,9 @@ var DropDownTree = /** @class */ (function (_super) {
         }
         addClass([this.noRecord], NODATACONTAINER);
         prepend([this.noRecord], this.popupDiv);
+        if (this.treeObj) {
+            this.treeObj.element.removeAttribute('aria-activedescendant');
+        }
     };
     DropDownTree.prototype.updateRecordTemplate = function (action) {
         if (this.treeItems && this.treeItems.length <= 0) {
@@ -2830,7 +2961,7 @@ var DropDownTree = /** @class */ (function (_super) {
             return;
         }
         if (!this.wrapText) {
-            var overFlow = select('.' + OVERFLOW_VIEW, this.inputWrapper);
+            var overFlow = select('.e-overflow:not(.e-input-value)', this.inputWrapper);
             if (overFlow) {
                 overFlow.innerHTML = '';
             }
@@ -2969,7 +3100,10 @@ var DropDownTree = /** @class */ (function (_super) {
                     this.updateOption();
                     break;
                 case 'treeSettings':
-                    this.updateTreeSettings(newProp);
+                    for (var _b = 0, _c = Object.keys(newProp.treeSettings); _b < _c.length; _b++) {
+                        var prop_1 = _c[_b];
+                        this.updateTreeSettings(prop_1);
+                    }
                     break;
                 case 'customTemplate':
                     if (this.mode !== 'Custom') {
@@ -3089,7 +3223,7 @@ var DropDownTree = /** @class */ (function (_super) {
         detach(this.hiddenElement);
         Input.setRipple(false, [this.inputObj]);
         this.element.classList.remove('e-input');
-        if (this.showCheckBox || this.allowMultiSelection) {
+        if (this.showCheckBox || this.allowMultiSelection || (this.value && this.valueTemplateContainer)) {
             this.element.classList.remove(CHIP_INPUT);
         }
         detach(this.inputObj.container);
@@ -3141,7 +3275,8 @@ var DropDownTree = /** @class */ (function (_super) {
     DropDownTree.prototype.destroyPopup = function () {
         this.isPopupOpen = false;
         if (this.isReact) {
-            this.clearTemplate();
+            this.clearTemplate(['headerTemplate', 'footerTemplate', 'itemTemplate', 'actionFailureTemplate',
+                'noRecordsTemplate', 'customTemplate']);
         }
         if (this.popupObj) {
             this.popupObj.destroy();
@@ -3337,6 +3472,9 @@ var DropDownTree = /** @class */ (function (_super) {
     __decorate([
         Property(null)
     ], DropDownTree.prototype, "value", void 0);
+    __decorate([
+        Property(null)
+    ], DropDownTree.prototype, "valueTemplate", void 0);
     __decorate([
         Property('100%')
     ], DropDownTree.prototype, "width", void 0);