@syncfusion/ej2-navigations 16.4.45 → 16.4.52-46585

package/src/treeview/treeview.js

@@ -4,7 +4,7 @@ var __extends = (this && this.__extends) || (function () {
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
             function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
         return extendStatics(d, b);
-    }
+    };
     return function (d, b) {
         extendStatics(d, b);
         function __() { this.constructor = d; }
@@ -17,14 +17,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, isUndefined, Browser, compile } from '@syncfusion/ej2-base';
+import { Component, isUndefined, Browser, compile, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { Property, NotifyPropertyChanges, ChildProperty, Complex } from '@syncfusion/ej2-base';
 import { Event, EventHandler, KeyboardEvents } from '@syncfusion/ej2-base';
-import { rippleEffect, Animation } from '@syncfusion/ej2-base';
+import { rippleEffect, Animation, remove } from '@syncfusion/ej2-base';
 import { Draggable, Droppable } from '@syncfusion/ej2-base';
+import { getElement } from '@syncfusion/ej2-base';
 import { addClass, removeClass, closest, matches, detach, select, selectAll, isVisible, append } from '@syncfusion/ej2-base';
 import { DataManager, Query } from '@syncfusion/ej2-data';
-import { isNullOrUndefined as isNOU, Touch, getValue, setValue } from '@syncfusion/ej2-base';
+import { isNullOrUndefined as isNOU, Touch, getValue, setValue, extend, merge, attributes } from '@syncfusion/ej2-base';
 import { ListBase } from '@syncfusion/ej2-lists';
 import { createCheckBox, rippleMouseHandler } from '@syncfusion/ej2-buttons';
 import { Input } from '@syncfusion/ej2-inputs';
@@ -35,6 +36,8 @@ var COLLAPSIBLE = 'e-icon-collapsible';
 var EXPANDABLE = 'e-icon-expandable';
 var LISTITEM = 'e-list-item';
 var LISTTEXT = 'e-list-text';
+var LISTWRAP = 'e-text-wrap';
+var IELISTWRAP = 'e-ie-wrap';
 var PARENTITEM = 'e-list-parent';
 var HOVER = 'e-hover';
 var ACTIVE = 'e-active';
@@ -47,6 +50,7 @@ var INPUTGROUP = 'e-input-group';
 var TREEINPUT = 'e-tree-input';
 var EDITING = 'e-editing';
 var RTL = 'e-rtl';
+var INTERACTION = 'e-interaction';
 var DRAGITEM = 'e-drag-item';
 var DROPPABLE = 'e-droppable';
 var DRAGGING = 'e-dragging';
@@ -61,24 +65,28 @@ var SELECTED = 'e-selected';
 var EXPANDED = 'e-expanded';
 var NODECOLLAPSED = 'e-node-collapsed';
 var DISABLE = 'e-disable';
-var CONTENT = 'e-content';
-var DOWNTAIL = 'e-downtail';
 var DROPCOUNT = 'e-drop-count';
 var CHECK = 'e-check';
 var INDETERMINATE = 'e-stop';
 var CHECKBOXWRAP = 'e-checkbox-wrapper';
 var CHECKBOXFRAME = 'e-frame';
 var CHECKBOXRIPPLE = 'e-ripple-container';
+var RIPPLE = 'e-ripple';
+var RIPPLEELMENT = 'e-ripple-element';
 var FOCUS = 'e-node-focus';
 var IMAGE = 'e-list-img';
 var BIGGER = 'e-bigger';
 var SMALL = 'e-small';
+var CHILD = 'e-has-child';
+var ITEM_ANIMATION_ACTIVE = 'e-animation-active';
+var DISABLED = 'e-disabled';
+var PREVENTSELECT = 'e-prevent';
 var treeAriaAttr = {
-    treeRole: 'tree',
+    treeRole: 'group',
     itemRole: 'treeitem',
     listRole: 'group',
     itemText: '',
-    wrapperRole: '',
+    wrapperRole: ''
 };
 /**
  * Configures the fields to bind to the properties of node in the TreeView component.
@@ -121,6 +129,9 @@ var FieldsSettings = /** @class */ (function (_super) {
     __decorate([
         Property(null)
     ], FieldsSettings.prototype, "query", void 0);
+    __decorate([
+        Property('selectable')
+    ], FieldsSettings.prototype, "selectable", void 0);
     __decorate([
         Property('selected')
     ], FieldsSettings.prototype, "selected", void 0);
@@ -180,27 +191,41 @@ export { NodeAnimationSettings };
  * The TreeView component is used to represent hierarchical data in a tree like structure with advanced
  * functions to perform edit, drag and drop, selection with check-box, and more.
  * ```html
- *  <div id="tree"></div>
+ * <div id="tree"></div>
  * ```
  * ```typescript
- *  let treeObj: TreeView = new TreeView();
- *  treeObj.appendTo('#tree');
+ * let treeObj: TreeView = new TreeView();
+ * treeObj.appendTo('#tree');
  * ```
  */
 var TreeView = /** @class */ (function (_super) {
     __extends(TreeView, _super);
     function TreeView(options, element) {
         var _this = _super.call(this, options, element) || this;
+        _this.isRefreshed = false;
         _this.preventExpand = false;
         _this.checkedElement = [];
         _this.disableNode = [];
+        // eslint-disable-next-line
+        _this.validArr = [];
+        _this.validNodes = [];
+        _this.expandChildren = [];
+        _this.isFieldChange = false;
+        _this.changeDataSource = false;
+        _this.hasTemplate = false;
+        _this.isFirstRender = false;
+        // Specifies whether the node is dropped or not
+        _this.isNodeDropped = false;
+        _this.isInteracted = false;
+        _this.isRightClick = false;
         _this.mouseDownStatus = false;
         return _this;
     }
     TreeView_1 = TreeView;
     /**
      * Get component name.
-     * @returns string
+     *
+     * @returns {string} - returns module name.
      * @private
      */
     TreeView.prototype.getModuleName = function () {
@@ -208,10 +233,13 @@ var TreeView = /** @class */ (function (_super) {
     };
     /**
      * Initialize the event handler
+     *
+     * @returns {void}
      */
     TreeView.prototype.preRender = function () {
         var _this = this;
         this.checkActionNodes = [];
+        this.parentNodeCheck = [];
         this.dragStartAction = false;
         this.isAnimate = false;
         this.keyConfigs = {
@@ -241,6 +269,8 @@ var TreeView = /** @class */ (function (_super) {
             csHome: 'ctrl+shift+home',
             csEnd: 'ctrl+shift+end',
             space: 'space',
+            shiftSpace: 'shift+space',
+            ctrlSpace: 'ctrl+space'
         };
         this.listBaseOption = {
             expandCollapse: true,
@@ -251,12 +281,15 @@ var TreeView = /** @class */ (function (_super) {
             itemCreated: function (e) {
                 _this.beforeNodeCreate(e);
             },
+            enableHtmlSanitizer: this.enableHtmlSanitizer,
+            itemNavigable: this.fullRowNavigable
         };
         this.updateListProp(this.fields);
         this.aniObj = new Animation({});
         this.treeList = [];
         this.isLoaded = false;
         this.isInitalExpand = false;
+        this.expandChildren = [];
         this.index = 0;
         this.setTouchClass();
         if (isNOU(this.selectedNodes)) {
@@ -274,7 +307,8 @@ var TreeView = /** @class */ (function (_super) {
     };
     /**
      * Get the properties to be maintained in the persisted state.
-     * @returns string
+     *
+     * @returns {string} - returns the persisted data
      * @hidden
      */
     TreeView.prototype.getPersistData = function () {
@@ -283,30 +317,46 @@ var TreeView = /** @class */ (function (_super) {
     };
     /**
      * To Initialize the control rendering
+     *
      * @private
+     * @returns {void}
      */
     TreeView.prototype.render = function () {
         this.initialRender = true;
         this.initialize();
-        this.setDataBinding();
+        this.setDataBinding(false);
+        this.setDisabledMode();
         this.setExpandOnType();
-        this.setRipple();
+        if (!this.disabled) {
+            this.setRipple();
+        }
         this.wireEditingEvents(this.allowEditing);
         this.setDragAndDrop(this.allowDragAndDrop);
-        this.wireEvents();
+        if (!this.disabled) {
+            this.wireEvents();
+        }
         this.initialRender = false;
+        this.renderComplete();
     };
     TreeView.prototype.initialize = function () {
         this.element.setAttribute('role', 'tree');
-        this.element.setAttribute('tabindex', '0');
         this.element.setAttribute('aria-activedescendant', this.element.id + '_active');
         this.setCssClass(null, this.cssClass);
         this.setEnableRtl();
         this.setFullRow(this.fullRowSelect);
+        this.setTextWrap();
         this.nodeTemplateFn = this.templateComplier(this.nodeTemplate);
     };
+    TreeView.prototype.setDisabledMode = function () {
+        if (this.disabled) {
+            this.element.classList.add(DISABLED);
+        }
+        else {
+            this.element.classList.remove(DISABLED);
+        }
+    };
     TreeView.prototype.setEnableRtl = function () {
-        this.enableRtl ? addClass([this.element], RTL) : removeClass([this.element], RTL);
+        (this.enableRtl ? addClass : removeClass)([this.element], RTL);
     };
     TreeView.prototype.setRipple = function () {
         var tempStr = '.' + FULLROW + ',.' + TEXTWRAP;
@@ -317,12 +367,12 @@ var TreeView = /** @class */ (function (_super) {
         this.rippleFn = rippleEffect(this.element, rippleModel);
         var iconModel = {
             selector: '.' + TEXTWRAP + ' > .' + ICON,
-            isCenterRipple: true,
+            isCenterRipple: true
         };
         this.rippleIconFn = rippleEffect(this.element, iconModel);
     };
     TreeView.prototype.setFullRow = function (isEnabled) {
-        isEnabled ? addClass([this.element], FULLROWWRAP) : removeClass([this.element], FULLROWWRAP);
+        (isEnabled ? addClass : removeClass)([this.element], FULLROWWRAP);
     };
     TreeView.prototype.setMultiSelect = function (isEnabled) {
         var firstUl = select('.' + PARENTITEM, this.element);
@@ -333,27 +383,39 @@ var TreeView = /** @class */ (function (_super) {
             firstUl.removeAttribute('aria-multiselectable');
         }
     };
+    // eslint-disable-next-line
     TreeView.prototype.templateComplier = function (template) {
         if (template) {
+            this.hasTemplate = true;
+            // eslint-disable-next-line
             var e = void 0;
+            this.element.classList.add(INTERACTION);
             try {
                 if (document.querySelectorAll(template).length) {
                     return compile(document.querySelector(template).innerHTML.trim());
                 }
+                else {
+                    return compile(template);
+                }
             }
             catch (e) {
                 return compile(template);
             }
         }
+        this.element.classList.remove(INTERACTION);
         return undefined;
     };
-    TreeView.prototype.setDataBinding = function () {
+    TreeView.prototype.setDataBinding = function (changeDataSource) {
         var _this = this;
         this.treeList.push('false');
         if (this.fields.dataSource instanceof DataManager) {
+            /* eslint-disable */
+            this.isOffline = this.fields.dataSource.dataSource.offline;
             if (this.fields.dataSource.ready) {
                 this.fields.dataSource.ready.then(function (e) {
-                    if (_this.fields.dataSource instanceof DataManager && _this.fields.dataSource.dataSource.offline) {
+                    /* eslint-disable */
+                    _this.isOffline = _this.fields.dataSource.dataSource.offline;
+                    if (_this.fields.dataSource instanceof DataManager && _this.isOffline) {
                         _this.treeList.pop();
                         _this.treeData = e.result;
                         _this.isNumberTypeId = _this.getType();
@@ -363,6 +425,8 @@ var TreeView = /** @class */ (function (_super) {
                             _this.finalize();
                         }
                     }
+                }).catch(function (e) {
+                    _this.trigger('actionFailure', { error: e });
                 });
             }
             else {
@@ -371,10 +435,16 @@ var TreeView = /** @class */ (function (_super) {
                     _this.treeData = e.result;
                     _this.isNumberTypeId = _this.getType();
                     _this.setRootData();
+                    if (changeDataSource) {
+                        _this.changeDataSource = true;
+                    }
                     _this.renderItems(true);
+                    _this.changeDataSource = false;
                     if (_this.treeList.length === 0 && !_this.isLoaded) {
                         _this.finalize();
                     }
+                }).catch(function (e) {
+                    _this.trigger('actionFailure', { error: e });
                 });
             }
         }
@@ -404,7 +474,7 @@ var TreeView = /** @class */ (function (_super) {
             for (var _i = 0, _a = Object.keys(prop); _i < _a.length; _i++) {
                 var col = _a[_i];
                 if (col !== 'dataSource' && col !== 'tableName' && col !== 'child' && !!mapper[col]
-                    && columns.indexOf(mapper[col]) === -1) {
+                    && col !== 'url' && columns.indexOf(mapper[col]) === -1) {
                     columns.push(mapper[col]);
                 }
             }
@@ -442,24 +512,244 @@ var TreeView = /** @class */ (function (_super) {
         }
     };
     TreeView.prototype.renderItems = function (isSorted) {
+        /* eslint-disable */
         this.listBaseOption.ariaAttributes.level = 1;
-        this.ulElement = ListBase.createList(this.createElement, isSorted ? this.rootData : this.getSortedData(this.rootData), this.listBaseOption);
+        var sortedData = this.getSortedData(this.rootData);
+        this.ulElement = ListBase.createList(this.createElement, isSorted ? this.rootData : sortedData, this.listBaseOption);
         this.element.appendChild(this.ulElement);
+        var rootNodes = this.ulElement.querySelectorAll('.e-list-item');
         if (this.loadOnDemand === false) {
-            var rootNodes = this.ulElement.querySelectorAll('.e-list-item');
             var i = 0;
             while (i < rootNodes.length) {
                 this.renderChildNodes(rootNodes[i], true, null, true);
                 i++;
             }
         }
-        else {
+        var parentEle = selectAll('.' + PARENTITEM, this.element);
+        if ((parentEle.length === 1 && (rootNodes && rootNodes.length !== 0)) || this.loadOnDemand) {
             this.finalizeNode(this.element);
         }
+        this.parentNodeCheck = [];
+        this.parentCheckData = [];
+        this.updateCheckedStateFromDS();
+        if (this.autoCheck && this.showCheckBox && !this.isLoaded) {
+            this.updateParentCheckState();
+        }
+    };
+    /**
+     * Update the checkedNodes from datasource at initial rendering
+     */
+    TreeView.prototype.updateCheckedStateFromDS = function (id) {
+        this.validNodes = [];
+        if (this.treeData && this.showCheckBox) {
+            if (this.dataType === 1) {
+                var mapper = this.fields;
+                var resultData = new DataManager(this.treeData).executeLocal(new Query().where(mapper.isChecked, 'equal', true, false));
+                for (var i = 0; i < resultData.length; i++) {
+                    var resultId = resultData[i][this.fields.id] ? resultData[i][this.fields.id].toString() : null;
+                    var resultPId = resultData[i][this.fields.parentID] ? resultData[i][this.fields.parentID].toString() : null;
+                    if (this.checkedNodes.indexOf(resultId) === -1 && !(this.isLoaded)) {
+                        this.checkedNodes.push(resultId);
+                    }
+                    if (resultData[i][this.fields.hasChildren]) {
+                        var id_1 = resultData[i][this.fields.id];
+                        var childData = new DataManager(this.treeData).
+                            executeLocal(new Query().where(mapper.parentID, 'equal', id_1, false));
+                        for (var child = 0; child < childData.length; child++) {
+                            var childId = childData[child][this.fields.id] ? childData[child][this.fields.id].toString() : null;
+                            if (this.checkedNodes.indexOf(childId) === -1 && this.autoCheck) {
+                                this.checkedNodes.push(childId);
+                            }
+                        }
+                    }
+                }
+                for (var i = 0; i < this.checkedNodes.length; i++) {
+                    var mapper_1 = this.fields;
+                    var checkState = new DataManager(this.treeData).
+                        executeLocal(new Query().where(mapper_1.id, 'equal', this.checkedNodes[i], true));
+                    if (checkState[0] && this.autoCheck) {
+                        this.getCheckedNodeDetails(mapper_1, checkState);
+                        this.checkIndeterminateState(checkState[0]);
+                    }
+                    if (checkState.length > 0) {
+                        var checkedId = checkState[0][this.fields.id] ? checkState[0][this.fields.id].toString() : null;
+                        if (this.checkedNodes.indexOf(checkedId) > -1 && this.validNodes.indexOf(checkedId) === -1) {
+                            this.validNodes.push(checkedId);
+                        }
+                    }
+                    var checkedData = new DataManager(this.treeData).
+                        executeLocal(new Query().where(mapper_1.parentID, 'equal', this.checkedNodes[i], true));
+                    for (var index = 0; index < checkedData.length; index++) {
+                        var checkedId = checkedData[index][this.fields.id] ? checkedData[index][this.fields.id].toString() : null;
+                        if (this.checkedNodes.indexOf(checkedId) === -1 && this.autoCheck) {
+                            this.checkedNodes.push(checkedId);
+                        }
+                        if (this.checkedNodes.indexOf(checkedId) > -1 && this.validNodes.indexOf(checkedId) === -1) {
+                            this.validNodes.push(checkedId);
+                        }
+                    }
+                }
+            }
+            else if (this.dataType === 2 || (this.fields.dataSource instanceof DataManager &&
+                this.isOffline)) {
+                for (var index = 0; index < this.treeData.length; index++) {
+                    var fieldId = this.treeData[index][this.fields.id] ? this.treeData[index][this.fields.id].toString() : '';
+                    if (this.treeData[index][this.fields.isChecked] && !(this.isLoaded) && this.checkedNodes.indexOf(fieldId) === -1) {
+                        this.checkedNodes.push(fieldId);
+                    }
+                    if (this.checkedNodes.indexOf(fieldId) > -1 && this.validNodes.indexOf(fieldId) === -1) {
+                        this.validNodes.push(fieldId);
+                    }
+                    var childItems = getValue(this.fields.child.toString(), this.treeData[index]);
+                    if (childItems) {
+                        this.updateChildCheckState(childItems, this.treeData[index]);
+                    }
+                }
+                this.validNodes = (this.enablePersistence) ? this.checkedNodes : this.validNodes;
+            }
+            this.setProperties({ checkedNodes: this.validNodes }, true);
+        }
+    };
+    /**
+     * To check whether the list data has sub child and to change the parent check state accordingly
+     */
+    TreeView.prototype.getCheckedNodeDetails = function (mapper, checkNodes) {
+        var id = checkNodes[0][this.fields.parentID] ? checkNodes[0][this.fields.parentID].toString() : null;
+        var count = 0;
+        var element = this.element.querySelector('[data-uid="' + checkNodes[0][this.fields.id] + '"]');
+        var parentEle = this.element.querySelector('[data-uid="' + checkNodes[0][this.fields.parentID] + '"]');
+        if (!element && !parentEle) {
+            var len = this.parentNodeCheck.length;
+            if (this.parentNodeCheck.indexOf(id) === -1) {
+                this.parentNodeCheck.push(id);
+            }
+            var childNodes = this.getChildNodes(this.treeData, id);
+            for (var i = 0; i < childNodes.length; i++) {
+                var childId = childNodes[i][this.fields.id] ? childNodes[i][this.fields.id].toString() : null;
+                if (this.checkedNodes.indexOf(childId) !== -1) {
+                    count++;
+                }
+                if (count === childNodes.length && this.checkedNodes.indexOf(id) === -1) {
+                    this.checkedNodes.push(id);
+                }
+            }
+            var preElement = new DataManager(this.treeData).
+                executeLocal(new Query().where(mapper.id, 'equal', id, true));
+            this.getCheckedNodeDetails(mapper, preElement);
+        }
+        else if (parentEle) {
+            var check = select('.' + CHECK, parentEle);
+            if (!check) {
+                this.changeState(parentEle, 'indeterminate', null, true, true);
+            }
+        }
+    };
+    /**
+     * Update the checkedNodes and parent state when all the child Nodes are in checkedstate at initial rendering
+     */
+    TreeView.prototype.updateParentCheckState = function () {
+        var indeterminate = selectAll('.' + INDETERMINATE, this.element);
+        var childCheckedElement;
+        for (var i = 0; i < indeterminate.length; i++) {
+            var node = closest(indeterminate[i], '.' + LISTITEM);
+            var nodeId = node.getAttribute('data-uid').toString();
+            if (this.dataType === 1) {
+                childCheckedElement = new DataManager(this.treeData).
+                    executeLocal(new Query().where(this.fields.parentID, 'equal', nodeId, true));
+            }
+            else {
+                childCheckedElement = this.getChildNodes(this.treeData, nodeId);
+            }
+            var count = 0;
+            if (childCheckedElement) {
+                for (var j = 0; j < childCheckedElement.length; j++) {
+                    var childId = childCheckedElement[j][this.fields.id].toString();
+                    if (this.checkedNodes.indexOf(childId) !== -1) {
+                        count++;
+                    }
+                }
+                if (count === childCheckedElement.length) {
+                    var nodeCheck = node.getAttribute('data-uid');
+                    if (this.checkedNodes.indexOf(nodeCheck) === -1) {
+                        this.checkedNodes.push(nodeCheck);
+                    }
+                    this.changeState(node, 'check', null, true, true);
+                }
+                else if (count === 0 && this.checkedNodes.length === 0) {
+                    this.changeState(node, 'uncheck', null, true, true);
+                }
+            }
+        }
+    };
+    /**
+     * Change the parent to indeterminate state whenever the child is in checked state which is not rendered in DOM
+     */
+    TreeView.prototype.checkIndeterminateState = function (data) {
+        var element;
+        if (this.dataType === 1) {
+            element = this.element.querySelector('[data-uid="' + data[this.fields.parentID] + '"]');
+        }
+        else {
+            element = this.element.querySelector('[data-uid="' + data[this.fields.id] + '"]');
+        }
+        if (element) {
+            var ariaChecked = element.querySelector('.' + CHECKBOXWRAP).getAttribute('aria-checked');
+            if (ariaChecked !== 'true') {
+                this.changeState(element, 'indeterminate', null, true, true);
+            }
+        }
+        else if (this.dataType === 2) {
+            var len = this.parentNodeCheck.length;
+            if (this.parentNodeCheck.indexOf(data[this.fields.id].toString()) === -1) {
+                this.parentNodeCheck.push(data[this.fields.id].toString());
+            }
+        }
+    };
+    /**
+     * Update the checkedNodes for child and subchild from datasource (hierarchical datasource) at initial rendering
+     */
+    TreeView.prototype.updateChildCheckState = function (childItems, treeData) {
+        var count = 0;
+        var checkedParent = treeData[this.fields.id] ? treeData[this.fields.id].toString() : '';
+        for (var index = 0; index < childItems.length; index++) {
+            var checkedChild = childItems[index][this.fields.id] ? childItems[index][this.fields.id].toString() : '';
+            if (childItems[index][this.fields.isChecked] && !(this.isLoaded) && this.checkedNodes.indexOf(checkedChild) === -1) {
+                this.checkedNodes.push(checkedChild);
+            }
+            if (this.checkedNodes.indexOf(checkedParent) !== -1 && this.checkedNodes.indexOf(checkedChild) === -1 && this.autoCheck) {
+                this.checkedNodes.push(checkedChild);
+            }
+            if (this.checkedNodes.indexOf(checkedChild) !== -1 && this.autoCheck) {
+                count++;
+            }
+            if (this.checkedNodes.indexOf(checkedChild) > -1 && this.validNodes.indexOf(checkedChild) === -1) {
+                this.validNodes.push(checkedChild);
+            }
+            var subChildItems = getValue(this.fields.child.toString(), childItems[index]);
+            if (subChildItems && subChildItems.length) {
+                if (this.parentCheckData.indexOf(treeData) === -1)
+                    this.parentCheckData.push(treeData);
+                this.updateChildCheckState(subChildItems, childItems[index]);
+            }
+            if (count === childItems.length && this.autoCheck && this.checkedNodes.indexOf(checkedParent) === -1) {
+                this.checkedNodes.push(checkedParent);
+            }
+        }
+        if (count !== 0 && this.autoCheck) {
+            this.checkIndeterminateState(treeData);
+            for (var len = 0; len < this.parentCheckData.length; len++) {
+                if ((treeData !== this.parentCheckData[len]) && (this.parentCheckData[len])) {
+                    this.checkIndeterminateState(this.parentCheckData[len]);
+                }
+            }
+        }
+        this.parentCheckData = [];
     };
     TreeView.prototype.beforeNodeCreate = function (e) {
         if (this.showCheckBox) {
             var checkboxEle = createCheckBox(this.createElement, true, { cssClass: this.touchClass });
+            checkboxEle.setAttribute('role', 'checkbox');
+            checkboxEle.setAttribute('aria-label', 'checkbox');
             var icon = select('div.' + ICON, e.item);
             var id = e.item.getAttribute('data-uid');
             e.item.childNodes[0].insertBefore(checkboxEle, e.item.childNodes[0].childNodes[isNOU(icon) ? 0 : 1]);
@@ -490,17 +780,26 @@ var TreeView = /** @class */ (function (_super) {
         var fields = e.fields;
         this.addActionClass(e, fields.selected, SELECTED);
         this.addActionClass(e, fields.expanded, EXPANDED);
+        e.item.setAttribute("tabindex", "-1");
+        EventHandler.add(e.item, 'focus', this.focusIn, this);
         if (!isNOU(this.nodeTemplateFn)) {
             var textEle = e.item.querySelector('.' + LISTTEXT);
+            var dataId = e.item.getAttribute('data-uid');
             textEle.innerHTML = '';
-            append(this.nodeTemplateFn(e.curData), textEle);
+            this.renderNodeTemplate(e.curData, textEle, dataId);
         }
         var eventArgs = {
             node: e.item,
             nodeData: e.curData,
             text: e.text,
         };
-        this.trigger('drawNode', eventArgs);
+        if (!this.isRefreshed) {
+            this.trigger('drawNode', eventArgs);
+            if (e.curData[this.fields.selectable] === false && !this.showCheckBox) {
+                e.item.classList.add(PREVENTSELECT);
+                e.item.firstElementChild.setAttribute('style', 'cursor: not-allowed');
+            }
+        }
     };
     TreeView.prototype.frameMouseHandler = function (e) {
         var rippleSpan = select('.' + CHECKBOXRIPPLE, e.target.parentElement);
@@ -516,7 +815,12 @@ var TreeView = /** @class */ (function (_super) {
     TreeView.prototype.getDataType = function (ds, mapper) {
         if (this.fields.dataSource instanceof DataManager) {
             for (var i = 0; i < ds.length; i++) {
-                if ((typeof mapper.child === 'string') && isNOU(getValue(mapper.child, ds[i]))) {
+                if (this.isOffline) {
+                    if ((typeof mapper.child === 'string') && isNOU(getValue(mapper.child, ds[i])) && !isNOU(getValue(mapper.parentID, ds[i]))) {
+                        return 1;
+                    }
+                }
+                else if ((typeof mapper.child === 'string') && isNOU(getValue(mapper.child, ds[i]))) {
                     return 1;
                 }
             }
@@ -581,16 +885,9 @@ var TreeView = /** @class */ (function (_super) {
         }
     };
     TreeView.prototype.updateCheckedProp = function () {
-        var _this = this;
         if (this.showCheckBox) {
-            var nodes_1 = [].concat([], this.checkedNodes);
-            this.checkedNodes.forEach(function (value, index) {
-                var checkBox = _this.element.querySelector('[data-uid="' + value + '"]');
-                if (isNOU(checkBox)) {
-                    nodes_1 = nodes_1.filter(function (e) { return e !== value; });
-                }
-            });
-            this.setProperties({ checkedNodes: nodes_1 }, true);
+            var nodes = [].concat([], this.checkedNodes);
+            this.setProperties({ checkedNodes: nodes }, true);
         }
     };
     TreeView.prototype.ensureIndeterminate = function () {
@@ -626,12 +923,13 @@ var TreeView = /** @class */ (function (_super) {
                 ulElement = select('.' + PARENTITEM, element);
             }
             var checkedNodes = selectAll('.' + CHECK, ulElement);
+            var indeterminateNodes = selectAll('.' + INDETERMINATE, ulElement);
             var nodes = selectAll('.' + LISTITEM, ulElement);
             var checkBoxEle = element.getElementsByClassName(CHECKBOXWRAP)[0];
             if (nodes.length === checkedNodes.length) {
                 this.changeState(checkBoxEle, 'check', null, true, true);
             }
-            else if (checkedNodes.length > 0) {
+            else if (checkedNodes.length > 0 || indeterminateNodes.length > 0) {
                 this.changeState(checkBoxEle, 'indeterminate', null, true, true);
             }
             else if (checkedNodes.length === 0) {
@@ -651,28 +949,97 @@ var TreeView = /** @class */ (function (_super) {
             if (!isNOU(childElement)) {
                 checkBoxes = selectAll('.' + CHECKBOXWRAP, childElement);
                 var isChecked = element.getElementsByClassName(CHECKBOXFRAME)[0].classList.contains(CHECK);
+                var parentCheck = element.getElementsByClassName(CHECKBOXFRAME)[0].classList.contains(INDETERMINATE);
+                var childCheck = childElement.querySelectorAll('li');
+                var expandState = childElement.parentElement.getAttribute('aria-expanded');
                 var checkedState = void 0;
                 for (var index = 0; index < checkBoxes.length; index++) {
+                    var childId = childCheck[index].getAttribute('data-uid');
                     if (!isNOU(this.currentLoadData) && !isNOU(getValue(this.fields.isChecked, this.currentLoadData[index]))) {
                         checkedState = getValue(this.fields.isChecked, this.currentLoadData[index]) ? 'check' : 'uncheck';
                         if (this.ele !== -1) {
                             checkedState = isChecked ? 'check' : 'uncheck';
                         }
+                        if ((checkedState === 'uncheck') && (!isUndefined(this.parentNodeCheck) && this.autoCheck
+                            && this.parentNodeCheck.indexOf(childId) !== -1)) {
+                            this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(childId), 1);
+                            checkedState = 'indeterminate';
+                        }
                     }
                     else {
                         var isNodeChecked = checkBoxes[index].getElementsByClassName(CHECKBOXFRAME)[0].classList.contains(CHECK);
-                        checkedState = (!this.isLoaded && isNodeChecked) ? 'check' : (isChecked ? 'check' : 'uncheck');
+                        if (isChecked) {
+                            checkedState = 'check';
+                        }
+                        else if (isNodeChecked && !this.isLoaded) {
+                            checkedState = 'check';
+                        }
+                        else if (this.checkedNodes.indexOf(childId) !== -1 && this.isLoaded && (parentCheck || isChecked)) {
+                            checkedState = 'check';
+                        }
+                        else if (childCheck[index].classList.contains(CHILD) && (!isUndefined(this.parentNodeCheck) && this.autoCheck
+                            && (isChecked || parentCheck) && this.parentNodeCheck.indexOf(childId) !== -1)) {
+                            checkedState = 'indeterminate';
+                            this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(childId), 1);
+                        }
+                        else if (this.dataType === 1 && (!isUndefined(this.parentNodeCheck) && this.autoCheck &&
+                            (isChecked || parentCheck) && this.parentNodeCheck.indexOf(childId) !== -1)) {
+                            checkedState = 'indeterminate';
+                            this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(childId), 1);
+                        }
+                        else {
+                            checkedState = 'uncheck';
+                        }
                     }
                     this.changeState(checkBoxes[index], checkedState, e, true, true);
                 }
             }
+            if (this.autoCheck && this.isLoaded) {
+                this.updateParentCheckState();
+            }
         }
     };
     TreeView.prototype.doCheckBoxAction = function (nodes, doCheck) {
+        var li = selectAll('.' + LISTITEM, this.element);
         if (!isNOU(nodes)) {
-            for (var i = 0, len = nodes.length; i < len; i++) {
-                var liEle = this.getElement(nodes[i]);
+            for (var len = nodes.length; len >= 0; len--) {
+                var liEle = void 0;
+                if (nodes.length === 1) {
+                    liEle = this.getElement(nodes[len - 1]);
+                }
+                else {
+                    liEle = this.getElement(nodes[len]);
+                }
                 if (isNOU(liEle)) {
+                    var node = void 0;
+                    node = nodes[len - nodes.length] ? nodes[len - nodes.length].toString() : nodes[len] ? nodes[len].toString() : null;
+                    if (node !== '' && doCheck && node) {
+                        this.setValidCheckedNode(node);
+                        this.dynamicCheckState(node, doCheck);
+                    }
+                    else if (this.checkedNodes.indexOf(node) !== -1 && node !== '' && !doCheck) {
+                        this.checkedNodes.splice(this.checkedNodes.indexOf(node), 1);
+                        var childItems = this.getChildNodes(this.treeData, node);
+                        if (childItems) {
+                            for (var i = 0; i < childItems.length; i++) {
+                                var id = childItems[i][this.fields.id] ? childItems[i][this.fields.id].toString() : null;
+                                if (this.checkedNodes.indexOf(id) !== -1) {
+                                    this.checkedNodes.splice(this.checkedNodes.indexOf(id), 1);
+                                    var ele = this.element.querySelector('[data-uid="' + id + '"]');
+                                    if (ele) {
+                                        this.changeState(ele, 'uncheck', null);
+                                    }
+                                }
+                            }
+                            if (this.parentNodeCheck.indexOf(node) !== -1) {
+                                this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(node), 1);
+                            }
+                        }
+                        if (node) {
+                            this.dynamicCheckState(node, doCheck);
+                        }
+                        this.updateField(this.treeData, this.fields, node, 'isChecked', null);
+                    }
                     continue;
                 }
                 var checkBox = select('.' + PARENTITEM + ' .' + CHECKBOXWRAP, liEle);
@@ -681,23 +1048,236 @@ var TreeView = /** @class */ (function (_super) {
         }
         else {
             var checkBoxes = selectAll('.' + CHECKBOXWRAP, this.element);
-            for (var index = 0; index < checkBoxes.length; index++) {
-                this.changeState(checkBoxes[index], doCheck ? 'check' : 'uncheck');
+            if (this.loadOnDemand) {
+                for (var index = 0; index < checkBoxes.length; index++) {
+                    this.updateFieldChecked(checkBoxes[index], doCheck);
+                    this.changeState(checkBoxes[index], doCheck ? 'check' : 'uncheck', null, null, null, doCheck);
+                }
+            }
+            else {
+                for (var index = 0; index < checkBoxes.length; index++) {
+                    this.updateFieldChecked(checkBoxes[index], doCheck);
+                    this.changeState(checkBoxes[index], doCheck ? 'check' : 'uncheck');
+                }
             }
         }
+        if (nodes) {
+            for (var j = 0; j < nodes.length; j++) {
+                var node = nodes[j] ? nodes[j].toString() : '';
+                if (!doCheck) {
+                    this.updateField(this.treeData, this.fields, node, 'isChecked', null);
+                }
+            }
+        }
+        if (this.autoCheck) {
+            this.updateParentCheckState();
+        }
     };
-    TreeView.prototype.changeState = function (wrapper, state, e, isPrevent, isAdd) {
-        var ariaState;
+    TreeView.prototype.updateFieldChecked = function (checkbox, doCheck) {
+        var currLi = closest(checkbox, '.' + LISTITEM);
+        var id = currLi.getAttribute('data-uid');
+        var nodeDetails = this.getNodeData(currLi);
+        if (nodeDetails.isChecked === 'true' && !doCheck) {
+            this.updateField(this.treeData, this.fields, id, 'isChecked', null);
+        }
+    };
+    /**
+     * Changes the parent and child  check state while changing the checkedNodes via setmodel
+     */
+    TreeView.prototype.dynamicCheckState = function (node, doCheck) {
+        if (this.dataType === 1) {
+            var count = 0;
+            var resultId = new DataManager(this.treeData).executeLocal(new Query().where(this.fields.id, 'equal', node, true));
+            if (resultId[0]) {
+                var id = resultId[0][this.fields.id] ? resultId[0][this.fields.id].toString() : null;
+                var parent_1 = resultId[0][this.fields.parentID] ? resultId[0][this.fields.parentID].toString() : null;
+                var parentElement = this.element.querySelector('[data-uid="' + parent_1 + '"]');
+                var indeterminate = parentElement ? select('.' + INDETERMINATE, parentElement) : null;
+                var check = parentElement ? select('.' + CHECK, parentElement) : null;
+                var element = this.element.querySelector('[data-uid="' + id + '"]');
+                var childNodes = this.getChildNodes(this.treeData, parent_1);
+                if (childNodes) {
+                    for (var i = 0; i < childNodes.length; i++) {
+                        var childId = childNodes[i][this.fields.id] ? childNodes[i][this.fields.id].toString() : null;
+                        if (this.checkedNodes.indexOf(childId) !== -1) {
+                            count++;
+                        }
+                    }
+                }
+                if (this.checkedNodes.indexOf(node) !== -1 && parentElement && (id === node) && this.autoCheck) {
+                    this.changeState(parentElement, 'indeterminate', null);
+                }
+                else if (this.checkedNodes.indexOf(node) === -1 && element && (id === node) && !doCheck) {
+                    this.changeState(element, 'uncheck', null);
+                }
+                else if (this.checkedNodes.indexOf(node) !== -1 && element && (id === node) && doCheck) {
+                    this.changeState(element, 'check', null);
+                }
+                else if (this.checkedNodes.indexOf(node) === -1 && !element && parentElement && (id === node) && this.autoCheck
+                    && count !== 0) {
+                    this.changeState(parentElement, 'indeterminate', null);
+                }
+                else if (this.checkedNodes.indexOf(node) === -1 && !element && parentElement && (id === node) && this.autoCheck
+                    && count === 0) {
+                    this.changeState(parentElement, 'uncheck', null);
+                }
+                else if (!element && !parentElement && (id === node) && this.autoCheck) {
+                    this.updateIndeterminate(node, doCheck);
+                }
+            }
+        }
+        else if (this.dataType === 2 || (this.fields.dataSource instanceof DataManager &&
+            this.isOffline)) {
+            var id = void 0;
+            var parentElement = void 0;
+            var check = void 0;
+            for (var i = 0; i < this.treeData.length; i++) {
+                id = this.treeData[i][this.fields.id] ? this.treeData[i][this.fields.id].toString() : '';
+                parentElement = this.element.querySelector('[data-uid="' + id + '"]');
+                check = parentElement ? select('.' + CHECK, parentElement) : null;
+                if (this.checkedNodes.indexOf(id) === -1 && parentElement && check && !doCheck) {
+                    this.changeState(parentElement, 'uncheck', null);
+                }
+                var subChild = getValue(this.fields.child.toString(), this.treeData[i]);
+                if (subChild) {
+                    this.updateChildIndeterminate(subChild, id, node, doCheck, id);
+                }
+            }
+        }
+    };
+    /**
+     * updates the parent and child  check state while changing the checkedNodes via setmodel for listData
+     */
+    TreeView.prototype.updateIndeterminate = function (node, doCheck) {
+        var indeterminateData = this.getTreeData(node);
+        var count = 0;
+        var parent;
+        if (this.dataType === 1) {
+            parent = indeterminateData[0][this.fields.parentID] ? indeterminateData[0][this.fields.parentID].toString() : null;
+        }
+        var childNodes = this.getChildNodes(this.treeData, parent);
+        if (childNodes) {
+            for (var i = 0; i < childNodes.length; i++) {
+                var childId = childNodes[i][this.fields.id] ? childNodes[i][this.fields.id].toString() : null;
+                if (this.checkedNodes.indexOf(childId) !== -1) {
+                    count++;
+                }
+            }
+        }
+        var parentElement = this.element.querySelector('[data-uid="' + parent + '"]');
+        if (parentElement && doCheck) {
+            this.changeState(parentElement, 'indeterminate', null);
+        }
+        else if (!doCheck && parentElement && this.parentNodeCheck.indexOf(parent) === -1 && count !== 0) {
+            this.changeState(parentElement, 'indeterminate', null);
+        }
+        else if (!doCheck && parentElement && this.parentNodeCheck.indexOf(parent) === -1 && count === 0) {
+            this.changeState(parentElement, 'uncheck', null);
+        }
+        else if (!parentElement) {
+            if (!doCheck && this.checkedNodes.indexOf(parent) === -1 && this.parentNodeCheck.indexOf(parent) !== -1) {
+                this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(parent), 1);
+            }
+            else if (doCheck && this.checkedNodes.indexOf(parent) === -1 && this.parentNodeCheck.indexOf(parent) === -1) {
+                this.parentNodeCheck.push(parent);
+            }
+            else if (!doCheck && this.checkedNodes.indexOf(parent) !== -1 && this.parentNodeCheck.indexOf(parent) === -1
+                && count !== 0) {
+                this.parentNodeCheck.push(parent);
+            }
+            this.updateIndeterminate(parent, doCheck);
+            if (this.checkedNodes.indexOf(parent) !== -1 && !doCheck) {
+                this.checkedNodes.splice(this.checkedNodes.indexOf(parent), 1);
+            }
+        }
+    };
+    /**
+     * updates the parent and child  check state while changing the checkedNodes via setmodel for hierarchical data
+     */
+    TreeView.prototype.updateChildIndeterminate = function (subChild, parent, node, doCheck, child) {
+        var count = 0;
+        for (var j = 0; j < subChild.length; j++) {
+            var subId = subChild[j][this.fields.id] ? subChild[j][this.fields.id].toString() : '';
+            if (this.checkedNodes.indexOf(subId) !== -1) {
+                count++;
+            }
+            var parentElement = this.element.querySelector('[data-uid="' + parent + '"]');
+            var indeterminate = parentElement ? select('.' + INDETERMINATE, parentElement) : null;
+            var check = parentElement ? select('.' + CHECK, parentElement) : null;
+            var element = this.element.querySelector('[data-uid="' + subId + '"]');
+            var childElementCheck = element ? select('.' + CHECK, element) : null;
+            if (this.checkedNodes.indexOf(node) !== -1 && parentElement && (subId === node) && this.autoCheck) {
+                this.changeState(parentElement, 'indeterminate', null);
+            }
+            else if (this.checkedNodes.indexOf(node) === -1 && parentElement && !element && (subId === node) && !doCheck) {
+                if (this.autoCheck) {
+                    this.changeState(parentElement, 'uncheck', null);
+                }
+                else {
+                    if (count !== 0) {
+                        this.changeState(parentElement, 'indeterminate', null);
+                    }
+                    else {
+                        this.changeState(parentElement, 'uncheck', null);
+                    }
+                }
+            }
+            else if (this.checkedNodes.indexOf(node) === -1 && element && (subId === node) && !doCheck) {
+                this.changeState(element, 'uncheck', null);
+            }
+            else if (this.checkedNodes.indexOf(node) === -1 && indeterminate && (subId === node) && this.autoCheck && count === 0
+                && !doCheck) {
+                indeterminate.classList.remove(INDETERMINATE);
+            }
+            else if (this.checkedNodes.indexOf(node) === -1 && !element && check && (subId === node) && count === 0) {
+                this.changeState(parentElement, 'uncheck', null);
+            }
+            else if (this.checkedNodes.indexOf(subId) === -1 && element && childElementCheck && count === 0) {
+                this.changeState(element, 'uncheck', null);
+            }
+            else if (!element && !parentElement && (subId === node) || (this.parentNodeCheck.indexOf(parent) !== -1) && this.autoCheck) {
+                var childElement = this.element.querySelector('[data-uid="' + child + '"]');
+                if (doCheck && count !== 0) {
+                    this.changeState(childElement, 'indeterminate', null);
+                }
+                else if (doCheck && count === subChild.length && this.checkedNodes.indexOf(parent) === -1) {
+                    this.checkedNodes.push(parent);
+                }
+                else if (!doCheck && count === 0 && this.parentNodeCheck.indexOf(parent) !== -1) {
+                    this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(parent));
+                }
+                if (this.parentNodeCheck.indexOf(parent) === -1) {
+                    this.parentNodeCheck.push(parent);
+                }
+            }
+            var innerChild = getValue(this.fields.child.toString(), subChild[j]);
+            if (innerChild) {
+                this.updateChildIndeterminate(innerChild, subId, node, doCheck, child);
+            }
+        }
+    };
+    TreeView.prototype.changeState = function (wrapper, state, e, isPrevent, isAdd, doCheck) {
+        var _this = this;
         var eventArgs;
         var currLi = closest(wrapper, '.' + LISTITEM);
+        if (wrapper === currLi) {
+            wrapper = select('.' + CHECKBOXWRAP, currLi);
+        }
         if (!isPrevent) {
             this.checkActionNodes = [];
             eventArgs = this.getCheckEvent(currLi, state, e);
-            this.trigger('nodeChecking', eventArgs);
-            if (eventArgs.cancel) {
-                return;
-            }
+            this.trigger('nodeChecking', eventArgs, function (observedArgs) {
+                if (!observedArgs.cancel) {
+                    _this.nodeCheckAction(wrapper, state, currLi, observedArgs, e, isPrevent, isAdd, doCheck);
+                }
+            });
+        }
+        else {
+            this.nodeCheckAction(wrapper, state, currLi, eventArgs, e, isPrevent, isAdd, doCheck);
         }
+    };
+    TreeView.prototype.nodeCheckAction = function (wrapper, state, currLi, eventArgs, e, isPrevent, isAdd, doCheck) {
+        var ariaState;
         var frameSpan = wrapper.getElementsByClassName(CHECKBOXFRAME)[0];
         if (state === 'check' && !frameSpan.classList.contains(CHECK)) {
             frameSpan.classList.remove(INDETERMINATE);
@@ -710,7 +1290,7 @@ var TreeView = /** @class */ (function (_super) {
             this.removeCheck(currLi);
             ariaState = 'false';
         }
-        else if (state === 'indeterminate' && !frameSpan.classList.contains(INDETERMINATE) && this.autoCheck) {
+        else if (state === 'indeterminate' && this.autoCheck) {
             frameSpan.classList.remove(CHECK);
             frameSpan.classList.add(INDETERMINATE);
             this.removeCheck(currLi);
@@ -727,6 +1307,9 @@ var TreeView = /** @class */ (function (_super) {
                 eventArgs.data = data;
             }
         }
+        if (doCheck !== undefined) {
+            this.ensureStateChange(currLi, doCheck);
+        }
         if (!isPrevent) {
             if (!isNOU(ariaState)) {
                 wrapper.setAttribute('aria-checked', ariaState);
@@ -755,20 +1338,49 @@ var TreeView = /** @class */ (function (_super) {
     };
     TreeView.prototype.finalize = function () {
         var firstUl = select('.' + PARENTITEM, this.element);
-        firstUl.setAttribute('role', treeAriaAttr.treeRole);
-        this.setMultiSelect(this.allowMultiSelection);
-        var firstNode = select('.' + LISTITEM, this.element);
-        if (firstNode) {
-            addClass([firstNode], FOCUS);
-            this.updateIdAttr(null, firstNode);
+        if (!isNullOrUndefined(firstUl)) {
+            firstUl.setAttribute('role', treeAriaAttr.treeRole);
+            this.setMultiSelect(this.allowMultiSelection);
+            var firstNode = select('.' + LISTITEM, this.element);
+            if (firstNode) {
+                firstNode.setAttribute('tabindex', '0');
+                this.updateIdAttr(null, firstNode);
+            }
+            if (this.allowTextWrap) {
+                this.updateWrap();
+            }
+            this.renderReactTemplates();
+            this.hasPid = this.rootData[0] ? this.rootData[0].hasOwnProperty(this.fields.parentID) : false;
+            this.doExpandAction();
+        }
+    };
+    TreeView.prototype.setTextWrap = function () {
+        (this.allowTextWrap ? addClass : removeClass)([this.element], LISTWRAP);
+        if (Browser.isIE) {
+            (this.allowTextWrap ? addClass : removeClass)([this.element], IELISTWRAP);
+        }
+    };
+    TreeView.prototype.updateWrap = function (ulEle) {
+        if (!this.fullRowSelect) {
+            return;
+        }
+        var liEle = ulEle ? selectAll('.' + LISTITEM, ulEle) : this.liList;
+        var length = liEle.length;
+        for (var i = 0; i < length; i++) {
+            this.calculateWrap(liEle[i]);
+        }
+    };
+    TreeView.prototype.calculateWrap = function (liEle) {
+        var element = select('.' + FULLROW, liEle);
+        if (element && element.nextElementSibling) {
+            element.style.height = this.allowTextWrap ? element.nextElementSibling.offsetHeight + 'px' : '';
         }
-        this.hasPid = this.rootData[0] ? this.rootData[0].hasOwnProperty(this.fields.parentID) : false;
-        this.doExpandAction();
     };
     TreeView.prototype.doExpandAction = function () {
         var eUids = this.expandedNodes;
         if (this.isInitalExpand && eUids.length > 0) {
             this.setProperties({ expandedNodes: [] }, true);
+            /* eslint-disable */
             if (this.fields.dataSource instanceof DataManager) {
                 this.expandGivenNodes(eUids);
             }
@@ -781,6 +1393,12 @@ var TreeView = /** @class */ (function (_super) {
                             this.expandAction(eNode, icon, null);
                         }
                     }
+                    else {
+                        if (eUids[i] && this.expandChildren.indexOf(eUids[i]) === -1) {
+                            this.expandChildren.push(eUids[i].toString());
+                        }
+                        continue;
+                    }
                 }
                 this.afterFinalized();
             }
@@ -819,11 +1437,14 @@ var TreeView = /** @class */ (function (_super) {
     TreeView.prototype.afterFinalized = function () {
         this.doSelectionAction();
         this.updateCheckedProp();
-        this.isLoaded = true;
         this.isAnimate = true;
         this.isInitalExpand = false;
-        var eventArgs = { data: this.treeData };
-        this.trigger('dataBound', eventArgs);
+        if ((!this.isLoaded || this.isFieldChange) && !this.isNodeDropped) {
+            var eventArgs = { data: this.treeData };
+            this.trigger('dataBound', eventArgs);
+        }
+        this.isLoaded = true;
+        this.isNodeDropped = false;
     };
     TreeView.prototype.doSelectionAction = function () {
         var sNodes = selectAll('.' + SELECTED, this.element);
@@ -832,7 +1453,12 @@ var TreeView = /** @class */ (function (_super) {
             this.setProperties({ selectedNodes: [] }, true);
             for (var i = 0; i < sUids.length; i++) {
                 var sNode = select('[data-uid="' + sUids[i] + '"]', this.element);
-                this.selectNode(sNode, null, true);
+                if (sNode && !(sNode.classList.contains('e-active'))) {
+                    this.selectNode(sNode, null, true);
+                }
+                else {
+                    this.selectedNodes.push(sUids[i]);
+                }
                 if (!this.allowMultiSelection) {
                     break;
                 }
@@ -854,7 +1480,7 @@ var TreeView = /** @class */ (function (_super) {
         }
     };
     TreeView.prototype.clickHandler = function (event) {
-        var target = event.originalEvent.target;
+        var target = Browser.isDevice && !Browser.isIos ? document.elementFromPoint(event.originalEvent.changedTouches[0].clientX, event.originalEvent.changedTouches[0].clientY) : event.originalEvent.target;
         EventHandler.remove(this.element, 'contextmenu', this.preventContextMenu);
         if (!target || this.dragStartAction) {
             return;
@@ -862,10 +1488,12 @@ var TreeView = /** @class */ (function (_super) {
         else {
             var classList = target.classList;
             var li = closest(target, '.' + LISTITEM);
-            if (!li) {
+            if (!li || (li.classList.contains(PREVENTSELECT) && !(classList.contains(EXPANDABLE) || classList.contains(COLLAPSIBLE)))) {
                 return;
             }
-            else {
+            else if (event.originalEvent.which !== 3) {
+                var rippleElement = select('.' + RIPPLEELMENT, li);
+                var rippleIcons = select('.' + ICON, li);
                 this.removeHover();
                 this.setFocusElement(li);
                 if (this.showCheckBox && !li.classList.contains('e-disable')) {
@@ -883,26 +1511,29 @@ var TreeView = /** @class */ (function (_super) {
                 else if (classList.contains(COLLAPSIBLE)) {
                     this.collapseNode(li, target, event);
                 }
+                else if (rippleElement && rippleIcons) {
+                    if (rippleIcons.classList.contains(RIPPLE) && rippleIcons.classList.contains(EXPANDABLE)) {
+                        this.expandAction(li, rippleIcons, event);
+                    }
+                    else if (rippleIcons.classList.contains(RIPPLE) && rippleIcons.classList.contains(COLLAPSIBLE)) {
+                        this.collapseNode(li, rippleIcons, event);
+                    }
+                    else if (!classList.contains(PARENTITEM) && !classList.contains(LISTITEM)) {
+                        this.toggleSelect(li, event.originalEvent, false);
+                    }
+                }
                 else {
                     if (!classList.contains(PARENTITEM) && !classList.contains(LISTITEM)) {
                         this.toggleSelect(li, event.originalEvent, false);
                     }
                 }
-                this.triggerClickEvent(event.originalEvent, li);
             }
+            if (event.originalEvent.which === 3) {
+                this.isRightClick = true;
+            }
+            this.triggerClickEvent(event.originalEvent, li);
         }
     };
-    TreeView.prototype.nodeCheckingEvent = function (wrapper, isCheck, e) {
-        var currLi = closest(wrapper, '.' + LISTITEM);
-        this.checkActionNodes = [];
-        var ariaState = !isCheck ? 'true' : 'false';
-        if (!isNOU(ariaState)) {
-            wrapper.setAttribute('aria-checked', ariaState);
-        }
-        var eventArgs = this.getCheckEvent(currLi, isCheck ? 'uncheck' : 'check', e);
-        this.trigger('nodeChecking', eventArgs);
-        return eventArgs;
-    };
     TreeView.prototype.nodeCheckedEvent = function (wrapper, isCheck, e) {
         var currLi = closest(wrapper, '.' + LISTITEM);
         var eventArgs = this.getCheckEvent(wrapper, isCheck ? 'uncheck' : 'check', e);
@@ -918,6 +1549,7 @@ var TreeView = /** @class */ (function (_super) {
     };
     TreeView.prototype.expandNode = function (currLi, icon, loaded) {
         var _this = this;
+        this.renderReactTemplates();
         if (icon.classList.contains(LOAD)) {
             this.hideSpinner(icon);
         }
@@ -934,13 +1566,17 @@ var TreeView = /** @class */ (function (_super) {
                 var ul_1 = select('.' + PARENTITEM, currLi);
                 var liEle_1 = currLi;
                 this.setHeight(liEle_1, ul_1);
-                if (this.isAnimate) {
+                var activeElement_1 = select('.' + LISTITEM + '.' + ACTIVE, currLi);
+                if (this.isAnimate && !this.isRefreshed) {
                     this.aniObj.animate(ul_1, {
                         name: this.animation.expand.effect,
                         duration: this.animation.expand.duration,
                         timingFunction: this.animation.expand.easing,
                         begin: function (args) {
                             liEle_1.style.overflow = 'hidden';
+                            if (!isNullOrUndefined(activeElement_1) && activeElement_1 instanceof HTMLElement) {
+                                activeElement_1.classList.add(ITEM_ANIMATION_ACTIVE);
+                            }
                             start_1 = liEle_1.offsetHeight;
                             end_1 = select('.' + TEXTWRAP, currLi).offsetHeight;
                         },
@@ -950,6 +1586,9 @@ var TreeView = /** @class */ (function (_super) {
                         },
                         end: function (args) {
                             args.element.style.display = 'block';
+                            if (!isNullOrUndefined(activeElement_1) && activeElement_1 instanceof HTMLElement) {
+                                activeElement_1.classList.remove(ITEM_ANIMATION_ACTIVE);
+                            }
                             _this.expandedNode(liEle_1, ul_1, icon);
                         }
                     });
@@ -977,8 +1616,13 @@ var TreeView = /** @class */ (function (_super) {
         currLi.style.height = '';
         removeClass([icon], PROCESS);
         this.addExpand(currLi);
-        if (this.isLoaded && this.expandArgs) {
+        if (this.allowTextWrap && this.isLoaded && this.isFirstRender) {
+            this.updateWrap(currLi);
+            this.isFirstRender = false;
+        }
+        if (this.isLoaded && this.expandArgs && !this.isRefreshed) {
             this.expandArgs = this.getExpandEvent(currLi, null);
+            this.expandArgs.isInteracted = this.isInteracted;
             this.trigger('nodeExpanded', this.expandArgs);
         }
     };
@@ -1001,12 +1645,22 @@ var TreeView = /** @class */ (function (_super) {
         var colArgs;
         if (this.isLoaded) {
             colArgs = this.getExpandEvent(currLi, e);
-            this.trigger('nodeCollapsing', colArgs);
-            if (colArgs.cancel) {
-                removeClass([icon], PROCESS);
-                return;
-            }
+            this.isInteracted = colArgs.isInteracted;
+            this.trigger('nodeCollapsing', colArgs, function (observedArgs) {
+                if (observedArgs.cancel) {
+                    removeClass([icon], PROCESS);
+                }
+                else {
+                    _this.nodeCollapseAction(currLi, icon, observedArgs);
+                }
+            });
+        }
+        else {
+            this.nodeCollapseAction(currLi, icon, colArgs);
         }
+    };
+    TreeView.prototype.nodeCollapseAction = function (currLi, icon, colArgs) {
+        var _this = this;
         removeClass([icon], COLLAPSIBLE);
         addClass([icon], EXPANDABLE);
         var start = 0;
@@ -1014,6 +1668,7 @@ var TreeView = /** @class */ (function (_super) {
         var proxy = this;
         var ul = select('.' + PARENTITEM, currLi);
         var liEle = currLi;
+        var activeElement = select('.' + LISTITEM + '.' + ACTIVE, currLi);
         if (this.isAnimate) {
             this.aniObj.animate(ul, {
                 name: this.animation.collapse.effect,
@@ -1021,6 +1676,9 @@ var TreeView = /** @class */ (function (_super) {
                 timingFunction: this.animation.collapse.easing,
                 begin: function (args) {
                     liEle.style.overflow = 'hidden';
+                    if (!isNullOrUndefined(activeElement) && activeElement instanceof HTMLElement) {
+                        activeElement.classList.add(ITEM_ANIMATION_ACTIVE);
+                    }
                     start = select('.' + TEXTWRAP, currLi).offsetHeight;
                     end = liEle.offsetHeight;
                 },
@@ -1029,6 +1687,9 @@ var TreeView = /** @class */ (function (_super) {
                 },
                 end: function (args) {
                     args.element.style.display = 'none';
+                    if (!isNullOrUndefined(activeElement) && activeElement instanceof HTMLElement) {
+                        activeElement.classList.remove(ITEM_ANIMATION_ACTIVE);
+                    }
                     _this.collapsedNode(liEle, ul, icon, colArgs);
                 }
             });
@@ -1044,6 +1705,8 @@ var TreeView = /** @class */ (function (_super) {
         removeClass([icon], PROCESS);
         this.removeExpand(liEle);
         if (this.isLoaded) {
+            colArgs = this.getExpandEvent(liEle, null);
+            colArgs.isInteracted = this.isInteracted;
             this.trigger('nodeCollapsed', colArgs);
         }
     };
@@ -1083,31 +1746,37 @@ var TreeView = /** @class */ (function (_super) {
         }
         this.showSpinner(eicon);
         var childItems;
+        /* eslint-disable */
         if (this.fields.dataSource instanceof DataManager) {
             var level = this.parents(parentLi, '.' + PARENTITEM).length;
-            var mapper_1 = this.getChildFields(this.fields, level, 1);
-            if (isNOU(mapper_1) || isNOU(mapper_1.dataSource)) {
+            var mapper_2 = this.getChildFields(this.fields, level, 1);
+            if (isNOU(mapper_2) || isNOU(mapper_2.dataSource)) {
                 detach(eicon);
                 this.removeExpand(parentLi, true);
                 return;
             }
             this.treeList.push('false');
-            if (this.fields.dataSource instanceof DataManager && (this.fields.dataSource.dataSource.offline)) {
+            if (this.fields.dataSource instanceof DataManager && this.isOffline) {
                 this.treeList.pop();
                 childItems = this.getChildNodes(this.treeData, parentLi.getAttribute('data-uid'));
-                this.loadChild(childItems, mapper_1, eicon, parentLi, expandChild, callback, loaded);
+                this.loadChild(childItems, mapper_2, eicon, parentLi, expandChild, callback, loaded);
             }
             else {
-                mapper_1.dataSource.executeQuery(this.getQuery(mapper_1, parentLi.getAttribute('data-uid'))).then(function (e) {
+                mapper_2.dataSource.executeQuery(this.getQuery(mapper_2, parentLi.getAttribute('data-uid'))).then(function (e) {
                     _this.treeList.pop();
                     childItems = e.result;
-                    _this.loadChild(childItems, mapper_1, eicon, parentLi, expandChild, callback, loaded);
+                    if (_this.dataType === 1) {
+                        _this.dataType = 2;
+                    }
+                    _this.loadChild(childItems, mapper_2, eicon, parentLi, expandChild, callback, loaded);
+                }).catch(function (e) {
+                    _this.trigger('actionFailure', { error: e });
                 });
             }
         }
         else {
             childItems = this.getChildNodes(this.treeData, parentLi.getAttribute('data-uid'));
-            this.currentLoadData = childItems;
+            this.currentLoadData = this.getSortedData(childItems);
             if (isNOU(childItems) || childItems.length === 0) {
                 detach(eicon);
                 this.removeExpand(parentLi, true);
@@ -1115,8 +1784,9 @@ var TreeView = /** @class */ (function (_super) {
             }
             else {
                 this.listBaseOption.ariaAttributes.level = parseFloat(parentLi.getAttribute('aria-level')) + 1;
-                parentLi.appendChild(ListBase.createList(this.createElement, this.getSortedData(childItems), this.listBaseOption));
+                parentLi.appendChild(ListBase.createList(this.createElement, this.currentLoadData, this.listBaseOption));
                 this.expandNode(parentLi, eicon, loaded);
+                this.setSelectionForChildNodes(childItems);
                 this.ensureCheckNode(parentLi);
                 this.finalizeNode(parentLi);
                 this.disableTreeNodes(childItems);
@@ -1132,7 +1802,7 @@ var TreeView = /** @class */ (function (_super) {
         }
         else {
             this.updateListProp(mapper);
-            if (this.fields.dataSource instanceof DataManager && !this.fields.dataSource.dataSource.offline) {
+            if (this.fields.dataSource instanceof DataManager && !this.isOffline) {
                 var id = parentLi.getAttribute('data-uid');
                 var nodeData = this.getNodeObject(id);
                 setValue('child', childItems, nodeData);
@@ -1140,6 +1810,7 @@ var TreeView = /** @class */ (function (_super) {
             this.listBaseOption.ariaAttributes.level = parseFloat(parentLi.getAttribute('aria-level')) + 1;
             parentLi.appendChild(ListBase.createList(this.createElement, childItems, this.listBaseOption));
             this.expandNode(parentLi, eicon, loaded);
+            this.setSelectionForChildNodes(childItems);
             this.ensureCheckNode(parentLi);
             this.finalizeNode(parentLi);
             this.disableTreeNodes(childItems);
@@ -1155,13 +1826,25 @@ var TreeView = /** @class */ (function (_super) {
     TreeView.prototype.disableTreeNodes = function (childItems) {
         var i = 0;
         while (i < childItems.length) {
-            var id = childItems[i][this.fields.id].toString();
+            var id = childItems[i][this.fields.id] ? childItems[i][this.fields.id].toString() : null;
             if (this.disableNode !== undefined && this.disableNode.indexOf(id) !== -1) {
                 this.doDisableAction([id]);
             }
             i++;
         }
     };
+    /**
+     * Sets the child Item in selectedState while rendering the child node
+     */
+    TreeView.prototype.setSelectionForChildNodes = function (nodes) {
+        var i;
+        for (i = 0; i < nodes.length; i++) {
+            var id = nodes[i][this.fields.id] ? nodes[i][this.fields.id].toString() : null;
+            if (this.selectedNodes !== undefined && this.selectedNodes.indexOf(id) !== -1) {
+                this.doSelectionAction();
+            }
+        }
+    };
     TreeView.prototype.ensureCheckNode = function (element) {
         if (this.showCheckBox) {
             this.ele = (this.checkedElement) ? this.checkedElement.indexOf(element.getAttribute('data-uid')) : null;
@@ -1193,6 +1876,7 @@ var TreeView = /** @class */ (function (_super) {
         return (typeof mapper.child === 'string' || isNOU(mapper.child)) ? mapper : mapper.child;
     };
     TreeView.prototype.getChildNodes = function (obj, parentId, isRoot) {
+        var _this = this;
         if (isRoot === void 0) { isRoot = false; }
         var childNodes;
         if (isNOU(obj)) {
@@ -1203,15 +1887,22 @@ var TreeView = /** @class */ (function (_super) {
         }
         else {
             if (typeof this.fields.child === 'string') {
-                for (var i = 0, objlen = obj.length; i < objlen; i++) {
-                    var dataId = getValue(this.fields.id, obj[i]);
-                    if (dataId && dataId.toString() === parentId) {
-                        return getValue(this.fields.child, obj[i]);
-                    }
-                    else if (!isNOU(getValue(this.fields.child, obj[i]))) {
-                        childNodes = this.getChildNodes(getValue(this.fields.child, obj[i]), parentId);
-                        if (childNodes !== undefined) {
-                            break;
+                var index = obj.findIndex(function (data) { return data[_this.fields.id] && data[_this.fields.id].toString() === parentId; });
+                if (index !== -1) {
+                    return getValue(this.fields.child, obj[index]);
+                }
+                if (index === -1) {
+                    for (var i = 0, objlen = obj.length; i < objlen; i++) {
+                        var tempArray = getValue(this.fields.child, obj[i]);
+                        var childIndex = !isNOU(tempArray) ? tempArray.findIndex(function (data) { return data[_this.fields.id] && data[_this.fields.id].toString() === parentId; }) : -1;
+                        if (childIndex !== -1) {
+                            return getValue(this.fields.child, tempArray[childIndex]);
+                        }
+                        else if (!isNOU(tempArray)) {
+                            childNodes = this.getChildNodes(tempArray, parentId);
+                            if (childNodes !== undefined) {
+                                break;
+                            }
                         }
                     }
                 }
@@ -1269,6 +1960,7 @@ var TreeView = /** @class */ (function (_super) {
         return li.classList.contains(ACTIVE) ? true : false;
     };
     TreeView.prototype.selectNode = function (li, e, multiSelect) {
+        var _this = this;
         if (isNOU(li) || (!this.allowMultiSelection && this.isActive(li) && !isNOU(e))) {
             this.setFocusElement(li);
             return;
@@ -1276,11 +1968,17 @@ var TreeView = /** @class */ (function (_super) {
         var eventArgs;
         if (this.isLoaded) {
             eventArgs = this.getSelectEvent(li, 'select', e);
-            this.trigger('nodeSelecting', eventArgs);
-            if (eventArgs.cancel) {
-                return;
-            }
+            this.trigger('nodeSelecting', eventArgs, function (observedArgs) {
+                if ((!observedArgs.cancel) && !observedArgs.node.classList.contains(PREVENTSELECT)) {
+                    _this.nodeSelectAction(li, e, observedArgs, multiSelect);
+                }
+            });
+        }
+        else {
+            this.nodeSelectAction(li, e, eventArgs, multiSelect);
         }
+    };
+    TreeView.prototype.nodeSelectAction = function (li, e, eventArgs, multiSelect) {
         if (!this.allowMultiSelection || (!multiSelect && (!e || (e && !e.ctrlKey)))) {
             this.removeSelectAll();
         }
@@ -1306,21 +2004,29 @@ var TreeView = /** @class */ (function (_super) {
             this.startNode = li;
             this.addSelect(li);
         }
-        this.setFocusElement(li);
         if (this.isLoaded) {
             eventArgs.nodeData = this.getNodeData(li);
             this.trigger('nodeSelected', eventArgs);
+            this.isRightClick = false;
         }
+        this.isRightClick = false;
     };
     TreeView.prototype.unselectNode = function (li, e) {
+        var _this = this;
         var eventArgs;
         if (this.isLoaded) {
             eventArgs = this.getSelectEvent(li, 'un-select', e);
-            this.trigger('nodeSelecting', eventArgs);
-            if (eventArgs.cancel) {
-                return;
-            }
+            this.trigger('nodeSelecting', eventArgs, function (observedArgs) {
+                if (!observedArgs.cancel) {
+                    _this.nodeUnselectAction(li, observedArgs);
+                }
+            });
+        }
+        else {
+            this.nodeUnselectAction(li, eventArgs);
         }
+    };
+    TreeView.prototype.nodeUnselectAction = function (li, eventArgs) {
         this.removeSelect(li);
         this.setFocusElement(li);
         if (this.isLoaded) {
@@ -1333,8 +2039,11 @@ var TreeView = /** @class */ (function (_super) {
             var focusedNode = this.getFocusedNode();
             if (focusedNode) {
                 removeClass([focusedNode], FOCUS);
+                focusedNode.setAttribute("tabindex", "-1");
             }
             addClass([li], FOCUS);
+            li.setAttribute('tabindex', '0');
+            EventHandler.add(li, 'blur', this.focusOut, this);
             this.updateIdAttr(focusedNode, li);
         }
     };
@@ -1401,49 +2110,68 @@ var TreeView = /** @class */ (function (_super) {
             if (classList.contains(EXPANDABLE)) {
                 this.expandAction(currLi, icon, e);
             }
-            else {
+            else if (classList.contains(COLLAPSIBLE)) {
                 this.collapseNode(currLi, icon, e);
             }
         }
     };
     TreeView.prototype.expandAction = function (currLi, icon, e, expandChild, callback) {
+        var _this = this;
         if (icon.classList.contains(PROCESS)) {
             return;
         }
         else {
             addClass([icon], PROCESS);
         }
-        if (this.isLoaded) {
+        if (this.isLoaded && !this.isRefreshed) {
             this.expandArgs = this.getExpandEvent(currLi, e);
-            this.trigger('nodeExpanding', this.expandArgs);
-            if (this.expandArgs.cancel) {
-                removeClass([icon], PROCESS);
-                return;
-            }
+            this.isInteracted = this.expandArgs.isInteracted;
+            this.trigger('nodeExpanding', this.expandArgs, function (observedArgs) {
+                if (observedArgs.cancel) {
+                    removeClass([icon], PROCESS);
+                }
+                else {
+                    _this.nodeExpandAction(currLi, icon, expandChild, callback);
+                }
+            });
+        }
+        else {
+            this.nodeExpandAction(currLi, icon, expandChild, callback);
         }
+    };
+    TreeView.prototype.nodeExpandAction = function (currLi, icon, expandChild, callback) {
         var ul = select('.' + PARENTITEM, currLi);
         if (ul && ul.nodeName === 'UL') {
             this.expandNode(currLi, icon);
         }
         else {
+            this.isFirstRender = true;
             this.renderChildNodes(currLi, expandChild, callback);
+            var liEles = selectAll('.' + LISTITEM, currLi);
+            for (var i = 0; i < liEles.length; i++) {
+                var id = this.getId(liEles[i]);
+                if (this.expandChildren.indexOf(id) !== -1 && this.expandChildren !== undefined) {
+                    var icon_1 = select('.' + EXPANDABLE, select('.' + TEXTWRAP, liEles[i]));
+                    if (!isNOU(icon_1)) {
+                        this.expandAction(liEles[i], icon_1, null);
+                    }
+                    this.expandChildren.splice(this.expandChildren.indexOf(id), 1);
+                }
+            }
         }
     };
     TreeView.prototype.keyActionHandler = function (e) {
+        var _this = this;
         var target = e.target;
         var focusedNode = this.getFocusedNode();
         if (target && target.classList.contains(INPUT)) {
             var inpEle = target;
             if (e.action === 'enter') {
                 inpEle.blur();
-                this.element.focus();
-                addClass([focusedNode], HOVER);
             }
             else if (e.action === 'escape') {
                 inpEle.value = this.oldText;
                 inpEle.blur();
-                this.element.focus();
-                addClass([focusedNode], HOVER);
             }
             return;
         }
@@ -1453,68 +2181,73 @@ var TreeView = /** @class */ (function (_super) {
             event: e,
             node: focusedNode,
         };
-        this.trigger('keyPress', eventArgs);
-        if (eventArgs.cancel) {
-            return;
-        }
-        switch (e.action) {
-            case 'space':
-                if (this.showCheckBox) {
-                    this.checkNode(e);
-                }
-                break;
-            case 'moveRight':
-                this.openNode(this.enableRtl ? false : true, e);
-                break;
-            case 'moveLeft':
-                this.openNode(this.enableRtl ? true : false, e);
-                break;
-            case 'shiftDown':
-                this.shiftKeySelect(true, e);
-                break;
-            case 'moveDown':
-            case 'ctrlDown':
-            case 'csDown':
-                this.navigateNode(true);
-                break;
-            case 'shiftUp':
-                this.shiftKeySelect(false, e);
-                break;
-            case 'moveUp':
-            case 'ctrlUp':
-            case 'csUp':
-                this.navigateNode(false);
-                break;
-            case 'home':
-            case 'shiftHome':
-            case 'ctrlHome':
-            case 'csHome':
-                this.navigateRootNode(true);
-                break;
-            case 'end':
-            case 'shiftEnd':
-            case 'ctrlEnd':
-            case 'csEnd':
-                this.navigateRootNode(false);
-                break;
-            case 'enter':
-            case 'ctrlEnter':
-            case 'shiftEnter':
-            case 'csEnter':
-                this.toggleSelect(focusedNode, e);
-                break;
-            case 'f2':
-                if (this.allowEditing && !focusedNode.classList.contains('e-disable')) {
-                    this.createTextbox(focusedNode, e);
-                }
-                break;
-            case 'ctrlA':
-                if (this.allowMultiSelection) {
-                    var sNodes = selectAll('.' + LISTITEM + ':not(.' + ACTIVE + ')', this.element);
-                    this.selectGivenNodes(sNodes);
+        this.trigger('keyPress', eventArgs, function (observedArgs) {
+            if (!observedArgs.cancel) {
+                switch (e.action) {
+                    case 'space':
+                        if (_this.showCheckBox) {
+                            _this.checkNode(e);
+                        }
+                        else {
+                            _this.toggleSelect(focusedNode, e);
+                        }
+                        break;
+                    case 'moveRight':
+                        _this.openNode(_this.enableRtl ? false : true, e);
+                        break;
+                    case 'moveLeft':
+                        _this.openNode(_this.enableRtl ? true : false, e);
+                        break;
+                    case 'shiftDown':
+                        _this.shiftKeySelect(true, e);
+                        break;
+                    case 'moveDown':
+                    case 'ctrlDown':
+                    case 'csDown':
+                        _this.navigateNode(true);
+                        break;
+                    case 'shiftUp':
+                        _this.shiftKeySelect(false, e);
+                        break;
+                    case 'moveUp':
+                    case 'ctrlUp':
+                    case 'csUp':
+                        _this.navigateNode(false);
+                        break;
+                    case 'home':
+                    case 'shiftHome':
+                    case 'ctrlHome':
+                    case 'csHome':
+                        _this.navigateRootNode(true);
+                        break;
+                    case 'end':
+                    case 'shiftEnd':
+                    case 'ctrlEnd':
+                    case 'csEnd':
+                        _this.navigateRootNode(false);
+                        break;
+                    case 'enter':
+                    case 'ctrlEnter':
+                    case 'shiftEnter':
+                    case 'csEnter':
+                    case 'shiftSpace':
+                    case 'ctrlSpace':
+                        _this.toggleSelect(focusedNode, e);
+                        break;
+                    case 'f2':
+                        if (_this.allowEditing && !focusedNode.classList.contains('e-disable')) {
+                            _this.createTextbox(focusedNode, e);
+                        }
+                        break;
+                    case 'ctrlA':
+                        if (_this.allowMultiSelection) {
+                            var sNodes = selectAll('.' + LISTITEM + ':not(.' + ACTIVE + ')', _this.element);
+                            _this.selectGivenNodes(sNodes);
+                        }
+                        break;
                 }
-                break;
-        }
+            }
+        });
     };
     TreeView.prototype.navigateToFocus = function (isUp) {
         var focusNode = this.getFocusedNode().querySelector('.' + TEXTWRAP);
@@ -1563,26 +2296,179 @@ var TreeView = /** @class */ (function (_super) {
         var checkWrap = select('.' + CHECKBOXWRAP, focusedNode);
         var isChecked = select(' .' + CHECKBOXFRAME, checkWrap).classList.contains(CHECK);
         if (!focusedNode.classList.contains('e-disable')) {
-            this.validateCheckNode(checkWrap, isChecked, focusedNode, e);
+            if (focusedNode.getElementsByClassName("e-checkbox-disabled").length == 0) {
+                this.validateCheckNode(checkWrap, isChecked, focusedNode, e);
+            }
         }
     };
     TreeView.prototype.validateCheckNode = function (checkWrap, isCheck, li, e) {
-        var eventArgs = this.nodeCheckingEvent(checkWrap, isCheck, e);
-        if (eventArgs.cancel) {
-            return;
+        var _this = this;
+        var currLi = closest(checkWrap, '.' + LISTITEM);
+        this.checkActionNodes = [];
+        var ariaState = !isCheck ? 'true' : 'false';
+        if (!isNOU(ariaState)) {
+            checkWrap.setAttribute('aria-checked', ariaState);
         }
+        var eventArgs = this.getCheckEvent(currLi, isCheck ? 'uncheck' : 'check', e);
+        this.trigger('nodeChecking', eventArgs, function (observedArgs) {
+            if (!observedArgs.cancel) {
+                _this.nodeCheckingAction(checkWrap, isCheck, li, observedArgs, e);
+            }
+        });
+    };
+    TreeView.prototype.nodeCheckingAction = function (checkWrap, isCheck, li, eventArgs, e) {
         if (this.checkedElement.indexOf(li.getAttribute('data-uid')) === -1) {
             this.checkedElement.push(li.getAttribute('data-uid'));
-            var child = this.getChildNodes(this.treeData, li.getAttribute('data-uid'));
-            (child !== null) ? this.allCheckNode(child, this.checkedElement, null, null, false) : child = null;
+            if (this.autoCheck) {
+                var child = this.getChildNodes(this.treeData, li.getAttribute('data-uid'));
+                (child !== null) ? this.allCheckNode(child, this.checkedElement, null, null, false) : child = null;
+            }
         }
         this.changeState(checkWrap, isCheck ? 'uncheck' : 'check', e, true);
         if (this.autoCheck) {
             this.ensureChildCheckState(li);
             this.ensureParentCheckState(closest(closest(li, '.' + PARENTITEM), '.' + LISTITEM));
+            var doCheck = void 0;
+            if (eventArgs.action === 'check') {
+                doCheck = true;
+            }
+            else if (eventArgs.action === 'uncheck') {
+                doCheck = false;
+            }
+            this.ensureStateChange(li, doCheck);
         }
         this.nodeCheckedEvent(checkWrap, isCheck, e);
     };
+    /**
+     * Update checkedNodes when UI interaction happens before the child node renders in DOM
+     */
+    TreeView.prototype.ensureStateChange = function (li, doCheck) {
+        var childElement = select('.' + PARENTITEM, li);
+        var parentIndex = li.getAttribute('data-uid');
+        var mapper = this.fields;
+        if (this.dataType === 1 && this.autoCheck) {
+            var resultData = new DataManager(this.treeData).executeLocal(new Query().where(mapper.parentID, 'equal', parentIndex, true));
+            for (var i = 0; i < resultData.length; i++) {
+                var resultId = resultData[i][this.fields.id] ? resultData[i][this.fields.id].toString() : null;
+                var isCheck = resultData[i][this.fields.isChecked] ? resultData[i][this.fields.isChecked].toString() : null;
+                if (this.checkedNodes.indexOf(parentIndex) !== -1 && this.checkedNodes.indexOf(resultId) === -1) {
+                    this.checkedNodes.push(resultId);
+                    var childItems = this.getChildNodes(this.treeData, resultId);
+                    this.getChildItems(childItems, doCheck);
+                    if (this.parentNodeCheck.indexOf(resultId) !== -1) {
+                        this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(resultId), 1);
+                    }
+                }
+                else if (this.checkedNodes.indexOf(parentIndex) === -1 && childElement === null &&
+                    this.checkedNodes.indexOf(resultId) !== -1) {
+                    this.checkedNodes.splice(this.checkedNodes.indexOf(resultId), 1);
+                    if (isCheck === 'true') {
+                        this.updateField(this.treeData, this.fields, resultId, 'isChecked', null);
+                    }
+                    if (this.checkedNodes.indexOf(parentIndex) === -1 && childElement === null ||
+                        this.parentNodeCheck.indexOf(resultId) !== -1) {
+                        var childNodes = this.getChildNodes(this.treeData, resultId);
+                        this.getChildItems(childNodes, doCheck);
+                        if (this.parentNodeCheck.indexOf(resultId) !== -1) {
+                            this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(resultId), 1);
+                        }
+                    }
+                }
+                else {
+                    var childItems = this.getChildNodes(this.treeData, resultId);
+                    this.getChildItems(childItems, doCheck);
+                }
+            }
+        }
+        else if (this.dataType === 1 && !this.autoCheck) {
+            if (!doCheck) {
+                var checkedData = new DataManager(this.treeData).executeLocal(new Query().where(mapper.isChecked, 'equal', true, false));
+                for (var i = 0; i < checkedData.length; i++) {
+                    var id = checkedData[i][this.fields.id] ? checkedData[i][this.fields.id].toString() : null;
+                    if (this.checkedNodes.indexOf(id) !== -1) {
+                        this.checkedNodes.splice(this.checkedNodes.indexOf(id), 1);
+                    }
+                    this.updateField(this.treeData, this.fields, id, 'isChecked', null);
+                }
+                this.checkedNodes = [];
+            }
+            else {
+                for (var i = 0; i < this.treeData.length; i++) {
+                    var checkedId = this.treeData[i][this.fields.id] ? this.treeData[i][this.fields.id].toString() : null;
+                    if (this.checkedNodes.indexOf(checkedId) === -1) {
+                        this.checkedNodes.push(checkedId);
+                    }
+                }
+            }
+        }
+        else {
+            var childItems = this.getChildNodes(this.treeData, parentIndex);
+            if (childItems) {
+                this.childStateChange(childItems, parentIndex, childElement, doCheck);
+            }
+        }
+    };
+    TreeView.prototype.getChildItems = function (childItems, doCheck) {
+        for (var i = 0; i < childItems.length; i++) {
+            var childId = childItems[i][this.fields.id] ? childItems[i][this.fields.id].toString() : null;
+            var childIsCheck = childItems[i][this.fields.isChecked] ? childItems[i][this.fields.isChecked].toString() :
+                null;
+            if (this.checkedNodes.indexOf(childId) !== -1 && !doCheck) {
+                this.checkedNodes.splice(this.checkedNodes.indexOf(childId), 1);
+            }
+            if (this.checkedNodes.indexOf(childId) === -1 && doCheck) {
+                this.checkedNodes.push(childId);
+            }
+            if (childIsCheck === 'true' && !doCheck) {
+                this.updateField(this.treeData, this.fields, childId, 'isChecked', null);
+            }
+            var subChildItems = this.getChildNodes(this.treeData, childId);
+            if (subChildItems.length > 0) {
+                this.getChildItems(subChildItems, doCheck);
+            }
+        }
+    };
+    /**
+     * Update checkedNodes when UI interaction happens before the child node renders in DOM for hierarchical DS
+     */
+    TreeView.prototype.childStateChange = function (childItems, parent, childElement, doCheck) {
+        for (var i = 0; i < childItems.length; i++) {
+            var checkedChild = childItems[i][this.fields.id] ? childItems[i][this.fields.id].toString() : '';
+            var isCheck = childItems[i][this.fields.isChecked] ? childItems[i][this.fields.isChecked].toString() : null;
+            if (this.autoCheck) {
+                if (this.checkedNodes.indexOf(parent) !== -1 && this.checkedNodes.indexOf(checkedChild) === -1) {
+                    this.checkedNodes.push(checkedChild);
+                    if (this.parentNodeCheck.indexOf(checkedChild) !== -1) {
+                        this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(checkedChild), 1);
+                    }
+                }
+                else if (this.checkedNodes.indexOf(parent) === -1 && this.checkedNodes.indexOf(checkedChild) !== -1 && !doCheck) {
+                    this.checkedNodes.splice(this.checkedNodes.indexOf(checkedChild), 1);
+                    if (isCheck === 'true') {
+                        this.updateField(this.treeData, this.fields, checkedChild, 'isChecked', null);
+                    }
+                }
+            }
+            else if (!this.autoCheck) {
+                if (!doCheck) {
+                    if (this.checkedNodes.indexOf(checkedChild) !== -1) {
+                        this.checkedNodes.splice(this.checkedNodes.indexOf(checkedChild), 1);
+                    }
+                    this.updateField(this.treeData, this.fields, checkedChild, 'isChecked', null);
+                    this.checkedNodes = [];
+                }
+                else {
+                    if (this.checkedNodes.indexOf(checkedChild) === -1) {
+                        this.checkedNodes.push(checkedChild);
+                    }
+                }
+            }
+            var subChild = this.getChildNodes([childItems[i]], checkedChild);
+            if (subChild) {
+                this.childStateChange(subChild, parent, childElement, doCheck);
+            }
+        }
+    };
     //This method can be used to get all child nodes of a parent by passing the children of a parent along with 'validateCheck' set to false
     TreeView.prototype.allCheckNode = function (child, newCheck, checked, childCheck, validateCheck) {
         if (child) {
@@ -1602,11 +2488,17 @@ var TreeView = /** @class */ (function (_super) {
                 if (newCheck.indexOf(childId.toString()) === -1 && isNOU(checked)) {
                     newCheck.push(childId.toString());
                 }
+                var hierChildId = getValue(this.fields.child.toString(), child[length_1]);
                 //Gets if any next level children are available for child nodes
-                if (getValue(this.fields.hasChildren, child[length_1]) === true ||
-                    getValue(this.fields.child.toString(), child[length_1])) {
+                if (getValue(this.fields.hasChildren, child[length_1]) === true || hierChildId) {
                     var id = getValue(this.fields.id, child[length_1]);
-                    var childId_1 = this.getChildNodes(this.treeData, id.toString());
+                    var childId_1 = void 0;
+                    if (this.dataType === 1) {
+                        childId_1 = this.getChildNodes(this.treeData, id.toString());
+                    }
+                    else {
+                        childId_1 = hierChildId;
+                    }
                     if (childId_1) {
                         (isNOU(validateCheck)) ? this.allCheckNode(childId_1, newCheck, checked, childCheck) :
                             this.allCheckNode(childId_1, newCheck, checked, childCheck, validateCheck);
@@ -1663,7 +2555,7 @@ var TreeView = /** @class */ (function (_super) {
     };
     TreeView.prototype.getFocusedNode = function () {
         var selectedItem;
-        var fNode = select('.' + LISTITEM + '.' + FOCUS, this.element);
+        var fNode = select('.' + LISTITEM + '[tabindex="0"]', this.element);
         if (isNOU(fNode)) {
             selectedItem = select('.' + LISTITEM, this.element);
         }
@@ -1681,7 +2573,7 @@ var TreeView = /** @class */ (function (_super) {
             else if (nextNode.nextSibling == null && nextNode.classList.contains('e-node-collapsed')) {
                 this.focusNextNode(nextNode, false);
             }
-            else if (nextNode.nextSibling == null && lastChild.classList.contains('e-text-content')) {
+            else if (nextNode.nextSibling == null && lastChild.classList.contains(TEXTWRAP)) {
                 this.focusNextNode(nextNode, false);
             }
             else {
@@ -1733,8 +2625,12 @@ var TreeView = /** @class */ (function (_super) {
     };
     TreeView.prototype.setFocus = function (preNode, nextNode) {
         removeClass([preNode], [HOVER, FOCUS]);
-        if (!nextNode.classList.contains('e-disable')) {
+        preNode.setAttribute("tabindex", "-1");
+        if (!nextNode.classList.contains('e-disable') && !nextNode.classList.contains(PREVENTSELECT)) {
             addClass([nextNode], [HOVER, FOCUS]);
+            nextNode.setAttribute('tabindex', '0');
+            nextNode.focus();
+            EventHandler.add(nextNode, 'blur', this.focusOut, this);
             this.updateIdAttr(preNode, nextNode);
         }
     };
@@ -1748,12 +2644,19 @@ var TreeView = /** @class */ (function (_super) {
     };
     TreeView.prototype.focusIn = function () {
         if (!this.mouseDownStatus) {
-            addClass([this.getFocusedNode()], HOVER);
+            var focusedElement = this.getFocusedNode();
+            focusedElement.setAttribute("tabindex", "0");
+            addClass([focusedElement], [HOVER, FOCUS]);
+            EventHandler.add(focusedElement, 'blur', this.focusOut, this);
         }
         this.mouseDownStatus = false;
     };
-    TreeView.prototype.focusOut = function () {
-        removeClass([this.getFocusedNode()], HOVER);
+    TreeView.prototype.focusOut = function (event) {
+        var focusedElement = this.getFocusedNode();
+        if (event.target == focusedElement) {
+            removeClass([focusedElement], [HOVER, FOCUS]);
+            EventHandler.remove(focusedElement, 'blur', this.focusOut);
+        }
     };
     TreeView.prototype.onMouseOver = function (e) {
         var target = e.target;
@@ -1770,7 +2673,7 @@ var TreeView = /** @class */ (function (_super) {
         }
     };
     TreeView.prototype.setHover = function (li) {
-        if (!li.classList.contains(HOVER)) {
+        if (!li.classList.contains(HOVER) && !li.classList.contains(PREVENTSELECT)) {
             this.removeHover();
             addClass([li], HOVER);
         }
@@ -1794,14 +2697,20 @@ var TreeView = /** @class */ (function (_super) {
             var pNode = closest(currLi.parentNode, '.' + LISTITEM);
             var pid = pNode ? pNode.getAttribute('data-uid') : null;
             var selected = currLi.classList.contains(ACTIVE);
+            var selectable = currLi.classList.contains(PREVENTSELECT) ? false : true;
             var expanded = (currLi.getAttribute('aria-expanded') === 'true') ? true : false;
+            var hasChildren = currLi.getAttribute('aria-expanded') !== null ? true : (select('.' + EXPANDABLE, currLi) || select('.' + COLLAPSIBLE, currLi)) != null ? true : false;
             var checked = null;
-            if (this.showCheckBox) {
-                checked = select('.' + CHECKBOXWRAP, currLi).getAttribute('aria-checked');
+            var checkboxElement = select('.' + CHECKBOXWRAP, currLi);
+            if (this.showCheckBox && checkboxElement) {
+                checked = checkboxElement.getAttribute('aria-checked');
             }
-            return { id: id, text: text, parentID: pid, selected: selected, expanded: expanded, isChecked: checked };
+            return {
+                id: id, text: text, parentID: pid, selected: selected, selectable: selectable, expanded: expanded,
+                isChecked: checked, hasChildren: hasChildren
+            };
         }
-        return { id: '', text: '', parentID: '', selected: '', expanded: '', isChecked: '' };
+        return { id: '', text: '', parentID: '', selected: false, expanded: false, isChecked: '', hasChildren: false };
     };
     TreeView.prototype.getText = function (currLi, fromDS) {
         if (fromDS) {
@@ -1816,12 +2725,33 @@ var TreeView = /** @class */ (function (_super) {
         var nodeData = this.getNodeData(currLi);
         return { cancel: false, isInteracted: isNOU(e) ? false : true, node: currLi, nodeData: nodeData, event: e };
     };
+    TreeView.prototype.renderNodeTemplate = function (data, textEle, dataId) {
+        var tempArr = this.nodeTemplateFn(data, this, 'nodeTemplate' + dataId, this.element.id + 'nodeTemplate', this.isStringTemplate, undefined, textEle, this.root);
+        if (tempArr) {
+            tempArr = Array.prototype.slice.call(tempArr);
+            append(tempArr, textEle);
+        }
+    };
+    TreeView.prototype.destroyTemplate = function (liEle) {
+        this.clearTemplate(['nodeTemplate' + liEle.getAttribute('data-uid')]);
+    };
     TreeView.prototype.reRenderNodes = function () {
-        this.element.innerHTML = '';
+        this.updateListProp(this.fields);
+        if (Browser.isIE) {
+            this.ulElement = this.element.querySelector('.e-list-parent.e-ul');
+            this.ulElement.parentElement.removeChild(this.ulElement);
+        }
+        else {
+            this.element.innerHTML = '';
+        }
+        if (!isNOU(this.nodeTemplateFn)) {
+            this.clearTemplate();
+        }
         this.setTouchClass();
         this.setProperties({ selectedNodes: [], checkedNodes: [], expandedNodes: [] }, true);
+        this.checkedElement = [];
         this.isLoaded = false;
-        this.setDataBinding();
+        this.setDataBinding(true);
     };
     TreeView.prototype.setCssClass = function (oldClass, newClass) {
         if (!isNOU(oldClass) && oldClass !== '') {
@@ -1844,6 +2774,7 @@ var TreeView = /** @class */ (function (_super) {
         }
     };
     TreeView.prototype.createTextbox = function (liEle, e) {
+        var _this = this;
         var oldInpEle = select('.' + TREEINPUT, this.element);
         if (oldInpEle) {
             oldInpEle.blur();
@@ -1852,13 +2783,26 @@ var TreeView = /** @class */ (function (_super) {
         this.updateOldText(liEle);
         var innerEle = this.createElement('input', { className: TREEINPUT, attrs: { value: this.oldText } });
         var eventArgs = this.getEditEvent(liEle, null, innerEle.outerHTML);
-        this.trigger('nodeEditing', eventArgs);
-        if (eventArgs.cancel) {
-            return;
-        }
-        var inpWidth = textEle.offsetWidth + 5;
-        var style = 'width:' + inpWidth + 'px';
-        addClass([liEle], EDITING);
+        this.trigger('nodeEditing', eventArgs, function (observedArgs) {
+            if (!observedArgs.cancel) {
+                var inpWidth = textEle.offsetWidth + 5;
+                var style_1 = 'width:' + inpWidth + 'px';
+                addClass([liEle], EDITING);
+                if (!isNOU(_this.nodeTemplateFn)) {
+                    _this.destroyTemplate(liEle);
+                }
+                if (_this.isReact) {
+                    setTimeout(function () {
+                        _this.renderTextBox(eventArgs, textEle, style_1);
+                    }, 5);
+                }
+                else {
+                    _this.renderTextBox(eventArgs, textEle, style_1);
+                }
+            }
+        });
+    };
+    TreeView.prototype.renderTextBox = function (eventArgs, textEle, style) {
         textEle.innerHTML = eventArgs.innerHtml;
         var inpEle = select('.' + TREEINPUT, textEle);
         this.inputObj = Input.createInput({
@@ -1889,26 +2833,43 @@ var TreeView = /** @class */ (function (_super) {
         var txtEle = closest(target, '.' + LISTTEXT);
         var liEle = closest(target, '.' + LISTITEM);
         detach(this.inputObj.container);
-        this.appendNewText(liEle, txtEle, newText, true);
+        if (this.fields.dataSource instanceof DataManager && !this.isOffline) {
+            this.crudOperation('update', null, liEle, newText, null, null, true);
+        }
+        else {
+            this.appendNewText(liEle, txtEle, newText, true);
+        }
     };
     TreeView.prototype.appendNewText = function (liEle, txtEle, newText, isInput) {
+        var _this = this;
         var eventArgs = this.getEditEvent(liEle, newText, null);
-        this.trigger('nodeEdited', eventArgs);
-        newText = eventArgs.cancel ? eventArgs.oldText : eventArgs.newText;
+        this.trigger('nodeEdited', eventArgs, function (observedArgs) {
+            newText = observedArgs.cancel ? observedArgs.oldText : observedArgs.newText;
+            _this.updateText(liEle, txtEle, newText, isInput);
+            if (observedArgs.oldText !== newText) {
+                _this.triggerEvent('nodeEdited', [_this.getNode(liEle)]);
+            }
+        });
+    };
+    TreeView.prototype.updateText = function (liEle, txtEle, newText, isInput) {
         var newData = setValue(this.editFields.text, newText, this.editData);
         if (!isNOU(this.nodeTemplateFn)) {
-            txtEle.innerHTML = '';
-            append(this.nodeTemplateFn(newData), txtEle);
+            txtEle.innerText = '';
+            var dataId = liEle.getAttribute('data-uid');
+            this.renderNodeTemplate(newData, txtEle, dataId);
+            this.renderReactTemplates();
         }
         else {
-            txtEle.innerHTML = newText;
+            this.enableHtmlSanitizer ? txtEle.innerText = newText : txtEle.innerHTML = newText;
         }
         if (isInput) {
             removeClass([liEle], EDITING);
-            txtEle.focus();
+            liEle.focus();
+            EventHandler.add(liEle, 'blur', this.focusOut, this);
+            addClass([liEle], HOVER);
         }
-        if (eventArgs.oldText !== newText) {
-            this.triggerEvent();
+        if (this.allowTextWrap) {
+            this.calculateWrap(liEle);
         }
     };
     TreeView.prototype.getElement = function (ele) {
@@ -1919,7 +2880,7 @@ var TreeView = /** @class */ (function (_super) {
             return this.element.querySelector('[data-uid="' + ele + '"]');
         }
         else if (typeof ele === 'object') {
-            return ele;
+            return getElement(ele);
         }
         else {
             return null;
@@ -1933,7 +2894,7 @@ var TreeView = /** @class */ (function (_super) {
             return ele;
         }
         else if (typeof ele === 'object') {
-            return ele.getAttribute('data-uid');
+            return (getElement(ele)).getAttribute('data-uid');
         }
         else {
             return null;
@@ -1989,7 +2950,7 @@ var TreeView = /** @class */ (function (_super) {
         return newList;
     };
     TreeView.prototype.setDragAndDrop = function (toBind) {
-        if (toBind) {
+        if (toBind && !this.disabled) {
             this.initializeDrag();
         }
         else {
@@ -2001,8 +2962,8 @@ var TreeView = /** @class */ (function (_super) {
         var virtualEle;
         var proxy = this;
         this.dragObj = new Draggable(this.element, {
-            enableTailMode: true,
-            enableAutoScroll: true,
+            enableTailMode: true, enableAutoScroll: true,
+            dragArea: this.dragArea,
             dragTarget: '.' + TEXTWRAP,
             helper: function (e) {
                 _this.dragTarget = e.sender.target;
@@ -2044,18 +3005,19 @@ var TreeView = /** @class */ (function (_super) {
                 }
                 var eventArgs = _this.getDragEvent(e.event, _this, null, e.target, null, virtualEle, level);
                 if (eventArgs.draggedNode.classList.contains(EDITING)) {
-                    eventArgs.cancel = true;
+                    _this.dragObj.intDestroy(e.event);
+                    _this.dragCancelAction(virtualEle);
                 }
                 else {
-                    _this.trigger('nodeDragStart', eventArgs);
-                }
-                if (eventArgs.cancel) {
-                    detach(virtualEle);
-                    removeClass([_this.element], DRAGGING);
-                    _this.dragStartAction = false;
-                }
-                else {
-                    _this.dragStartAction = true;
+                    _this.trigger('nodeDragStart', eventArgs, function (observedArgs) {
+                        if (observedArgs.cancel) {
+                            _this.dragObj.intDestroy(e.event);
+                            _this.dragCancelAction(virtualEle);
+                        }
+                        else {
+                            _this.dragStartAction = true;
+                        }
+                    });
                 }
             },
             drag: function (e) {
@@ -2068,9 +3030,11 @@ var TreeView = /** @class */ (function (_super) {
                 var dropTarget = e.target;
                 var preventTargetExpand = false;
                 var dropRoot = (closest(dropTarget, '.' + DROPPABLE));
+                var isHelperElement = true;
                 if (!dropTarget || !dropRoot) {
                     detach(e.helper);
                     document.body.style.cursor = '';
+                    isHelperElement = false;
                 }
                 var listItem = closest(dropTarget, '.e-list-item');
                 var level;
@@ -2079,21 +3043,23 @@ var TreeView = /** @class */ (function (_super) {
                 }
                 var eventArgs = _this.getDragEvent(e.event, _this, dropTarget, dropTarget, null, e.helper, level);
                 eventArgs.preventTargetExpand = preventTargetExpand;
-                _this.trigger('nodeDragStop', eventArgs);
-                _this.dragParent = eventArgs.draggedParentNode;
-                _this.preventExpand = eventArgs.preventTargetExpand;
-                if (eventArgs.cancel) {
-                    if (e.helper.parentNode) {
-                        detach(e.helper);
+                _this.trigger('nodeDragStop', eventArgs, function (observedArgs) {
+                    _this.dragParent = observedArgs.draggedParentNode;
+                    _this.preventExpand = observedArgs.preventTargetExpand;
+                    if (observedArgs.cancel) {
+                        if (e.helper.parentNode) {
+                            detach(e.helper);
+                        }
+                        document.body.style.cursor = '';
+                        isHelperElement = false;
                     }
-                    document.body.style.cursor = '';
-                }
-                _this.dragStartAction = false;
+                    _this.dragStartAction = false;
+                });
             }
         });
         this.dropObj = new Droppable(this.element, {
             out: function (e) {
-                if (!isNOU(e) && !e.target.classList.contains(SIBLING)) {
+                if (!isNOU(e) && !e.target.classList.contains(SIBLING) && (_this.dropObj.dragData.default && _this.dropObj.dragData.default.helper.classList.contains(ROOT))) {
                     document.body.style.cursor = 'not-allowed';
                 }
             },
@@ -2105,6 +3071,11 @@ var TreeView = /** @class */ (function (_super) {
             }
         });
     };
+    TreeView.prototype.dragCancelAction = function (virtualEle) {
+        detach(virtualEle);
+        removeClass([this.element], DRAGGING);
+        this.dragStartAction = false;
+    };
     TreeView.prototype.dragAction = function (e, virtualEle) {
         var dropRoot = closest(e.target, '.' + DROPPABLE);
         var dropWrap = closest(e.target, '.' + TEXTWRAP);
@@ -2118,22 +3089,37 @@ var TreeView = /** @class */ (function (_super) {
         }
         if (dropRoot) {
             var dropLi = closest(e.target, '.' + LISTITEM);
+            var checkWrapper = closest(e.target, '.' + CHECKBOXWRAP);
+            var collapse = closest(e.target, '.' + COLLAPSIBLE);
+            var expand = closest(e.target, '.' + EXPANDABLE);
             if (!dropRoot.classList.contains(ROOT) || (dropWrap &&
                 (!dropLi.isSameNode(this.dragLi) && !this.isDescendant(this.dragLi, dropLi)))) {
-                if (dropLi && e && (e.event.offsetY < 7)) {
-                    addClass([icon], DROPNEXT);
-                    var virEle = this.createElement('div', { className: SIBLING });
-                    var index = this.fullRowSelect ? (1) : (0);
-                    dropLi.insertBefore(virEle, dropLi.children[index]);
-                }
-                else if (dropLi && e && (e.target.offsetHeight > 0 && e.event.offsetY > (e.target.offsetHeight - 10))) {
-                    addClass([icon], DROPNEXT);
-                    var virEle = this.createElement('div', { className: SIBLING });
-                    var index = this.fullRowSelect ? (2) : (1);
-                    dropLi.insertBefore(virEle, dropLi.children[index]);
+                if (this.hasTemplate && dropLi) {
+                    var templateTarget = select(this.fullRowSelect ? '.' + FULLROW : '.' + TEXTWRAP, dropLi);
+                    if ((e && (!expand && !collapse) && e.event.offsetY < 7 && !checkWrapper) || (((expand && e.event.offsetY < 5) || (collapse && e.event.offsetX < 3)))) {
+                        var index = this.fullRowSelect ? (1) : (0);
+                        this.appendIndicator(dropLi, icon, index);
+                    }
+                    else if ((e && (!expand && !collapse) && !checkWrapper && templateTarget && e.event.offsetY > templateTarget.offsetHeight - 10) || ((expand && e.event.offsetY > 19) || (collapse && e.event.offsetX > 19))) {
+                        var index = this.fullRowSelect ? (2) : (1);
+                        this.appendIndicator(dropLi, icon, index);
+                    }
+                    else {
+                        addClass([icon], DROPIN);
+                    }
                 }
                 else {
-                    addClass([icon], DROPIN);
+                    if ((dropLi && e && (!expand && !collapse) && (e.event.offsetY < 7) && !checkWrapper) || (((expand && e.event.offsetY < 5) || (collapse && e.event.offsetX < 3)))) {
+                        var index = this.fullRowSelect ? (1) : (0);
+                        this.appendIndicator(dropLi, icon, index);
+                    }
+                    else if ((dropLi && e && (!expand && !collapse) && (e.target.offsetHeight > 0 && e.event.offsetY > (e.target.offsetHeight - 10)) && !checkWrapper) || (((expand && e.event.offsetY > 19) || (collapse && e.event.offsetX > 19)))) {
+                        var index = this.fullRowSelect ? (2) : (1);
+                        this.appendIndicator(dropLi, icon, index);
+                    }
+                    else {
+                        addClass([icon], DROPIN);
+                    }
                 }
             }
             else if (e.target.nodeName === 'LI' && (!dropLi.isSameNode(this.dragLi) && !this.isDescendant(this.dragLi, dropLi))) {
@@ -2165,16 +3151,25 @@ var TreeView = /** @class */ (function (_super) {
             addClass([icon], eventArgs.dropIndicator);
         }
     };
+    TreeView.prototype.appendIndicator = function (dropLi, icon, index) {
+        addClass([icon], DROPNEXT);
+        var virEle = this.createElement('div', { className: SIBLING });
+        dropLi.insertBefore(virEle, dropLi.children[index]);
+    };
+    /* eslint-disable */
     TreeView.prototype.dropAction = function (e) {
         var offsetY = e.event.offsetY;
         var dropTarget = e.target;
         var dragObj;
         var level;
         var drop = false;
-        var dragInstance = e.dragData.draggable;
-        for (var i = 0; i < dragInstance.ej2_instances.length; i++) {
-            if (dragInstance.ej2_instances[i] instanceof TreeView_1) {
-                dragObj = dragInstance.ej2_instances[i];
+        var dragInstance;
+        var nodeData = [];
+        var liArray = [];
+        dragInstance = e.dragData.draggable;
+        for (var i_1 = 0; i_1 < dragInstance.ej2_instances.length; i_1++) {
+            if (dragInstance.ej2_instances[i_1] instanceof TreeView_1) {
+                dragObj = dragInstance.ej2_instances[i_1];
                 break;
             }
         }
@@ -2182,6 +3177,7 @@ var TreeView = /** @class */ (function (_super) {
             var dragTarget = dragObj.dragTarget;
             var dragLi = (closest(dragTarget, '.' + LISTITEM));
             var dropLi = (closest(dropTarget, '.' + LISTITEM));
+            liArray.push(dragLi);
             if (dropLi == null && dropTarget.classList.contains(ROOT)) {
                 dropLi = dropTarget.firstElementChild;
             }
@@ -2195,11 +3191,22 @@ var TreeView = /** @class */ (function (_super) {
             }
             if (dragObj.allowMultiSelection && dragLi.classList.contains(ACTIVE)) {
                 var sNodes = selectAll('.' + ACTIVE, dragObj.element);
-                for (var i = 0; i < sNodes.length; i++) {
-                    if (dropLi.isSameNode(sNodes[i]) || this.isDescendant(sNodes[i], dropLi)) {
-                        continue;
+                liArray = sNodes;
+                if (e.target.offsetHeight <= 33 && offsetY > e.target.offsetHeight - 10 && offsetY > 6) {
+                    for (var i_2 = sNodes.length - 1; i_2 >= 0; i_2--) {
+                        if (dropLi.isSameNode(sNodes[i_2]) || this.isDescendant(sNodes[i_2], dropLi)) {
+                            continue;
+                        }
+                        this.appendNode(dropTarget, sNodes[i_2], dropLi, e, dragObj, offsetY);
+                    }
+                }
+                else {
+                    for (var i_3 = 0; i_3 < sNodes.length; i_3++) {
+                        if (dropLi.isSameNode(sNodes[i_3]) || this.isDescendant(sNodes[i_3], dropLi)) {
+                            continue;
+                        }
+                        this.appendNode(dropTarget, sNodes[i_3], dropLi, e, dragObj, offsetY);
                     }
-                    this.appendNode(dropTarget, sNodes[i], dropLi, e, dragObj, offsetY);
                 }
             }
             else {
@@ -2211,11 +3218,22 @@ var TreeView = /** @class */ (function (_super) {
         if (this.fields.dataSource instanceof DataManager === false) {
             this.preventExpand = false;
         }
+        for (var i = 0; i < liArray.length; i++) {
+            nodeData.push(this.getNode(liArray[i]));
+        }
         this.trigger('nodeDropped', this.getDragEvent(e.event, dragObj, dropTarget, e.target, e.dragData.draggedElement, null, level, drop));
-        this.triggerEvent();
+        if (dragObj.element.id !== this.element.id) {
+            dragObj.triggerEvent('nodeDropped', nodeData);
+            this.isNodeDropped = true;
+            this.fields.dataSource = this.treeData;
+        }
+        this.triggerEvent('nodeDropped', nodeData);
     };
     TreeView.prototype.appendNode = function (dropTarget, dragLi, dropLi, e, dragObj, offsetY) {
-        if (!dragLi.classList.contains('e-disable') && !dropLi.classList.contains('e-disable')) {
+        var checkWrapper = closest(dropTarget, '.' + CHECKBOXWRAP);
+        var collapse = closest(e.target, '.' + COLLAPSIBLE);
+        var expand = closest(e.target, '.' + EXPANDABLE);
+        if (!dragLi.classList.contains('e-disable') && !checkWrapper && ((expand && e.event.offsetY < 5) || (collapse && e.event.offsetX < 3) || (expand && e.event.offsetY > 19) || (collapse && e.event.offsetX > 19) || (!expand && !collapse))) {
             if (dropTarget.nodeName === 'LI') {
                 this.dropAsSiblingNode(dragLi, dropLi, e, dragObj);
             }
@@ -2224,10 +3242,16 @@ var TreeView = /** @class */ (function (_super) {
                     this.dropAsSiblingNode(dragLi, dropLi, e, dragObj);
                 }
             }
+            else if ((dropTarget.classList.contains('e-icon-collapsible')) || (dropTarget.classList.contains('e-icon-expandable'))) {
+                this.dropAsSiblingNode(dragLi, dropLi, e, dragObj);
+            }
             else {
                 this.dropAsChildNode(dragLi, dropLi, dragObj, null, e, offsetY);
             }
         }
+        else {
+            this.dropAsChildNode(dragLi, dropLi, dragObj, null, e, offsetY, true);
+        }
     };
     TreeView.prototype.dropAsSiblingNode = function (dragLi, dropLi, e, dragObj) {
         var dropUl = closest(dropLi, '.' + PARENTITEM);
@@ -2240,7 +3264,21 @@ var TreeView = /** @class */ (function (_super) {
         else if (e.event.offsetY < 2) {
             pre = true;
         }
-        dropUl.insertBefore(dragLi, pre ? e.target : e.target.nextElementSibling);
+        else if (e.target.classList.contains('e-icon-expandable') || (e.target.classList.contains('e-icon-collapsible'))) {
+            if ((e.event.offsetY < 5) || (e.event.offsetX < 3)) {
+                pre = true;
+            }
+            else if ((e.event.offsetY > 15) || (e.event.offsetX > 17)) {
+                pre = false;
+            }
+        }
+        if ((e.target.classList.contains('e-icon-expandable')) || (e.target.classList.contains('e-icon-collapsible'))) {
+            var target = e.target.closest('li');
+            dropUl.insertBefore(dragLi, pre ? target : target.nextElementSibling);
+        }
+        else {
+            dropUl.insertBefore(dragLi, pre ? e.target : e.target.nextElementSibling);
+        }
         this.moveData(dragLi, dropLi, dropUl, pre, dragObj);
         this.updateElement(dragParentUl, dragParentLi);
         this.updateAriaLevel(dragLi);
@@ -2252,15 +3290,23 @@ var TreeView = /** @class */ (function (_super) {
             this.updateInstance();
         }
     };
-    TreeView.prototype.dropAsChildNode = function (dragLi, dropLi, dragObj, index, e, pos) {
+    TreeView.prototype.dropAsChildNode = function (dragLi, dropLi, dragObj, index, e, pos, isCheck) {
         var dragParentUl = closest(dragLi, '.' + PARENTITEM);
         var dragParentLi = closest(dragParentUl, '.' + LISTITEM);
         var dropParentUl = closest(dropLi, '.' + PARENTITEM);
-        if (e && (pos < 7)) {
+        var templateTarget;
+        if (e && e.target) {
+            templateTarget = select(this.fullRowSelect ? '.' + FULLROW : '.' + TEXTWRAP, dropLi);
+        }
+        if (e && (pos < 7) && !isCheck) {
             dropParentUl.insertBefore(dragLi, dropLi);
             this.moveData(dragLi, dropLi, dropParentUl, true, dragObj);
         }
-        else if (e && (e.target.offsetHeight > 0 && pos > (e.target.offsetHeight - 10))) {
+        else if (e && (e.target.offsetHeight > 0 && pos > (e.target.offsetHeight - 10)) && !isCheck && !this.hasTemplate) {
+            dropParentUl.insertBefore(dragLi, dropLi.nextElementSibling);
+            this.moveData(dragLi, dropLi, dropParentUl, false, dragObj);
+        }
+        else if (this.hasTemplate && templateTarget && pos > templateTarget.offsetHeight - 10 && !isCheck) {
             dropParentUl.insertBefore(dragLi, dropLi.nextElementSibling);
             this.moveData(dragLi, dropLi, dropParentUl, false, dragObj);
         }
@@ -2375,7 +3421,7 @@ var TreeView = /** @class */ (function (_super) {
             detach(dragParentUl);
             detach(dragIcon);
             var parentId = this.getId(dragParentLi);
-            this.updateField(this.treeData, this.fields, parentId, 'hasChildren', null);
+            this.updateField(this.treeData, this.fields, parentId, 'hasChildren', false);
             this.removeExpand(dragParentLi, true);
         }
     };
@@ -2433,6 +3479,7 @@ var TreeView = /** @class */ (function (_super) {
         var node = (drop === true) ? draggedNode : dropLi;
         var index = node ? closest(node, '.e-list-parent') : null;
         var i = 0;
+        var position = null;
         dragParent = (obj.dragLi && dragParent === null) ? closest(dragLiParent, '.' + ROOT) : dragParent;
         dragParent = (drop === true) ? this.dragParent : dragParent;
         if (cloneEle) {
@@ -2458,6 +3505,7 @@ var TreeView = /** @class */ (function (_super) {
                 }
             }
             indexValue = (dropTar !== 0) ? --indexValue : indexValue;
+            position = (iconClass == "e-drop-in") ? "Inside" : ((event.offsetY < 7) ? "Before" : "After");
         }
         if (dropTarget) {
             if (newParent.length === 0) {
@@ -2477,12 +3525,12 @@ var TreeView = /** @class */ (function (_super) {
             targetParent = dropLi;
             if (drop !== true) {
                 level = ++level;
-                var parent_1 = targetParent ? select('.e-list-parent', targetParent) : null;
-                indexValue = (parent_1) ? parent_1.children.length : 0;
-                if (!(this.fields.dataSource instanceof DataManager) && parent_1 === null && targetParent) {
-                    var parent_2 = targetParent.hasAttribute('data-uid') ?
+                var parent_2 = targetParent ? select('.e-list-parent', targetParent) : null;
+                indexValue = (parent_2) ? parent_2.children.length : 0;
+                if (!(this.fields.dataSource instanceof DataManager) && parent_2 === null && targetParent) {
+                    var parent_3 = targetParent.hasAttribute('data-uid') ?
                         this.getChildNodes(this.fields.dataSource, targetParent.getAttribute('data-uid').toString()) : null;
-                    indexValue = (parent_2) ? parent_2.length : 0;
+                    indexValue = (parent_3) ? parent_3.length : 0;
                 }
             }
         }
@@ -2500,6 +3548,7 @@ var TreeView = /** @class */ (function (_super) {
             dropTarget: targetParent,
             dropIndicator: iconClass,
             target: target,
+            position: position,
         };
     };
     TreeView.prototype.addFullRow = function (toAdd) {
@@ -2593,9 +3642,11 @@ var TreeView = /** @class */ (function (_super) {
     TreeView.prototype.removeNode = function (node) {
         var dragParentUl = closest(node, '.' + PARENTITEM);
         var dragParentLi = closest(dragParentUl, '.' + LISTITEM);
+        if (!isNOU(this.nodeTemplateFn)) {
+            this.destroyTemplate(node);
+        }
         detach(node);
         this.updateElement(dragParentUl, dragParentLi);
-        this.updateInstance();
         this.removeData(node);
     };
     TreeView.prototype.updateInstance = function () {
@@ -2672,6 +3723,19 @@ var TreeView = /** @class */ (function (_super) {
             this.updateMapper(level);
         }
         var li = ListBase.createListItemFromJson(this.createElement, sNodes, this.listBaseOption, level);
+        var id = this.getId(dropLi);
+        var refNode;
+        var dropIcon1;
+        if (!isNullOrUndefined(dropLi)) {
+            dropIcon1 = select('div.' + ICON, dropLi);
+        }
+        if (this.dataType === 1 && dropIcon1 && dropIcon1.classList.contains(EXPANDABLE) && !isNOU(this.element.offsetParent) && !this.element.offsetParent.parentElement.classList.contains('e-filemanager')) {
+            this.preventExpand = true;
+        }
+        if (this.dataType !== 1) {
+            this.addChildData(this.treeData, this.fields, id, nodes, index);
+            this.isFirstRender = false;
+        }
         var dropUl;
         if (!dropEle) {
             dropUl = dropLi ? this.expandParent(dropLi) : select('.' + PARENTITEM, this.element);
@@ -2679,11 +3743,48 @@ var TreeView = /** @class */ (function (_super) {
         else {
             dropUl = dropEle;
         }
-        var refNode = dropUl.childNodes[index];
-        for (var i = 0; i < li.length; i++) {
-            dropUl.insertBefore(li[i], refNode);
+        refNode = dropUl.childNodes[index];
+        if (!this.isFirstRender || this.dataType === 1) {
+            if (refNode || this.sortOrder === 'None') {
+                for (var i = 0; i < li.length; i++) {
+                    dropUl.insertBefore(li[i], refNode);
+                }
+                if (this.dataType === 1 && !isNullOrUndefined(dropLi) && !isNOU(this.element.offsetParent) && !this.element.offsetParent.parentElement.classList.contains('e-filemanager')) {
+                    this.preventExpand = false;
+                    var dropIcon = select('div.' + ICON, dropLi);
+                    if (dropIcon && dropIcon.classList.contains(EXPANDABLE)) {
+                        this.expandAction(dropLi, dropIcon, null);
+                    }
+                }
+            }
+            if (!refNode && ((this.sortOrder === 'Ascending') || (this.sortOrder === 'Descending'))) {
+                if (dropUl.childNodes.length === 0) {
+                    for (var i = 0; i < li.length; i++) {
+                        dropUl.insertBefore(li[i], refNode);
+                    }
+                    if (this.dataType === 1 && !isNullOrUndefined(dropLi) && !isNOU(this.element.offsetParent) && !this.element.offsetParent.parentElement.classList.contains('e-filemanager')) {
+                        this.preventExpand = false;
+                        var dropIcon = select('div.' + ICON, dropLi);
+                        if (dropIcon && dropIcon.classList.contains(EXPANDABLE)) {
+                            this.expandAction(dropLi, dropIcon, null);
+                        }
+                    }
+                }
+                else {
+                    var cNodes = dropUl.childNodes;
+                    for (var i = 0; i < li.length; i++) {
+                        for (var j = 0; j < cNodes.length; j++) {
+                            var returnValue = (this.sortOrder === 'Ascending') ? cNodes[j].textContent.toUpperCase() > li[i].innerText.toUpperCase() : cNodes[j].textContent.toUpperCase() < li[i].innerText.toUpperCase();
+                            if (returnValue) {
+                                dropUl.insertBefore(li[i], cNodes[j]);
+                                break;
+                            }
+                            dropUl.insertBefore(li[i], cNodes[cNodes.length]);
+                        }
+                    }
+                }
+            }
         }
-        var id = this.getId(dropLi);
         if (this.dataType === 1) {
             this.updateField(this.treeData, this.fields, id, 'hasChildren', true);
             var refId = this.getId(refNode);
@@ -2697,9 +3798,6 @@ var TreeView = /** @class */ (function (_super) {
                 pos++;
             }
         }
-        else {
-            this.addChildData(this.treeData, this.fields, id, nodes, index);
-        }
         this.finalizeNode(dropUl);
     };
     TreeView.prototype.updateMapper = function (level) {
@@ -2748,10 +3846,13 @@ var TreeView = /** @class */ (function (_super) {
         for (var i = 0, objlen = obj.length; i < objlen; i++) {
             var nodeId = getValue(mapper.id, obj[i]);
             if (obj[i] && nodeId && nodeId.toString() === id) {
-                if ((typeof mapper.child === 'string' && obj[i].hasOwnProperty(mapper.child)) ||
-                    (this.fields.dataSource instanceof DataManager && obj[i].hasOwnProperty('child'))) {
+                if ((typeof mapper.child === 'string' && (obj[i].hasOwnProperty(mapper.child) && obj[i][mapper.child] !== null)) ||
+                    ((this.fields.dataSource instanceof DataManager) && obj[i].hasOwnProperty('child'))) {
                     var key = (typeof mapper.child === 'string') ? mapper.child : 'child';
                     var childData = getValue(key, obj[i]);
+                    if (isNOU(childData)) {
+                        childData = [];
+                    }
                     index = isNOU(index) ? childData.length : index;
                     for (var k = 0, len = data.length; k < len; k++) {
                         childData.splice(index, 0, data[k]);
@@ -2771,7 +3872,7 @@ var TreeView = /** @class */ (function (_super) {
                     break;
                 }
             }
-            else if (this.fields.dataSource instanceof DataManager && !isNOU(getValue('child', obj[i]))) {
+            else if ((this.fields.dataSource instanceof DataManager) && !isNOU(getValue('child', obj[i]))) {
                 var childData = getValue('child', obj[i]);
                 updated = this.addChildData(childData, this.getChildMapper(mapper), id, data, index);
                 if (updated !== undefined) {
@@ -2782,32 +3883,82 @@ var TreeView = /** @class */ (function (_super) {
         return updated;
     };
     TreeView.prototype.doDisableAction = function (nodes) {
-        for (var i = 0, len = nodes.length; i < len; i++) {
-            var liEle = this.getElement(nodes[i]);
-            if (isNOU(liEle)) {
-                var id = void 0;
-                id = (nodes[i]) ? nodes[i].toString() : null;
-                if (id && this.disableNode.indexOf(nodes[i].toString()) === -1) {
-                    this.disableNode.push(nodes[i].toString());
-                }
-                continue;
+        var validNodes = this.nodeType(nodes);
+        var validID = this.checkValidId(validNodes);
+        this.validArr = [];
+        for (var i = 0, len = validID.length; i < len; i++) {
+            var id = validID[i][this.fields.id].toString();
+            if (id && this.disableNode.indexOf(id) === -1) {
+                this.disableNode.push(id);
+            }
+            var liEle = this.getElement(id);
+            if (liEle) {
+                liEle.setAttribute('aria-disabled', 'true');
+                addClass([liEle], DISABLE);
             }
-            liEle.setAttribute('aria-disabled', 'true');
-            addClass([liEle], DISABLE);
         }
     };
     TreeView.prototype.doEnableAction = function (nodes) {
+        var strNodes = this.nodeType(nodes);
+        for (var i = 0, len = strNodes.length; i < len; i++) {
+            var liEle = this.getElement(strNodes[i]);
+            var id = strNodes[i];
+            if (id && this.disableNode.indexOf(id) !== -1) {
+                this.disableNode.splice(this.disableNode.indexOf(id), 1);
+            }
+            if (liEle) {
+                liEle.removeAttribute('aria-disabled');
+                removeClass([liEle], DISABLE);
+            }
+        }
+    };
+    TreeView.prototype.nodeType = function (nodes) {
+        var validID = [];
         for (var i = 0, len = nodes.length; i < len; i++) {
-            var liEle = this.getElement(nodes[i]);
-            if (isNOU(liEle)) {
-                var id = (nodes[i]) ? nodes[i].toString() : null;
-                if (id && this.disableNode.indexOf(id) !== -1) {
-                    this.disableNode.splice(this.disableNode.indexOf(id), 1);
+            var id = void 0;
+            if (typeof nodes[i] == "string") {
+                id = (nodes[i]) ? nodes[i].toString() : null;
+            }
+            else if (typeof nodes[i] === "object") {
+                id = nodes[i] ? nodes[i].getAttribute("data-uid").toString() : null;
+            }
+            if (validID.indexOf(id) == -1) {
+                validID.push(id);
+            }
+        }
+        return validID;
+    };
+    TreeView.prototype.checkValidId = function (node) {
+        var _this = this;
+        if (this.dataType === 1) {
+            this.validArr = this.treeData.filter(function (data) {
+                return node.indexOf(data[_this.fields.id] ? data[_this.fields.id].toString() : null) !== -1;
+            });
+        }
+        else if (this.dataType === 2) {
+            for (var k = 0; k < this.treeData.length; k++) {
+                var id = this.treeData[k][this.fields.id] ? this.treeData[k][this.fields.id].toString() : null;
+                if (node.indexOf(id) !== -1) {
+                    this.validArr.push(this.treeData[k]);
                 }
-                continue;
+                var childItems = getValue(this.fields.child.toString(), this.treeData[k]);
+                if (childItems) {
+                    this.filterNestedChild(childItems, node);
+                }
+            }
+        }
+        return this.validArr;
+    };
+    TreeView.prototype.filterNestedChild = function (treeData, nodes) {
+        for (var k = 0; k < treeData.length; k++) {
+            var id = treeData[k][this.fields.id] ? treeData[k][this.fields.id].toString() : null;
+            if (nodes.indexOf(id) !== -1) {
+                this.validArr.push(treeData[k]);
+            }
+            var childItems = getValue(this.fields.child.toString(), treeData[k]);
+            if (childItems) {
+                this.filterNestedChild(childItems, nodes);
             }
-            liEle.removeAttribute('aria-disabled');
-            removeClass([liEle], DISABLE);
         }
     };
     TreeView.prototype.setTouchClass = function () {
@@ -2913,19 +4064,28 @@ var TreeView = /** @class */ (function (_super) {
         }
         return removedData;
     };
-    TreeView.prototype.triggerEvent = function () {
-        var eventArgs = { data: this.treeData };
+    TreeView.prototype.triggerEvent = function (action, node) {
+        this.renderReactTemplates();
+        if (action === 'addNodes') {
+            var nodeData = [];
+            for (var i = 0; i < node.length; i++) {
+                nodeData.push(this.getNode(this.getElement(isNOU(node[i][this.fields.id]) ? getValue(this.fields.id, node[i]).toString() : null)));
+            }
+            node = nodeData;
+        }
+        var eventArgs = { data: this.treeData, action: action, nodeData: node };
         this.trigger('dataSourceChanged', eventArgs);
     };
     TreeView.prototype.wireInputEvents = function (inpEle) {
         EventHandler.add(inpEle, 'blur', this.inputFocusOut, this);
     };
     TreeView.prototype.wireEditingEvents = function (toBind) {
-        if (toBind) {
+        var _this = this;
+        if (toBind && !this.disabled) {
             var proxy_2 = this;
             this.touchEditObj = new Touch(this.element, {
                 tap: function (e) {
-                    if (e.tapCount === 2) {
+                    if (_this.isDoubleTapped(e) && e.tapCount === 2) {
                         e.originalEvent.preventDefault();
                         proxy_2.editingHandler(e.originalEvent);
                     }
@@ -2943,7 +4103,6 @@ var TreeView = /** @class */ (function (_super) {
             var proxy_3 = this;
             this.touchClickObj = new Touch(this.element, {
                 tap: function (e) {
-                    e.originalEvent.preventDefault();
                     proxy_3.clickHandler(e);
                 }
             });
@@ -2960,7 +4119,8 @@ var TreeView = /** @class */ (function (_super) {
             var proxy_4 = this;
             this.touchExpandObj = new Touch(this.element, {
                 tap: function (e) {
-                    if (_this.expandOnType === 'Click' || (_this.expandOnType === 'DblClick' && e.tapCount === 2)) {
+                    if ((_this.expandOnType === 'Click' || (_this.expandOnType === 'DblClick' && _this.isDoubleTapped(e) && e.tapCount === 2))
+                        && e.originalEvent.which !== 3) {
                         proxy_4.expandHandler(e);
                     }
                 }
@@ -2991,8 +4151,6 @@ var TreeView = /** @class */ (function (_super) {
         if (this.expandOnType !== 'None') {
             this.wireExpandOnEvent(true);
         }
-        EventHandler.add(this.element, 'focus', this.focusIn, this);
-        EventHandler.add(this.element, 'blur', this.focusOut, this);
         EventHandler.add(this.element, 'mouseover', this.onMouseOver, this);
         EventHandler.add(this.element, 'mouseout', this.onMouseLeave, this);
         this.keyboardModule = new KeyboardEvents(this.element, {
@@ -3005,11 +4163,11 @@ var TreeView = /** @class */ (function (_super) {
         EventHandler.remove(this.element, 'mousedown', this.mouseDownHandler);
         this.wireClickEvent(false);
         this.wireExpandOnEvent(false);
-        EventHandler.remove(this.element, 'focus', this.focusIn);
-        EventHandler.remove(this.element, 'blur', this.focusOut);
         EventHandler.remove(this.element, 'mouseover', this.onMouseOver);
         EventHandler.remove(this.element, 'mouseout', this.onMouseLeave);
-        this.keyboardModule.destroy();
+        if (!this.disabled) {
+            this.keyboardModule.destroy();
+        }
     };
     TreeView.prototype.parents = function (element, selector) {
         var matched = [];
@@ -3022,6 +4180,19 @@ var TreeView = /** @class */ (function (_super) {
         }
         return matched;
     };
+    TreeView.prototype.isDoubleTapped = function (e) {
+        var target = e.originalEvent.target;
+        var secondTap;
+        if (target && e.tapCount) {
+            if (e.tapCount === 1) {
+                this.firstTap = closest(target, '.' + LISTITEM);
+            }
+            else if (e.tapCount === 2) {
+                secondTap = closest(target, '.' + LISTITEM);
+            }
+        }
+        return (this.firstTap === secondTap);
+    };
     TreeView.prototype.isDescendant = function (parent, child) {
         var node = child.parentNode;
         while (!isNOU(node)) {
@@ -3048,10 +4219,303 @@ var TreeView = /** @class */ (function (_super) {
     TreeView.prototype.setCheckedNodes = function (nodes) {
         nodes = JSON.parse(JSON.stringify(nodes));
         this.uncheckAll(this.checkedNodes);
+        this.setIndeterminate(nodes);
         if (nodes.length > 0) {
             this.checkAll(nodes);
         }
     };
+    /**
+     * Checks whether the checkedNodes entered are valid and sets the valid checkedNodes while changing via setmodel
+     */
+    TreeView.prototype.setValidCheckedNode = function (node) {
+        if (this.dataType === 1) {
+            var mapper = this.fields;
+            var resultData = new DataManager(this.treeData).executeLocal(new Query().where(mapper.id, 'equal', node, true));
+            if (resultData[0]) {
+                this.setChildCheckState(resultData, node, resultData[0]);
+                if (this.autoCheck) {
+                    var parent_4 = resultData[0][this.fields.parentID] ? resultData[0][this.fields.parentID].toString() : null;
+                    var childNodes = this.getChildNodes(this.treeData, parent_4);
+                    var count = 0;
+                    for (var len = 0; len < childNodes.length; len++) {
+                        var childId = childNodes[len][this.fields.id].toString();
+                        if (this.checkedNodes.indexOf(childId) !== -1) {
+                            count++;
+                        }
+                    }
+                    if (count === childNodes.length && this.checkedNodes.indexOf(parent_4) === -1 && parent_4) {
+                        this.checkedNodes.push(parent_4);
+                    }
+                }
+            }
+        }
+        else if (this.dataType === 2) {
+            for (var a = 0; a < this.treeData.length; a++) {
+                var index = this.treeData[a][this.fields.id] ? this.treeData[a][this.fields.id].toString() : '';
+                if (index === node && this.checkedNodes.indexOf(node) === -1) {
+                    this.checkedNodes.push(node);
+                    break;
+                }
+                var childItems = getValue(this.fields.child.toString(), this.treeData[a]);
+                if (childItems) {
+                    this.setChildCheckState(childItems, node, this.treeData[a]);
+                }
+            }
+        }
+    };
+    /**
+     * Checks whether the checkedNodes entered are valid and sets the valid checkedNodes while changing via setmodel(for hierarchical DS)
+     */
+    TreeView.prototype.setChildCheckState = function (childItems, node, treeData) {
+        var checkedParent;
+        var count = 0;
+        if (this.dataType === 1) {
+            if (treeData) {
+                checkedParent = treeData[this.fields.id] ? treeData[this.fields.id].toString() : null;
+            }
+            for (var index = 0; index < childItems.length; index++) {
+                var checkNode = childItems[index][this.fields.id] ? childItems[index][this.fields.id].toString() : null;
+                if (treeData && checkedParent && this.autoCheck) {
+                    if (this.checkedNodes.indexOf(checkedParent) !== -1 && this.checkedNodes.indexOf(checkNode) === -1) {
+                        this.checkedNodes.push(checkNode);
+                    }
+                }
+                if (checkNode === node && this.checkedNodes.indexOf(node) === -1) {
+                    this.checkedNodes.push(node);
+                }
+                var subChildItems = this.getChildNodes(this.treeData, checkNode);
+                if (subChildItems) {
+                    this.setChildCheckState(subChildItems, node, treeData);
+                }
+            }
+        }
+        else {
+            if (treeData) {
+                checkedParent = treeData[this.fields.id] ? treeData[this.fields.id].toString() : '';
+            }
+            for (var index = 0; index < childItems.length; index++) {
+                var checkedChild = childItems[index][this.fields.id] ? childItems[index][this.fields.id].toString() : '';
+                if (treeData && checkedParent && this.autoCheck) {
+                    if (this.checkedNodes.indexOf(checkedParent) !== -1 && this.checkedNodes.indexOf(checkedChild) === -1) {
+                        this.checkedNodes.push(checkedChild);
+                    }
+                }
+                if (checkedChild === node && this.checkedNodes.indexOf(node) === -1) {
+                    this.checkedNodes.push(node);
+                }
+                var subChildItems = getValue(this.fields.child.toString(), childItems[index]);
+                if (subChildItems) {
+                    this.setChildCheckState(subChildItems, node, childItems[index]);
+                }
+                if (this.checkedNodes.indexOf(checkedChild) !== -1 && this.autoCheck) {
+                    count++;
+                }
+                if (count === childItems.length && this.checkedNodes.indexOf(checkedParent) === -1 && this.autoCheck) {
+                    this.checkedNodes.push(checkedParent);
+                }
+            }
+        }
+    };
+    TreeView.prototype.setIndeterminate = function (nodes) {
+        for (var i = 0; i < nodes.length; i++) {
+            this.setValidCheckedNode(nodes[i]);
+        }
+    };
+    TreeView.prototype.updatePosition = function (id, newData, isRefreshChild, childValue) {
+        if (this.dataType === 1) {
+            var pos = this.getDataPos(this.treeData, this.fields, id);
+            this.treeData.splice(pos, 1, newData);
+            if (isRefreshChild) {
+                this.removeChildNodes(id);
+                for (var j = 0; j < childValue.length; j++) {
+                    this.treeData.splice(pos, 0, childValue[j]);
+                    pos++;
+                }
+            }
+            this.groupedData = this.getGroupedData(this.treeData, this.fields.parentID);
+        }
+        else {
+            this.updateChildPosition(this.treeData, this.fields, id, [newData], undefined);
+        }
+    };
+    TreeView.prototype.updateChildPosition = function (treeData, mapper, currID, newData, index) {
+        var found;
+        for (var i = 0, objlen = treeData.length; i < objlen; i++) {
+            var nodeId = getValue(mapper.id, treeData[i]);
+            if (treeData[i] && nodeId && nodeId.toString() === currID) {
+                treeData[i] = newData[0];
+                return true;
+            }
+            else if (typeof mapper.child === 'string' && !isNOU(getValue(mapper.child, treeData[i]))) {
+                var childObj = getValue(mapper.child, treeData[i]);
+                found = this.updateChildPosition(childObj, this.getChildMapper(mapper), currID, newData, index);
+                if (found !== undefined) {
+                    break;
+                }
+            }
+            else if (this.fields.dataSource instanceof DataManager && !isNOU(getValue('child', treeData[i]))) {
+                var childData = getValue('child', treeData[i]);
+                found = this.updateChildPosition(childData, this.getChildMapper(mapper), currID, newData, index);
+                if (found !== undefined) {
+                    break;
+                }
+            }
+        }
+        return found;
+    };
+    TreeView.prototype.dynamicState = function () {
+        this.setDragAndDrop(this.allowDragAndDrop);
+        this.wireEditingEvents(this.allowEditing);
+        if (!this.disabled) {
+            this.wireEvents();
+            this.setRipple();
+        }
+        else {
+            this.unWireEvents();
+            this.rippleFn();
+            this.rippleIconFn();
+        }
+    };
+    TreeView.prototype.crudOperation = function (operation, nodes, target, newText, newNode, index, prevent) {
+        var _this = this;
+        var data = this.fields.dataSource;
+        var matchedArr = [];
+        var query = this.getQuery(this.fields);
+        var key = this.fields.id;
+        var crud;
+        var changes = {
+            addedRecords: [],
+            deletedRecords: [],
+            changedRecords: []
+        };
+        var nodesID = [];
+        if (nodes) {
+            nodesID = this.nodeType(nodes);
+        }
+        else if (target) {
+            if (typeof target == "string") {
+                nodesID[0] = target.toString();
+            }
+            else if (typeof target === "object") {
+                nodesID[0] = target.getAttribute("data-uid").toString();
+            }
+        }
+        for (var i = 0, len = nodesID.length; i < len; i++) {
+            var liEle = this.getElement(nodesID[i]);
+            if (isNullOrUndefined(liEle)) {
+                continue;
+            }
+            var removedData = this.getNodeObject(nodesID[i]);
+            matchedArr.push(removedData);
+        }
+        switch (operation) {
+            case 'delete':
+                if (nodes.length == 1) {
+                    crud = data.remove(key, matchedArr[0], query.fromTable, query);
+                }
+                else {
+                    changes.deletedRecords = matchedArr;
+                    crud = data.saveChanges(changes, key, query.fromTable, query);
+                }
+                crud.then(function (e) { return _this.deleteSuccess(nodesID); })
+                    .catch(function (e) { return _this.dmFailure(e); });
+                break;
+            case 'update':
+                matchedArr[0][this.fields.text] = newText;
+                crud = data.update(key, matchedArr[0], query.fromTable, query);
+                crud.then(function (e) { return _this.editSucess(target, newText, prevent); })
+                    .catch(function (e) { return _this.dmFailure(e, target, prevent); });
+                break;
+            case 'insert':
+                if (newNode.length == 1) {
+                    crud = data.insert(newNode[0], query.fromTable, query);
+                }
+                else {
+                    var arr = [];
+                    for (var i = 0, len = newNode.length; i < len; i++) {
+                        arr.push(newNode[i]);
+                    }
+                    changes.addedRecords = arr;
+                    crud = data.saveChanges(changes, key, query.fromTable, query);
+                }
+                crud.then(function (e) {
+                    var dropLi = _this.getElement(target);
+                    _this.addSuccess(newNode, dropLi, index);
+                    _this.preventExpand = false;
+                }).catch(function (e) { return _this.dmFailure(e); });
+                break;
+        }
+    };
+    TreeView.prototype.deleteSuccess = function (nodes) {
+        var nodeData = [];
+        for (var i = 0, len = nodes.length; i < len; i++) {
+            var liEle = this.getElement(nodes[i]);
+            nodeData.push(this.getNode(liEle));
+            if (isNOU(liEle)) {
+                continue;
+            }
+            this.removeNode(liEle);
+        }
+        this.updateInstance();
+        if (this.dataType === 1) {
+            this.groupedData = this.getGroupedData(this.treeData, this.fields.parentID);
+        }
+        this.triggerEvent('removeNode', nodeData);
+    };
+    TreeView.prototype.editSucess = function (target, newText, prevent) {
+        var liEle = this.getElement(target);
+        var txtEle = select('.' + LISTTEXT, liEle);
+        this.appendNewText(liEle, txtEle, newText, prevent);
+    };
+    TreeView.prototype.addSuccess = function (nodes, dropLi, index) {
+        var dropUl;
+        var icon = dropLi ? dropLi.querySelector('.' + ICON) : null;
+        var proxy = this;
+        if (dropLi && icon && icon.classList.contains(EXPANDABLE) &&
+            dropLi.querySelector('.' + PARENTITEM) === null) {
+            proxy.renderChildNodes(dropLi, null, function () {
+                dropUl = dropLi.querySelector('.' + PARENTITEM);
+                proxy.addGivenNodes(nodes, dropLi, index, true, dropUl);
+                proxy.triggerEvent('addNodes', nodes);
+            });
+        }
+        else {
+            this.addGivenNodes(nodes, dropLi, index, true);
+            this.triggerEvent('addNodes', nodes);
+        }
+    };
+    TreeView.prototype.dmFailure = function (e, target, prevent) {
+        if (target) {
+            this.updatePreviousText(target, prevent);
+        }
+        this.trigger('actionFailure', { error: e });
+    };
+    TreeView.prototype.updatePreviousText = function (target, prevent) {
+        var liEle = this.getElement(target);
+        var txtEle = select('.' + LISTTEXT, liEle);
+        this.updateText(liEle, txtEle, this.oldText, prevent);
+    };
+    TreeView.prototype.getHierarchicalParentId = function (node, data, parentsID) {
+        var _this = this;
+        var index = data.findIndex(function (data) { return data[_this.fields.id] && data[_this.fields.id].toString() === node; });
+        if (index == -1) {
+            for (var i = 0; i < data.length; i++) {
+                var childItems = getValue(this.fields.child.toString(), data[i]);
+                if (!isNOU(childItems)) {
+                    index = childItems.findIndex(function (data) { return data[_this.fields.id] && data[_this.fields.id].toString() === node; });
+                    if (index == -1) {
+                        this.getHierarchicalParentId(node, childItems, parentsID);
+                    }
+                    else {
+                        parentsID.push(data[i][this.fields.id].toString());
+                        this.getHierarchicalParentId(data[i][this.fields.id].toString(), this.treeData, parentsID);
+                        break;
+                    }
+                }
+            }
+        }
+        return parentsID;
+    };
     /**
      * Called internally if any of the property value changed.
      * @param  {TreeView} newProp
@@ -3066,6 +4530,11 @@ var TreeView = /** @class */ (function (_super) {
                 case 'allowDragAndDrop':
                     this.setDragAndDrop(this.allowDragAndDrop);
                     break;
+                case 'dragArea':
+                    if (this.allowDragAndDrop) {
+                        this.dragObj.dragArea = this.dragArea;
+                    }
+                    break;
                 case 'allowEditing':
                     this.wireEditingEvents(this.allowEditing);
                     break;
@@ -3080,6 +4549,10 @@ var TreeView = /** @class */ (function (_super) {
                     this.setMultiSelect(this.allowMultiSelection);
                     this.addMultiSelect(this.allowMultiSelection);
                     break;
+                case 'allowTextWrap':
+                    this.setTextWrap();
+                    this.updateWrap();
+                    break;
                 case 'checkedNodes':
                     if (this.showCheckBox) {
                         this.checkedNodes = oldProp.checkedNodes;
@@ -3111,34 +4584,46 @@ var TreeView = /** @class */ (function (_super) {
                 case 'expandOn':
                     this.wireExpandOnEvent(false);
                     this.setExpandOnType();
-                    if (this.expandOnType !== 'None') {
+                    if (this.expandOnType !== 'None' && !this.disabled) {
                         this.wireExpandOnEvent(true);
                     }
                     break;
+                case 'disabled':
+                    this.setDisabledMode();
+                    this.dynamicState();
+                    break;
                 case 'fields':
                     this.isAnimate = false;
+                    this.isFieldChange = true;
                     this.initialRender = true;
-                    this.updateListProp(this.fields);
                     this.reRenderNodes();
                     this.initialRender = false;
                     this.isAnimate = true;
+                    this.isFieldChange = false;
                     break;
                 case 'fullRowSelect':
                     this.setFullRow(this.fullRowSelect);
                     this.addFullRow(this.fullRowSelect);
+                    if (this.allowTextWrap) {
+                        this.setTextWrap();
+                        this.updateWrap();
+                    }
                     break;
                 case 'loadOnDemand':
                     if (this.loadOnDemand === false && !this.onLoaded) {
                         var nodes = this.element.querySelectorAll('li');
                         var i = 0;
                         while (i < nodes.length) {
-                            this.renderChildNodes(nodes[i], true, null, true);
+                            if (nodes[i].getAttribute('aria-expanded') !== 'true') {
+                                this.renderChildNodes(nodes[i], true, null, true);
+                            }
                             i++;
                         }
                         this.onLoaded = true;
                     }
                     break;
                 case 'nodeTemplate':
+                    this.hasTemplate = false;
                     this.nodeTemplateFn = this.templateComplier(this.nodeTemplate);
                     this.reRenderNodes();
                     break;
@@ -3153,6 +4638,11 @@ var TreeView = /** @class */ (function (_super) {
                 case 'sortOrder':
                     this.reRenderNodes();
                     break;
+                case 'fullRowNavigable':
+                    this.setProperties({ fullRowNavigable: newProp.fullRowNavigable }, true);
+                    this.listBaseOption.itemNavigable = newProp.fullRowNavigable;
+                    this.reRenderNodes();
+                    break;
             }
         }
     };
@@ -3160,16 +4650,20 @@ var TreeView = /** @class */ (function (_super) {
      * Removes the component from the DOM and detaches all its related event handlers. It also removes the attributes and classes.
      */
     TreeView.prototype.destroy = function () {
+        this.clearTemplate();
         this.element.removeAttribute('aria-activedescendant');
-        this.element.removeAttribute('tabindex');
         this.unWireEvents();
         this.wireEditingEvents(false);
-        this.rippleFn();
-        this.rippleIconFn();
+        if (!this.disabled) {
+            this.rippleFn();
+            this.rippleIconFn();
+        }
         this.setCssClass(this.cssClass, null);
         this.setDragAndDrop(false);
         this.setFullRow(false);
-        this.element.innerHTML = '';
+        if (this.ulElement && this.ulElement.parentElement) {
+            this.ulElement.parentElement.removeChild(this.ulElement);
+        }
         _super.prototype.destroy.call(this);
     };
     /**
@@ -3188,20 +4682,11 @@ var TreeView = /** @class */ (function (_super) {
         var dropLi = this.getElement(target);
         this.preventExpand = preventTargetExpand;
         if (this.fields.dataSource instanceof DataManager) {
-            var dropUl_1;
-            var icon = dropLi ? dropLi.querySelector('.' + ICON) : null;
-            var proxy_5 = this;
-            if (dropLi && icon && icon.classList.contains(EXPANDABLE) &&
-                dropLi.querySelector('.' + PARENTITEM) === null) {
-                proxy_5.renderChildNodes(dropLi, null, function () {
-                    dropUl_1 = dropLi.querySelector('.' + PARENTITEM);
-                    proxy_5.addGivenNodes(nodes, dropLi, index, true, dropUl_1);
-                    proxy_5.triggerEvent();
-                });
+            if (!this.isOffline) {
+                this.crudOperation('insert', null, target, null, nodes, index, this.preventExpand);
             }
             else {
-                this.addGivenNodes(nodes, dropLi, index, true);
-                this.triggerEvent();
+                this.addSuccess(nodes, dropLi, index);
             }
         }
         else if (this.dataType === 2) {
@@ -3221,22 +4706,27 @@ var TreeView = /** @class */ (function (_super) {
             }
             this.groupedData = this.getGroupedData(this.treeData, this.fields.parentID);
         }
-        if (this.fields.dataSource instanceof DataManager === false) {
+        this.updateCheckedStateFromDS();
+        if (this.showCheckBox && dropLi) {
+            this.ensureParentCheckState(dropLi);
+        }
+        if ((this.fields.dataSource instanceof DataManager === false)) {
             this.preventExpand = false;
-            this.triggerEvent();
+            this.triggerEvent('addNodes', nodes);
         }
     };
     /**
-     * Instead of clicking on the TreeView node for editing, we can enable it by using
-     * `beginEdit` property. On passing the node ID or element through this property, the edit textBox
+     * Editing can also be enabled by using the `beginEdit` property, instead of clicking on the
+     * TreeView node. On passing the node ID or element through this property, the edit textBox
      * will be created for the particular node thus allowing us to edit it.
      * @param  {string | Element} node - Specifies ID of TreeView node/TreeView node.
      */
     TreeView.prototype.beginEdit = function (node) {
         var ele = this.getElement(node);
-        if (!isNOU(ele)) {
-            this.createTextbox(ele, null);
+        if (isNOU(ele) || this.disabled) {
+            return;
         }
+        this.createTextbox(ele, null);
     };
     /**
      * Checks all the unchecked nodes. You can also check specific nodes by passing array of unchecked nodes
@@ -3294,13 +4784,26 @@ var TreeView = /** @class */ (function (_super) {
      * @param  {string | Element} node - Specifies ID of TreeView node/TreeView nodes.
      */
     TreeView.prototype.ensureVisible = function (node) {
+        var parentsId = [];
+        if (this.dataType == 1) {
+            var nodeData = this.getTreeData(node);
+            while (nodeData.length != 0 && !isNOU(nodeData[0][this.fields.parentID])) {
+                parentsId.push(nodeData[0][this.fields.parentID].toString());
+                nodeData = this.getTreeData(nodeData[0][this.fields.parentID].toString());
+            }
+        }
+        else if (this.dataType == 2) {
+            parentsId = this.getHierarchicalParentId(node, this.treeData, parentsId).reverse();
+        }
+        this.expandAll(parentsId);
         var liEle = this.getElement(node);
-        if (isNOU(liEle)) {
-            return;
+        if (!isNOU(liEle)) {
+            if (typeof node == 'object') {
+                var parents = this.parents(liEle, '.' + LISTITEM);
+                this.expandAll(parents);
+            }
+            setTimeout(function () { liEle.scrollIntoView({ behavior: "smooth" }); }, 450);
         }
-        var parents = this.parents(liEle, '.' + LISTITEM);
-        this.expandAll(parents);
-        setTimeout(function () { liEle.scrollIntoView(true); }, 450);
     };
     /**
      * Expands all the collapsed TreeView nodes. You can expand the specific nodes by passing the array of collapsed nodes
@@ -3328,49 +4831,17 @@ var TreeView = /** @class */ (function (_super) {
      */
     TreeView.prototype.getAllCheckedNodes = function () {
         var checkNodes = this.checkedNodes;
-        var newCheck = [];
-        var i = 0;
-        var id = this.fields.id;
-        for (i; i < this.treeData.length; i++) {
-            //Checks if isChecked is enabled while node is not loaded in DOM
-            var checked = null;
-            var childNode = null;
-            var isLoaded = this.element.querySelector('[data-uid="' + this.treeData[i][id].toString() + '"]');
-            if (isLoaded && isLoaded.querySelector('.e-list-item') === null) {
-                //Checks if isChecked is enabled for parent
-                if (this.treeData[i][this.fields.isChecked] === true
-                    && this.checkedElement.indexOf(this.treeData[i][id].toString()) === -1) {
-                    newCheck.push(this.treeData[i][id].toString());
-                    checked = 2;
-                }
-                //Checks for child nodes with isChecked enabled
-                if (checked !== 2) {
-                    checked = 1;
-                }
-                childNode = this.getChildNodes(this.treeData, this.treeData[i][id].toString());
-                (childNode !== null) ? this.allCheckNode(childNode, newCheck, checked) : childNode = null;
-            }
-        }
-        i = 0;
-        //Gets checked nodes based on UI interaction
-        while (i < checkNodes.length) {
-            if (newCheck.indexOf(checkNodes[i]) !== -1) {
-                i++;
-                continue;
-            }
-            newCheck.push(checkNodes[i]);
-            //Gets all child which is not loaded while parent is checked
-            var parentNode = this.element.querySelector('[data-uid="' + checkNodes[i] + '"]');
-            if (parentNode && parentNode.querySelector('.e-list-item') === null) {
-                var child = this.getChildNodes(this.treeData, checkNodes[i].toString());
-                (child && this.autoCheck) ? this.allCheckNode(child, newCheck) : child = null;
-            }
-            i++;
-        }
-        return newCheck;
+        return checkNodes;
+    };
+    /**
+    * Gets all the disabled nodes including child, whether it is loaded or not.
+    */
+    TreeView.prototype.getDisabledNodes = function () {
+        var disabledNodes = this.disableNode;
+        return disabledNodes;
     };
     /**
-     * Get the node's data such as id, text, parentID, selected, isChecked, and expanded by passing the node element or it's ID.
+     * Gets the node's data such as id, text, parentID, selected, isChecked, and expanded by passing the node element or it's ID.
      * @param  {string | Element} node - Specifies ID of TreeView node/TreeView node.
      */
     TreeView.prototype.getNode = function (node) {
@@ -3384,6 +4855,7 @@ var TreeView = /** @class */ (function (_super) {
      * of the corresponding node otherwise it will return the entire updated data source of TreeView.
      * * The updated data source also contains custom attributes if you specified in data source.
      * @param  {string | Element} node - Specifies ID of TreeView node/TreeView node.
+     * @isGenericType true
      */
     TreeView.prototype.getTreeData = function (node) {
         var id = this.getId(node);
@@ -3405,11 +4877,13 @@ var TreeView = /** @class */ (function (_super) {
      */
     TreeView.prototype.moveNodes = function (sourceNodes, target, index, preventTargetExpand) {
         var dropLi = this.getElement(target);
+        var nodeData = [];
         if (isNOU(dropLi)) {
             return;
         }
         for (var i = 0; i < sourceNodes.length; i++) {
             var dragLi = this.getElement(sourceNodes[i]);
+            nodeData.push(this.getNode(dragLi));
             if (isNOU(dragLi) || dropLi.isSameNode(dragLi) || this.isDescendant(dragLi, dropLi)) {
                 continue;
             }
@@ -3419,7 +4893,111 @@ var TreeView = /** @class */ (function (_super) {
         if (this.fields.dataSource instanceof DataManager === false) {
             this.preventExpand = false;
         }
-        this.triggerEvent();
+        this.triggerEvent('moveNodes', nodeData);
+    };
+    /**
+     * Refreshes a particular node of the TreeView.
+     * @param  {string | Element} target - Specifies the ID of TreeView node or TreeView node as target element.
+     * @param  {{ [key: string]: Object }[]} newData - Specifies the new data of TreeView node.
+     */
+    TreeView.prototype.refreshNode = function (target, newData) {
+        if (isNOU(target) || isNOU(newData)) {
+            return;
+        }
+        var id;
+        var isRefreshChild = false;
+        if (this.dataType == 1 && newData.length > 1) {
+            isRefreshChild = true;
+        }
+        else if (this.dataType == 2 && newData.length === 1) {
+            var updatedChildValue = getValue(this.fields.child.toString(), newData[0]);
+            if (!isNOU(updatedChildValue)) {
+                isRefreshChild = true;
+            }
+        }
+        var liEle = this.getElement(target);
+        id = liEle ? liEle.getAttribute('data-uid') : ((target) ? target.toString() : null);
+        this.refreshData = this.getNodeObject(id);
+        newData = JSON.parse(JSON.stringify(newData));
+        /* eslint-disable */
+        var newNodeData;
+        var parentData;
+        if (this.dataType == 1 && isRefreshChild) {
+            for (var k = 0; k < newData.length; k++) {
+                if (isNOU(newData[k][this.fields.parentID])) {
+                    parentData = newData[k];
+                    newData.splice(k, 1);
+                    break;
+                }
+            }
+            newNodeData = extend({}, this.refreshData, parentData);
+        }
+        else {
+            newNodeData = extend({}, this.refreshData, newData[0]);
+        }
+        if (isNOU(liEle)) {
+            this.updatePosition(id, newNodeData, isRefreshChild, newData);
+            return;
+        }
+        this.isRefreshed = true;
+        var level = parseFloat(liEle.getAttribute('aria-level'));
+        var newliEle = ListBase.createListItemFromJson(this.createElement, [newNodeData], this.listBaseOption, level);
+        var ul = select('.' + PARENTITEM, liEle);
+        var childItems = getValue(this.fields.child.toString(), newNodeData);
+        if ((isRefreshChild && ul) || (isRefreshChild && !isNOU(childItems))) {
+            var parentEle = liEle.parentElement;
+            var index = Array.prototype.indexOf.call(parentEle.childNodes, liEle);
+            remove(liEle);
+            parentEle.insertBefore(newliEle[0], parentEle.childNodes[index]);
+            this.updatePosition(id, newNodeData, isRefreshChild, newData);
+            if (isRefreshChild && ul) {
+                this.expandAll([id]);
+            }
+        }
+        else {
+            var txtEle = select('.' + TEXTWRAP, liEle);
+            var newTextEle = select('.' + TEXTWRAP, newliEle[0]);
+            var icon = select('div.' + ICON, txtEle);
+            var newIcon = select('div.' + ICON, newTextEle);
+            if (icon && newIcon) {
+                if (newIcon.classList.contains(EXPANDABLE) && icon.classList.contains(COLLAPSIBLE)) {
+                    removeClass([newIcon], EXPANDABLE);
+                    addClass([newIcon], COLLAPSIBLE);
+                }
+                else if (newIcon.classList.contains(COLLAPSIBLE) && icon.classList.contains(EXPANDABLE)) {
+                    removeClass([newIcon], COLLAPSIBLE);
+                    addClass([newIcon], EXPANDABLE);
+                }
+                else if (icon.classList.contains('interaction')) {
+                    addClass([newIcon], 'interaction');
+                }
+            }
+            remove(txtEle);
+            var fullEle = select('.' + FULLROW, liEle);
+            fullEle.parentNode.insertBefore(newTextEle, fullEle.nextSibling);
+            this.updatePosition(id, newNodeData, isRefreshChild, newData);
+        }
+        liEle = this.getElement(target);
+        if (newNodeData[this.fields.tooltip]) {
+            liEle.setAttribute("title", newNodeData[this.fields.tooltip]);
+        }
+        if (newNodeData.hasOwnProperty(this.fields.htmlAttributes) && newNodeData[this.fields.htmlAttributes]) {
+            var attr = {};
+            merge(attr, newNodeData[this.fields.htmlAttributes]);
+            if (attr.class) {
+                addClass([liEle], attr.class.split(' '));
+                delete attr.class;
+            }
+            else {
+                attributes(liEle, attr);
+            }
+        }
+        if (this.selectedNodes.indexOf(id) !== -1) {
+            liEle.setAttribute('aria-selected', 'true');
+            addClass([liEle], ACTIVE);
+        }
+        this.isRefreshed = false;
+        this.triggerEvent('refreshNode', [this.getNode(liEle)]);
     };
     /**
      * Removes the collection of TreeView nodes by passing the array of node details as argument to this method.
@@ -3427,17 +5005,12 @@ var TreeView = /** @class */ (function (_super) {
      */
     TreeView.prototype.removeNodes = function (nodes) {
         if (!isNOU(nodes)) {
-            for (var i = 0, len = nodes.length; i < len; i++) {
-                var liEle = this.getElement(nodes[i]);
-                if (isNOU(liEle)) {
-                    continue;
-                }
-                this.removeNode(liEle);
+            if (this.fields.dataSource instanceof DataManager && !this.isOffline) {
+                this.crudOperation('delete', nodes);
             }
-            if (this.dataType === 1) {
-                this.groupedData = this.getGroupedData(this.treeData, this.fields.parentID);
+            else {
+                this.deleteSuccess(nodes);
             }
-            this.triggerEvent();
         }
     };
     /**
@@ -3446,6 +5019,7 @@ var TreeView = /** @class */ (function (_super) {
      * @param  {string} newText - Specifies the new text of TreeView node.
      */
     TreeView.prototype.updateNode = function (target, newText) {
+        var _this = this;
         if (isNOU(target) || isNOU(newText) || !this.allowEditing) {
             return;
         }
@@ -3456,11 +5030,16 @@ var TreeView = /** @class */ (function (_super) {
         var txtEle = select('.' + LISTTEXT, liEle);
         this.updateOldText(liEle);
         var eventArgs = this.getEditEvent(liEle, null, null);
-        this.trigger('nodeEditing', eventArgs);
-        if (eventArgs.cancel) {
-            return;
-        }
-        this.appendNewText(liEle, txtEle, newText, false);
+        this.trigger('nodeEditing', eventArgs, function (observedArgs) {
+            if (!observedArgs.cancel) {
+                if (_this.fields.dataSource instanceof DataManager && !_this.isOffline) {
+                    _this.crudOperation('update', null, target, newText, null, null, false);
+                }
+                else {
+                    _this.appendNewText(liEle, txtEle, newText, false);
+                }
+            }
+        });
     };
     /**
      * Unchecks all the checked nodes. You can also uncheck the specific nodes by passing array of checked nodes
@@ -3482,6 +5061,9 @@ var TreeView = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], TreeView.prototype, "allowMultiSelection", void 0);
+    __decorate([
+        Property(false)
+    ], TreeView.prototype, "allowTextWrap", void 0);
     __decorate([
         Complex({}, NodeAnimationSettings)
     ], TreeView.prototype, "animation", void 0);
@@ -3493,10 +5075,16 @@ var TreeView = /** @class */ (function (_super) {
     ], TreeView.prototype, "cssClass", void 0);
     __decorate([
         Property(false)
-    ], TreeView.prototype, "enablePersistence", void 0);
+    ], TreeView.prototype, "disabled", void 0);
+    __decorate([
+        Property(null)
+    ], TreeView.prototype, "dragArea", void 0);
+    __decorate([
+        Property(false)
+    ], TreeView.prototype, "enableHtmlSanitizer", void 0);
     __decorate([
         Property(false)
-    ], TreeView.prototype, "enableRtl", void 0);
+    ], TreeView.prototype, "enablePersistence", void 0);
     __decorate([
         Property()
     ], TreeView.prototype, "expandedNodes", void 0);
@@ -3512,6 +5100,9 @@ var TreeView = /** @class */ (function (_super) {
     __decorate([
         Property(true)
     ], TreeView.prototype, "loadOnDemand", void 0);
+    __decorate([
+        Property()
+    ], TreeView.prototype, "locale", void 0);
     __decorate([
         Property()
     ], TreeView.prototype, "nodeTemplate", void 0);
@@ -3527,6 +5118,12 @@ var TreeView = /** @class */ (function (_super) {
     __decorate([
         Property(true)
     ], TreeView.prototype, "autoCheck", void 0);
+    __decorate([
+        Property(false)
+    ], TreeView.prototype, "fullRowNavigable", void 0);
+    __decorate([
+        Event()
+    ], TreeView.prototype, "actionFailure", void 0);
     __decorate([
         Event()
     ], TreeView.prototype, "created", void 0);