@syncfusion/ej2-navigations 17.2.55-1205479 → 17.3.14-96615

package/dist/es6/ej2-navigations.es5.js

@@ -1,29 +1,29 @@
-import { Animation, Browser, ChildProperty, Collection, Complex, Component, Draggable, Droppable, Event, EventHandler, KeyboardEvents, L10n, NotifyPropertyChanges, Property, Touch, addClass, append, attributes, blazorTemplates, classList, closest, compile, createElement, detach, extend, formatUnit, getElement, getInstance, getUniqueID, getValue, isBlazor, isNullOrUndefined, isUndefined, isVisible, matches, remove, removeClass, resetBlazorTemplate, rippleEffect, select, selectAll, setStyleAttribute, setValue, updateBlazorTemplate } from '@syncfusion/ej2-base';
+import { Animation, Browser, ChildProperty, Collection, Complex, Component, Draggable, Droppable, Event, EventHandler, KeyboardEvents, L10n, NotifyPropertyChanges, Property, Touch, addClass, append, attributes, blazorTemplates, classList, closest, compile, createElement, detach, extend, formatUnit, getElement, getInstance, getRandomId, getUniqueID, getValue, isBlazor, isNullOrUndefined, isUndefined, isVisible, matches, remove, removeClass, resetBlazorTemplate, rippleEffect, select, selectAll, setStyleAttribute, setValue, updateBlazorTemplate } from '@syncfusion/ej2-base';
 import { ListBase } from '@syncfusion/ej2-lists';
 import { Popup, calculatePosition, createSpinner, fit, getScrollableParent, getZindexPartial, hideSpinner, isCollide, showSpinner } from '@syncfusion/ej2-popups';
 import { Button, createCheckBox, rippleMouseHandler } from '@syncfusion/ej2-buttons';
 import { DataManager, Query } from '@syncfusion/ej2-data';
 import { Input } from '@syncfusion/ej2-inputs';
 
-var __extends = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __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; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    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;
-};
+var __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __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; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
 var CLS_ROOT = 'e-hscroll';
 var CLS_RTL = 'e-rtl';
 var CLS_DISABLE = 'e-overlay';
@@ -210,7 +210,6 @@ var HScroll = /** @__PURE__ @class */ (function (_super) {
         var navLeftItem = this.createElement('div', { className: CLS_NAVLEFTARROW + ' ' + CLS_NAVARROW + ' e-icons' });
         navEle.appendChild(navLeftItem);
         nav.appendChild(navItem);
-        nav.setAttribute('tabindex', '0');
         element.appendChild(nav);
         element.insertBefore(navEle, element.firstChild);
         if (this.ieCheck) {
@@ -495,25 +494,25 @@ var HScroll = /** @__PURE__ @class */ (function (_super) {
     return HScroll;
 }(Component));
 
-var __extends$1 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __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; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    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;
-};
+var __extends$1 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __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; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
 var CLS_ROOT$1 = 'e-vscroll';
 var CLS_RTL$1 = 'e-rtl';
 var CLS_DISABLE$1 = 'e-overlay';
@@ -943,25 +942,25 @@ var VScroll = /** @__PURE__ @class */ (function (_super) {
     return VScroll;
 }(Component));
 
-var __extends$2 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __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; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    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;
-};
+var __extends$2 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __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; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
 var ENTER = 'enter';
 var ESCAPE = 'escape';
 var FOCUSED = 'e-focused';
@@ -1013,6 +1012,17 @@ var FieldSettings = /** @__PURE__ @class */ (function (_super) {
     ], FieldSettings.prototype, "children", void 0);
     return FieldSettings;
 }(ChildProperty));
+var REGX_IOS = /(ipad|iphone|ipod touch)/i;
+var REGX_BROWSER = {
+    OPERA: /(opera|opr)(?:.*version|)[ /]([\w.]+)/i,
+    EDGE: /(edge)(?:.*version|)[ /]([\w.]+)/i,
+    CHROME: /(chrome|crios)[ /]([\w.]+)/i,
+    PANTHOMEJS: /(phantomjs)[ /]([\w.]+)/i,
+    SAFARI: /(safari)[ /]([\w.]+)/i,
+    WEBKIT: /(webkit)[ /]([\w.]+)/i,
+    MSIE: /(msie|trident) ([\w.]+)/i,
+    MOZILLA: /(mozilla)(?:.*? rv:([\w.]+)|)/i
+};
 /**
  * Specifies menu items.
  */
@@ -1196,7 +1206,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
                     EventHandler.add(target, 'click', this.menuHeaderClickHandler, this);
                 }
                 else {
-                    if (Browser.isIos) {
+                    if (this.menuIos()) {
                         new Touch(target, { tapHold: this.touchHandler.bind(this) });
                     }
                     else {
@@ -1206,6 +1216,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
             }
             this.targetElement = target;
             if (!this.isMenu) {
+                EventHandler.add(this.targetElement, 'scroll', this.scrollHandler, this);
                 for (var _i = 0, _a = getScrollableParent(this.targetElement); _i < _a.length; _i++) {
                     var parent_1 = _a[_i];
                     EventHandler.add(parent_1, 'scroll', this.scrollHandler, this);
@@ -1223,6 +1234,22 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
         this.wireKeyboardEvent(wrapper);
         this.rippleFn = rippleEffect(wrapper, { selector: '.' + ITEM });
     };
+    MenuBase.prototype.menuIos = function () {
+        return this.getValue('isIos', REGX_IOS);
+    };
+    MenuBase.prototype.getValue = function (key, regX) {
+        var browserDetails = typeof window !== 'undefined' ? window.browserDetails : {};
+        if (typeof navigator !== 'undefined' && navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1 && Browser.isTouch === true && !REGX_BROWSER.CHROME.test(navigator.userAgent)) {
+            browserDetails['isIos'] = true;
+            browserDetails['isDevice'] = true;
+            browserDetails['isTouch'] = true;
+            browserDetails['isPointer'] = true;
+        }
+        if ('undefined' === typeof browserDetails["" + key]) {
+            return browserDetails["" + key] = regX.test(Browser.userAgent);
+        }
+        return browserDetails["" + key];
+    };
     MenuBase.prototype.wireKeyboardEvent = function (element) {
         var keyConfigs = {
             downarrow: DOWNARROW,
@@ -1995,10 +2022,13 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
                 this.clickHandler(e);
             }
         }
+        else if (this.isMenu && this.showItemOnClick) {
+            this.removeLIStateByClass([FOCUSED], [wrapper].concat(this.getPopups()));
+        }
         if (this.isMenu) {
             if (!this.showItemOnClick && (trgt.parentElement !== wrapper && !closest(trgt, '.e-' + this.getModuleName() + '-popup'))
                 && (!cli || (cli && !this.getIndex(cli.id, true).length))) {
-                this.removeLIStateByClass([FOCUSED, SELECTED], [wrapper]);
+                this.removeLIStateByClass([FOCUSED], [wrapper]);
                 if (this.navIdx.length) {
                     this.isClosed = true;
                     this.closeMenu(null, e);
@@ -2065,6 +2095,9 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
         return false;
     };
     MenuBase.prototype.menuHeaderClickHandler = function (e) {
+        if (closest(e.target, '.e-menu-wrapper').querySelector('ul.e-menu-parent').id !== this.element.id) {
+            return;
+        }
         this.element.classList.contains('e-hide-menu') ? this.openHamburgerMenu(e) : this.closeHamburgerMenu(e);
     };
     MenuBase.prototype.clickHandler = function (e) {
@@ -2075,9 +2108,16 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
             var wrapper = this.getWrapper();
             var trgt = e.target;
             var cli = this.cli = this.getLI(trgt);
+            var regex = new RegExp('-ej2menu-(.*)-popup');
             var cliWrapper = cli ? closest(cli, '.e-' + this.getModuleName() + '-wrapper') : null;
             var isInstLI = cli && cliWrapper && (this.isMenu ? this.getIndex(cli.id, true).length > 0
                 : wrapper.firstElementChild.id === cliWrapper.firstElementChild.id);
+            if (cli && cliWrapper && this.isMenu) {
+                var cliWrapperId = cliWrapper.id ? regex.exec(cliWrapper.id)[1] : cliWrapper.querySelector('.e-menu-parent').id;
+                if (this.element.id !== cliWrapperId) {
+                    return;
+                }
+            }
             if (isInstLI && e.type === 'click' && !cli.classList.contains(HEADER)) {
                 this.setLISelected(cli);
                 var navIdx = this.getIndex(cli.id, true);
@@ -2139,7 +2179,11 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
                     this.menuHeaderClickHandler(e);
                 }
                 else {
-                    if (trgt.tagName !== 'UL' || trgt.parentElement !== wrapper) {
+                    if (trgt.tagName !== 'UL' || (this.isMenu ? trgt.parentElement.classList.contains('e-menu-wrapper') &&
+                        !this.getIndex(trgt.querySelector('.' + ITEM).id, true).length : trgt.parentElement !== wrapper)) {
+                        if (!cli) {
+                            this.removeLIStateByClass([SELECTED], [wrapper]);
+                        }
                         if (!cli || !cli.querySelector('.' + CARET)) {
                             this.closeMenu(null, e);
                         }
@@ -2152,7 +2196,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
         if (this.showSubMenu) {
             var idx = this.navIdx.concat(this.cliIdx);
             var item = this.getItem(idx);
-            if (item[this.getField('children', idx.length - 1)] &&
+            if (item && item[this.getField('children', idx.length - 1)] &&
                 item[this.getField('children', idx.length - 1)].length) {
                 if (e.type === 'mouseover' || (Browser.isDevice && this.isMenu)) {
                     this.setLISelected(this.cli);
@@ -2200,6 +2244,13 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
         }
         return items;
     };
+    MenuBase.prototype.setItems = function (newItems, navIdx) {
+        var items = this.getItems(navIdx);
+        items.splice(0, items.length);
+        for (var i = 0; i < newItems.length; i++) {
+            items.splice(i, 0, newItems[i]);
+        }
+    };
     MenuBase.prototype.getIdx = function (ul, li, skipHdr) {
         if (skipHdr === void 0) { skipHdr = true; }
         var idx = Array.prototype.indexOf.call(ul.querySelectorAll('li'), li);
@@ -2310,8 +2361,8 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
                                 idx = navIdx.pop();
                                 item = this_1.getItems(navIdx);
                                 this_1.insertAfter([item[idx]], item[idx].text);
-                                item = this_1.getItems(navIdx);
                                 this_1.removeItem(item, navIdx, idx);
+                                this_1.setItems(item, navIdx);
                             }
                             navIdx.length = 0;
                         }
@@ -2375,6 +2426,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
                 }
             }
             if (!this.isMenu) {
+                EventHandler.remove(this.targetElement, 'scroll', this.scrollHandler);
                 for (var _i = 0, _a = getScrollableParent(this.targetElement); _i < _a.length; _i++) {
                     var parent_2 = _a[_i];
                     EventHandler.remove(parent_2, 'scroll', this.scrollHandler);
@@ -2547,8 +2599,28 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
         var idx;
         var navIdx;
         var disabled = DISABLED;
+        var skipItem;
         for (var i = 0; i < items.length; i++) {
             navIdx = this.getIndex(items[i], isUniqueId);
+            if (this.navIdx.length) {
+                if (navIdx.length !== 1) {
+                    skipItem = false;
+                    for (var i_1 = 0, len = navIdx.length - 1; i_1 < len; i_1++) {
+                        if (navIdx[i_1] !== this.navIdx[i_1]) {
+                            skipItem = true;
+                            break;
+                        }
+                    }
+                    if (skipItem) {
+                        continue;
+                    }
+                }
+            }
+            else {
+                if (navIdx.length !== 1) {
+                    continue;
+                }
+            }
             idx = navIdx.pop();
             ul = this.getUlByNavIdx(navIdx.length);
             if (ul) {
@@ -2820,25 +2892,25 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
  * Navigation Common modules
  */
 
-var __extends$3 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __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; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    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;
-};
+var __extends$3 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __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; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
 var CLS_VERTICAL = 'e-vertical';
 var CLS_ITEMS = 'e-toolbar-items';
 var CLS_ITEM = 'e-toolbar-item';
@@ -3355,7 +3427,8 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
         }
         if (!eventArgs.cancel) {
             this.trigger('clicked', eventArgs, function (clickedArgs) {
-                if (!isNullOrUndefined(_this.popObj) && isPopupElement && !clickedArgs.cancel && _this.overflowMode === 'Popup') {
+                if (!isNullOrUndefined(_this.popObj) && isPopupElement && !clickedArgs.cancel && _this.overflowMode === 'Popup' &&
+                    clickedArgs.item && clickedArgs.item.type !== 'Input') {
                     _this.popObj.hide({ name: 'FadeOut', duration: 100 });
                 }
             });
@@ -3541,8 +3614,7 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
                         this.removePositioning();
                     }
                     if (this.checkOverflow(ele, innerItems) || priorityCheck) {
-                        this.createPopupEle(ele, [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, ele)));
-                        this.element.querySelector('.' + CLS_TBARNAV).setAttribute('tabIndex', '0');
+                        this.setOverflowAttributes(ele);
                     }
                     this.toolbarAlign(innerItems);
                     break;
@@ -3565,13 +3637,17 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
                         if (this.tbarAlign) {
                             this.removePositioning();
                         }
-                        this.createPopupEle(ele, [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, ele)));
-                        this.element.querySelector('.' + CLS_TBARNAV).setAttribute('tabIndex', '0');
+                        this.setOverflowAttributes(ele);
                     }
                     this.toolbarAlign(innerItems);
             }
         }
     };
+    Toolbar.prototype.setOverflowAttributes = function (ele) {
+        this.createPopupEle(ele, [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, ele)));
+        this.element.querySelector('.' + CLS_TBARNAV).setAttribute('tabIndex', '0');
+        this.element.querySelector('.' + CLS_TBARNAV).setAttribute('role', 'list');
+    };
     Toolbar.prototype.separator = function () {
         var element = this.element;
         var eleItem = [].slice.call(element.querySelectorAll('.' + CLS_SEPARATOR));
@@ -3909,6 +3985,7 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
         var navItem = this.createElement('div', { className: CLS_POPUPDOWN + ' e-icons' });
         nav.appendChild(navItem);
         nav.setAttribute('tabindex', '0');
+        nav.setAttribute('role', 'list');
         element.appendChild(nav);
     };
     Toolbar.prototype.tbarPriRef = function (inEle, indx, sepPri, el, des, elWid, wid, ig) {
@@ -4547,6 +4624,7 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
                 case 'Button':
                     dom = this.buttonRendering(item, innerEle);
                     dom.setAttribute('tabindex', '-1');
+                    dom.setAttribute('aria-label', (item.text || item.tooltipText));
                     innerEle.appendChild(dom);
                     innerEle.addEventListener('click', this.itemClick.bind(this));
                     break;
@@ -4882,25 +4960,25 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
  * Toolbar modules
  */
 
-var __extends$4 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __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; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    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;
-};
+var __extends$4 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __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; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
 var CLS_ACRDN_ROOT = 'e-acrdn-root';
 var CLS_ROOT$2 = 'e-accordion';
 var CLS_ITEM$1 = 'e-acrdn-item';
@@ -5068,12 +5146,12 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
      * @private
      */
     Accordion.prototype.render = function () {
+        this.initializeheaderTemplate();
+        this.initializeItemTemplate();
         this.initialize();
         this.renderControl();
         this.wireEvents();
-        if (isBlazor()) {
-            this.renderComplete();
-        }
+        this.renderComplete();
     };
     Accordion.prototype.initialize = function () {
         var width = formatUnit(this.width);
@@ -5114,6 +5192,51 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
             });
         }
     };
+    Accordion.prototype.templateParser = function (template) {
+        if (template) {
+            try {
+                if (document.querySelectorAll(template).length) {
+                    return compile(document.querySelector(template).innerHTML.trim());
+                }
+            }
+            catch (error) {
+                return compile(template);
+            }
+        }
+        return undefined;
+    };
+    Accordion.prototype.initializeheaderTemplate = function () {
+        if (this.headerTemplate) {
+            this.headerTemplateFn = this.templateParser(this.headerTemplate);
+        }
+    };
+    Accordion.prototype.initializeItemTemplate = function () {
+        if (this.itemTemplate) {
+            this.itemTemplateFn = this.templateParser(this.itemTemplate);
+        }
+    };
+    Accordion.prototype.getheaderTemplate = function () {
+        return this.headerTemplateFn;
+    };
+    Accordion.prototype.getItemTemplate = function () {
+        return this.itemTemplateFn;
+    };
+    Accordion.prototype.updateContentBlazorTemplate = function (item, index) {
+        if (this.itemTemplate && isBlazor() && !this.isStringTemplate) {
+            updateBlazorTemplate(this.element.id + '_itemTemplate', 'ItemTemplate', this, false);
+        }
+        if (item && item.content && isBlazor() && !this.isStringTemplate && item.content.indexOf('<div>Blazor') === 0) {
+            updateBlazorTemplate(this.element.id + index + '_content', 'ContentTemplate', item);
+        }
+    };
+    Accordion.prototype.updateHeaderBlazorTemplate = function (item, index) {
+        if (this.headerTemplate && isBlazor() && !this.isStringTemplate) {
+            updateBlazorTemplate(this.element.id + '_headerTemplate', 'HeaderTemplate', this, false);
+        }
+        if (item && item.header && isBlazor() && !this.isStringTemplate && item.header.indexOf('<div>Blazor') === 0) {
+            updateBlazorTemplate(this.element.id + index + '_header', 'HeaderTemplate', item);
+        }
+    };
     Accordion.prototype.focusIn = function (e) {
         e.target.parentElement.classList.add(CLS_ITEMFOCUS);
     };
@@ -5131,13 +5254,15 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
             innerEles = this.element.children;
         }
         var items = [];
+        /* tslint:disable */
         [].slice.call(innerEles).forEach(function (el) {
             items.push({
-                header: (el.childElementCount > 0 && el.children[0]) ? (el.children[0]).innerHTML : '',
-                content: (el.childElementCount > 1 && el.children[1]) ? (el.children[1]).innerHTML : ''
+                header: (el.childElementCount > 0 && el.children[0]) ? (el.children[0]) : '',
+                content: (el.childElementCount > 1 && el.children[1]) ? (el.children[1]) : ''
             });
             el.parentNode.removeChild(el);
         });
+        /* tslint:enable */
         if (rootEle) {
             this.element.removeChild(rootEle);
         }
@@ -5167,32 +5292,43 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
         var _this = this;
         var ele = this.element;
         var innerItem;
+        var innerDataSourceItem;
         if (isNullOrUndefined(this.initExpand)) {
             this.initExpand = [];
         }
         if (!isNullOrUndefined(this.trgtEle)) {
             this.ctrlTemplate();
         }
-        var items = this.items;
-        if (ele && items.length > 0) {
-            items.forEach(function (item, index) {
-                innerItem = _this.renderInnerItem(item, index);
-                ele.appendChild(innerItem);
-                var blazorContain = Object.keys(window);
-                if (item.header && blazorContain.indexOf('Blazor') > -1 && !_this.isStringTemplate
-                    && item.header.indexOf('<div>Blazor') === 0) {
-                    updateBlazorTemplate(_this.element.id + index + '_header', 'HeaderTemplate', item);
-                }
-                if (innerItem.childElementCount > 0) {
-                    EventHandler.add(innerItem.querySelector('.' + CLS_HEADER), 'focus', _this.focusIn, _this);
-                    EventHandler.add(innerItem.querySelector('.' + CLS_HEADER), 'blur', _this.focusOut, _this);
+        if (this.dataSource.length > 0) {
+            this.dataSource.forEach(function (item, index) {
+                innerDataSourceItem = _this.renderInnerItem(item, index);
+                ele.appendChild(innerDataSourceItem);
+                if (innerDataSourceItem.childElementCount > 0) {
+                    EventHandler.add(innerDataSourceItem.querySelector('.' + CLS_HEADER), 'focus', _this.focusIn, _this);
+                    EventHandler.add(innerDataSourceItem.querySelector('.' + CLS_HEADER), 'blur', _this.focusOut, _this);
                 }
             });
+            this.updateHeaderBlazorTemplate();
+        }
+        else {
+            var items = this.items;
+            if (ele && items.length > 0) {
+                items.forEach(function (item, index) {
+                    innerItem = _this.renderInnerItem(item, index);
+                    ele.appendChild(innerItem);
+                    _this.updateHeaderBlazorTemplate(item, index);
+                    if (innerItem.childElementCount > 0) {
+                        EventHandler.add(innerItem.querySelector('.' + CLS_HEADER), 'focus', _this.focusIn, _this);
+                        EventHandler.add(innerItem.querySelector('.' + CLS_HEADER), 'blur', _this.focusOut, _this);
+                    }
+                });
+            }
         }
     };
     Accordion.prototype.clickHandler = function (e) {
         var _this = this;
         var trgt = e.target;
+        var items = this.getItems();
         var eventArgs = {};
         var index;
         var tglIcon;
@@ -5221,17 +5357,13 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
         var acrdActive = [];
         index = this.getIndexByItem(acrdnItem);
         if (acrdnCtnItem) {
-            eventArgs.item = this.items[this.getIndexByItem(acrdnCtnItem)];
+            eventArgs.item = items[this.getIndexByItem(acrdnCtnItem)];
         }
         eventArgs.originalEvent = e;
         var ctnCheck = !isNullOrUndefined(tglIcon) && acrdnItem.childElementCount <= 1;
         if (ctnCheck && (isNullOrUndefined(acrdnCtn) || !isNullOrUndefined(select('.' + CLS_HEADER + ' .' + CLS_TOOGLEICN, acrdnCtnItem)))) {
             acrdnItem.appendChild(this.contentRendering(index));
-            var blazorContain = Object.keys(window);
-            if (eventArgs.item.content && blazorContain.indexOf('Blazor') > -1 && !this.isStringTemplate
-                && eventArgs.item.content.indexOf('<div>Blazor') === 0) {
-                updateBlazorTemplate(this.element.id + index + '_content', 'ContentTemplate', eventArgs.item);
-            }
+            this.updateContentBlazorTemplate(eventArgs.item, index);
             this.ariaAttrUpdate(acrdnItem);
         }
         this.trigger('clicked', eventArgs);
@@ -5338,9 +5470,10 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
     };
     Accordion.prototype.headerEleGenerate = function () {
         var header = this.createElement('div', { className: CLS_HEADER, id: getUniqueID('acrdn_header') });
+        var items = this.getItems();
         var ariaAttr = {
-            'tabindex': '0', 'role': 'heading', 'aria-expanded': 'false', 'aria-selected': 'false',
-            'aria-disabled': 'false', 'aria-level': this.items.length.toString()
+            'tabindex': '0', 'role': 'heading', 'aria-selected': 'false',
+            'aria-disabled': 'false', 'aria-level': items.length.toString()
         };
         attributes(header, ariaAttr);
         return header;
@@ -5349,6 +5482,17 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
         var innerEle;
         innerEle = this.createElement('div', { className: CLS_ITEM$1 });
         innerEle.id = getUniqueID('acrdn_item');
+        attributes(innerEle, { 'aria-expanded': 'false' });
+        if (this.headerTemplate) {
+            var ctnEle = this.headerEleGenerate();
+            var hdrEle = this.createElement('div', { className: CLS_HEADERCTN });
+            ctnEle.appendChild(hdrEle);
+            append(this.getheaderTemplate()(item, this, 'headerTemplate', this.element.id + '_headerTemplate', false), hdrEle);
+            innerEle.appendChild(ctnEle);
+            ctnEle.appendChild(this.toggleIconGenerate());
+            this.add(innerEle, CLS_SLCT);
+            return innerEle;
+        }
         if (item.header && this.angularnativeCondiCheck(item, 'header')) {
             var ctnEle = this.headerEleGenerate();
             var hdrEle = this.createElement('div', { className: CLS_HEADERCTN });
@@ -5363,7 +5507,12 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
             }
         }
         if (item.cssClass) {
-            innerEle.classList.add(item.cssClass);
+            var acrdnClass = item.cssClass;
+            var arcdnClassList = [];
+            arcdnClassList = acrdnClass.split(' ');
+            arcdnClassList.forEach(function (el) {
+                addClass([innerEle], el);
+            });
         }
         if (item.iconCss) {
             var hdrIcnEle = this.createElement('div', { className: CLS_HEADERICN });
@@ -5410,7 +5559,6 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
         }
     };
     Accordion.prototype.fetchElement = function (ele, value, index, isHeader) {
-        var blazorContain = Object.keys(window);
         var templateFn;
         var temString;
         try {
@@ -5422,8 +5570,14 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
             }
         }
         catch (e) {
-            if (typeof (value) === 'string' && blazorContain.indexOf('Blazor') > -1 && value.indexOf('<div>Blazor') !== 0) {
+            if (typeof (value) === 'string' && isBlazor() && value.indexOf('<div>Blazor') !== 0) {
                 ele.innerHTML = value;
+                /* tslint:disable */
+            }
+            else if (!isNullOrUndefined(this.trgtEle) && (value instanceof (HTMLElement))) {
+                ele.appendChild(value);
+                ele.firstElementChild.style.display = '';
+                /* tslint:enable */
             }
             else {
                 templateFn = compile(value);
@@ -5463,18 +5617,25 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
         var content = select('.' + CLS_CONTENT, itemEle);
         header.setAttribute('aria-controls', content.id);
         content.setAttribute('aria-labelledby', header.id);
+        content.setAttribute('role', 'definition');
     };
     Accordion.prototype.contentRendering = function (index) {
-        var content = this.items[index].content;
         var itemcnt = this.createElement('div', { className: CLS_CONTENT + ' ' + CLS_CTNHIDE, id: getUniqueID('acrdn_panel') });
         attributes(itemcnt, { 'aria-hidden': 'true' });
         var ctn = this.createElement('div', { className: CLS_CTENT });
-        itemcnt.appendChild(this.fetchElement(ctn, content, index, false));
+        if (this.dataSource.length > 0) {
+            append(this.getItemTemplate()(this.dataSource[index], this, 'itemTemplate', this.element.id + '_itemTemplate', false), ctn);
+            itemcnt.appendChild(ctn);
+        }
+        else {
+            itemcnt.appendChild(this.fetchElement(ctn, this.items[index].content, index, false));
+        }
         return itemcnt;
     };
     Accordion.prototype.expand = function (trgt) {
         var _this = this;
         var eventArgs;
+        var items = this.getItems();
         var trgtItemEle = closest(trgt, '.' + CLS_ITEM$1);
         if (isNullOrUndefined(trgt) || (isVisible(trgt) && trgt.getAttribute('e-animate') !== 'true') || trgtItemEle.classList.contains(CLS_DISABLE$3)) {
             return;
@@ -5488,7 +5649,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
         };
         var icon = select('.' + CLS_TOOGLEICN, trgtItemEle).firstElementChild;
         eventArgs = { element: trgtItemEle,
-            item: this.items[this.getIndexByItem(trgtItemEle)],
+            item: items[this.getIndexByItem(trgtItemEle)],
             index: this.getIndexByItem(trgtItemEle),
             content: trgtItemEle.querySelector('.' + CLS_CONTENT),
             isExpanded: true };
@@ -5551,7 +5712,8 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
         if (progress === 'end') {
             this.add(trgtItemEle, CLS_ACTIVE);
             trgt.setAttribute('aria-hidden', 'false');
-            attributes(trgt.previousElementSibling, { 'aria-selected': 'true', 'aria-expanded': 'true' });
+            attributes(trgtItemEle, { 'aria-expanded': 'true' });
+            attributes(trgt.previousElementSibling, { 'aria-selected': 'true' });
             icon.classList.remove(CLS_TOGANIMATE);
             this.trigger('expanded', eventArgs);
         }
@@ -5583,6 +5745,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
     Accordion.prototype.collapse = function (trgt) {
         var _this = this;
         var eventArgs;
+        var items = this.getItems();
         var trgtItemEle = closest(trgt, '.' + CLS_ITEM$1);
         if (isNullOrUndefined(trgt) || !isVisible(trgt) || trgtItemEle.classList.contains(CLS_DISABLE$3)) {
             return;
@@ -5594,7 +5757,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
         };
         var icon = select('.' + CLS_TOOGLEICN, trgtItemEle).firstElementChild;
         eventArgs = { element: trgtItemEle,
-            item: this.items[this.getIndexByItem(trgtItemEle)],
+            item: items[this.getIndexByItem(trgtItemEle)],
             index: this.getIndexByItem(trgtItemEle),
             content: trgtItemEle.querySelector('.' + CLS_CONTENT),
             isExpanded: false };
@@ -5662,7 +5825,8 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
             icon.classList.remove(CLS_TOGANIMATE);
             this.remove(trgtItemEle, CLS_ACTIVE);
             trgt.setAttribute('aria-hidden', 'true');
-            attributes(trgt.previousElementSibling, { 'aria-selected': 'false', 'aria-expanded': 'false' });
+            attributes(trgtItemEle, { 'aria-expanded': 'false' });
+            attributes(trgt.previousElementSibling, { 'aria-selected': 'false' });
             this.trigger('expanded', eventArgs);
         }
     };
@@ -5675,15 +5839,26 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
         return 'accordion';
     };
     Accordion.prototype.itemAttribUpdate = function () {
+        var items = this.getItems();
         var itemEle = this.getItemElements();
-        var itemLen = this.items.length;
+        var itemLen = items.length;
         itemEle.forEach(function (ele) {
             select('.' + CLS_HEADER, ele).setAttribute('aria-level', '' + itemLen);
         });
     };
+    Accordion.prototype.getItems = function () {
+        var items;
+        if (this.itemTemplate && this.headerTemplate) {
+            items = this.dataSource;
+        }
+        else {
+            items = this.items;
+        }
+        return items;
+    };
     /**
      * Adds new item to the Accordion with the specified index of the Accordion.
-     * @param  {AccordionItemModel} item - Item array that is to be added to the Accordion.
+     * @param  {AccordionItemModel | Object} item - Item array that is to be added to the Accordion.
      * @param  {number} index - Number value that determines where the item should be added.
      * By default, item is added at the last index if the index is not specified.
      * @returns void
@@ -5691,11 +5866,12 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
     Accordion.prototype.addItem = function (item, index) {
         var ele = this.element;
         var itemEle = this.getItemElements();
+        var items = this.getItems();
         if (isNullOrUndefined(index)) {
-            index = this.items.length;
+            index = items.length;
         }
         if (ele.childElementCount >= index) {
-            this.items.splice(index, 0, item);
+            items.splice(index, 0, item);
             var innerItemEle = this.renderInnerItem(item, index);
             if (ele.childElementCount === index) {
                 ele.appendChild(innerItemEle);
@@ -5703,13 +5879,14 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
             else {
                 ele.insertBefore(innerItemEle, itemEle[index]);
             }
+            this.updateHeaderBlazorTemplate();
             EventHandler.add(innerItemEle.querySelector('.' + CLS_HEADER), 'focus', this.focusIn, this);
             EventHandler.add(innerItemEle.querySelector('.' + CLS_HEADER), 'blur', this.focusOut, this);
             this.itemAttribUpdate();
         }
         this.expandedItems = [];
         this.expandedItemRefresh(ele);
-        if (item.expanded) {
+        if (item && item.expanded) {
             this.expandItem(true, index);
         }
     };
@@ -5730,12 +5907,13 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
     Accordion.prototype.removeItem = function (index) {
         var itemEle = this.getItemElements();
         var ele = itemEle[index];
+        var items = this.getItems();
         if (isNullOrUndefined(ele)) {
             return;
         }
         this.restoreContent(index);
         detach(ele);
-        this.items.splice(index, 1);
+        items.splice(index, 1);
         this.itemAttribUpdate();
         this.expandedItems = [];
         this.expandedItemRefresh(this.element);
@@ -5846,17 +6024,14 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
     };
     Accordion.prototype.itemExpand = function (isExpand, ele, index) {
         var ctn = ele.children[1];
+        var items = this.getItems();
         if (ele.classList.contains(CLS_DISABLE$3)) {
             return;
         }
         if (isNullOrUndefined(ctn) && isExpand) {
             ctn = this.contentRendering(index);
             ele.appendChild(ctn);
-            var blazorContain = Object.keys(window);
-            var item = this.items[index];
-            if (item.content && blazorContain.indexOf('Blazor') > -1 && !this.isStringTemplate && item.content.indexOf('<div>Blazor') === 0) {
-                updateBlazorTemplate(this.element.id + index + '_content', 'ContentTemplate', item);
-            }
+            this.updateContentBlazorTemplate(items[index], index);
             this.ariaAttrUpdate(ele);
         }
         else if (isNullOrUndefined(ctn)) {
@@ -5886,8 +6061,9 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
     };
     Accordion.prototype.updateItem = function (item, index) {
         if (!isNullOrUndefined(item)) {
-            var itemObj = this.items[index];
-            this.items.splice(index, 1);
+            var items = this.getItems();
+            var itemObj = items[index];
+            items.splice(index, 1);
             this.restoreContent(index);
             detach(item);
             this.addItem(itemObj, index);
@@ -5906,6 +6082,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
      */
     Accordion.prototype.onPropertyChanged = function (newProp, oldProp) {
         var acrdn = this.element;
+        var isRefresh = false;
         for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
             var prop = _a[_i];
             switch (prop) {
@@ -5935,11 +6112,20 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
                         }
                     }
                     else {
-                        this.destroyItems();
-                        this.renderItems();
-                        this.initItemExpand();
+                        isRefresh = true;
                     }
                     break;
+                case 'dataSource':
+                    isRefresh = true;
+                    break;
+                case 'headerTemplate':
+                    this.initializeheaderTemplate();
+                    isRefresh = true;
+                    break;
+                case 'itemTemplate':
+                    this.initializeItemTemplate();
+                    isRefresh = true;
+                    break;
                 case 'enableRtl':
                     newProp.enableRtl ? this.add(acrdn, CLS_RTL$3) : this.remove(acrdn, CLS_RTL$3);
                     break;
@@ -5962,10 +6148,24 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
                     break;
             }
         }
+        if (isRefresh) {
+            this.destroyItems();
+            this.renderItems();
+            this.initItemExpand();
+        }
     };
     __decorate$4([
         Collection([], AccordionItem)
     ], Accordion.prototype, "items", void 0);
+    __decorate$4([
+        Property([])
+    ], Accordion.prototype, "dataSource", void 0);
+    __decorate$4([
+        Property()
+    ], Accordion.prototype, "itemTemplate", void 0);
+    __decorate$4([
+        Property()
+    ], Accordion.prototype, "headerTemplate", void 0);
     __decorate$4([
         Property('100%')
     ], Accordion.prototype, "width", void 0);
@@ -6003,25 +6203,25 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
  * Accordion all modules
  */
 
-var __extends$5 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __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; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    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;
-};
+var __extends$5 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __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; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
 /// <reference path='../common/menu-base-model.d.ts'/>
 /**
  * The ContextMenu is a graphical user interface that appears on the user right click/touch hold operation.
@@ -6125,25 +6325,25 @@ var ContextMenu = /** @__PURE__ @class */ (function (_super) {
  * ContextMenu modules
  */
 
-var __extends$6 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __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; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    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;
-};
+var __extends$6 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __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; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
 /// <reference path='../common/menu-base-model.d.ts'/>
 var VMENU = 'e-vertical';
 var SCROLLABLE = 'e-scrollable';
@@ -6387,27 +6587,28 @@ var Menu = /** @__PURE__ @class */ (function (_super) {
  * Menu modules
  */
 
-var __extends$7 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __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; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    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;
-};
+var __extends$7 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __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; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
 var CLS_TAB = 'e-tab';
 var CLS_HEADER$1 = 'e-tab-header';
+var CLS_BLA_TEM = 'blazor-template';
 var CLS_CONTENT$1 = 'e-content';
 var CLS_NEST$1 = 'e-nested';
 var CLS_ITEMS$1 = 'e-items';
@@ -6445,6 +6646,7 @@ var CLS_VERTICAL$1 = 'e-vertical';
 var CLS_VLEFT = 'e-vertical-left';
 var CLS_VRIGHT = 'e-vertical-right';
 var CLS_HBOTTOM = 'e-horizontal-bottom';
+var CLS_FILL = 'e-fill-mode';
 var TabActionSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$7(TabActionSettings, _super);
     function TabActionSettings() {
@@ -6625,6 +6827,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
      */
     Tab.prototype.render = function () {
         this.btnCls = this.createElement('span', { className: CLS_ICONS + ' ' + CLS_ICON_CLOSE, attrs: { title: this.title } });
+        this.tabId = this.element.id.length > 0 ? ('-' + this.element.id) : getRandomId();
         this.renderContainer();
         this.wireEvents();
         this.initRender = false;
@@ -6675,7 +6878,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         var _this = this;
         var hdrPlace = this.headerPlacement;
         var tabItems = [];
-        this.hdrEle = select('.' + CLS_HEADER$1, this.element);
+        this.hdrEle = this.getTabHeader();
         this.addVerticalClass();
         if (!this.isTemplate) {
             tabItems = this.parseObject(this.items, 0);
@@ -6693,12 +6896,13 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                 while (this.hdrEle.firstElementChild) {
                     detach(this.hdrEle.firstElementChild);
                 }
-                this.hdrEle.appendChild(this.createElement('div', { className: CLS_ITEMS$1 }));
+                var tabItems_1 = this.createElement('div', { className: CLS_ITEMS$1 });
+                this.hdrEle.appendChild(tabItems_1);
                 hdrItems.forEach(function (item, index) {
                     _this.lastIndex = index;
                     var attr = {
-                        className: CLS_ITEM$2, id: CLS_ITEM$2 + '_' + index,
-                        attrs: { role: 'tab', 'aria-controls': CLS_CONTENT$1 + '_' + index, 'aria-selected': 'false' }
+                        className: CLS_ITEM$2, id: CLS_ITEM$2 + _this.tabId + '_' + index,
+                        attrs: { role: 'tab', 'aria-controls': CLS_CONTENT$1 + _this.tabId + '_' + index, 'aria-selected': 'false' }
                     };
                     var txt = _this.createElement('span', {
                         className: CLS_TEXT, innerHTML: item, attrs: { 'role': 'presentation' }
@@ -6707,8 +6911,8 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                         className: CLS_TEXT_WRAP, innerHTML: txt + _this.btnCls.outerHTML
                     }).outerHTML;
                     var wrap = _this.createElement('div', { className: CLS_WRAP, innerHTML: cont, attrs: { tabIndex: '-1' } });
-                    select('.' + CLS_ITEMS$1, _this.element).appendChild(_this.createElement('div', attr));
-                    selectAll('.' + CLS_ITEM$2, _this.element)[index].appendChild(wrap);
+                    tabItems_1.appendChild(_this.createElement('div', attr));
+                    selectAll('.' + CLS_ITEM$2, tabItems_1)[index].appendChild(wrap);
                 });
             }
         }
@@ -6723,6 +6927,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         this.tbObj.isStringTemplate = true;
         this.tbObj.createElement = this.createElement;
         this.tbObj.appendTo(this.hdrEle);
+        attributes(this.hdrEle, { 'aria-label': 'tab-header' });
         for (var i = 0; i < this.items.length; i++) {
             var item = this.items[i];
             if (item.headerTemplate && isBlazor() && !this.isStringTemplate &&
@@ -6742,8 +6947,8 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             for (var i = 0; i < hdrItem.length; i++) {
                 if (contents.length - 1 >= i) {
                     contents.item(i).className += CLS_ITEM$2;
-                    attributes(contents.item(i), { 'role': 'tabpanel', 'aria-labelledby': CLS_ITEM$2 + '_' + i });
-                    contents.item(i).id = CLS_CONTENT$1 + '_' + i;
+                    attributes(contents.item(i), { 'role': 'tabpanel', 'aria-labelledby': CLS_ITEM$2 + this.tabId + '_' + i });
+                    contents.item(i).id = CLS_CONTENT$1 + this.tabId + '_' + i;
                 }
             }
         }
@@ -6809,13 +7014,13 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             var wrap = _this.createElement('div', { className: CLS_WRAP, attrs: wrapAttrs });
             wrap.appendChild(tCont);
             if (_this.itemIndexArray === []) {
-                _this.itemIndexArray.push(CLS_ITEM$2 + '_' + _this.lastIndex);
+                _this.itemIndexArray.push(CLS_ITEM$2 + _this.tabId + '_' + _this.lastIndex);
             }
             else {
-                _this.itemIndexArray.splice((index + i), 0, CLS_ITEM$2 + '_' + _this.lastIndex);
+                _this.itemIndexArray.splice((index + i), 0, CLS_ITEM$2 + _this.tabId + '_' + _this.lastIndex);
             }
             var attrObj = {
-                id: CLS_ITEM$2 + '_' + _this.lastIndex, role: 'tab', 'aria-selected': 'false'
+                id: CLS_ITEM$2 + _this.tabId + '_' + _this.lastIndex, role: 'tab', 'aria-selected': 'false'
             };
             var tItem = { htmlAttributes: attrObj, template: wrap };
             tItem.cssClass = item.cssClass + ' ' + disabled + ' ' + ((css !== '') ? 'e-i' + pos : '') + ' ' + ((!txtEmpty) ? CLS_ICON : '');
@@ -6833,14 +7038,11 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         (this.isIconAlone) ? this.element.classList.add(CLS_ICON_TAB) : this.element.classList.remove(CLS_ICON_TAB);
         return tItems;
     };
-    Tab.prototype.removeActiveClass = function (id) {
-        var hdrActEle = selectAll(':root .' + CLS_HEADER$1 + ' .' + CLS_TB_ITEM + '.' + CLS_ACTIVE$1, this.element)[0];
-        var selectEle = select('.' + CLS_HEADER$1, this.element);
-        if (this.headerPlacement === 'Bottom') {
-            hdrActEle = selectAll(':root .' + CLS_HEADER$1 + ' .' + CLS_TB_ITEM + '.' + CLS_ACTIVE$1, selectEle)[0];
-        }
-        if (!isNullOrUndefined(hdrActEle)) {
-            hdrActEle.classList.remove(CLS_ACTIVE$1);
+    Tab.prototype.removeActiveClass = function () {
+        var tabHeader = this.getTabHeader();
+        if (tabHeader) {
+            var tabItems = selectAll('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE$1, tabHeader);
+            [].slice.call(tabItems).forEach(function (node) { return node.classList.remove(CLS_ACTIVE$1); });
         }
     };
     Tab.prototype.checkPopupOverflow = function (ele) {
@@ -6899,8 +7101,10 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         var checkRTL = this.enableRtl || this.element.classList.contains(CLS_RTL$4);
         if (this.isPopup || prev <= current) {
             if (this.animation.previous.effect === 'SlideLeftIn') {
-                animation = { name: 'SlideLeftOut',
-                    duration: this.animation.previous.duration, timingFunction: this.animation.previous.easing };
+                animation = {
+                    name: 'SlideLeftOut',
+                    duration: this.animation.previous.duration, timingFunction: this.animation.previous.easing
+                };
             }
             else {
                 animation = null;
@@ -6908,8 +7112,10 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         }
         else {
             if (this.animation.next.effect === 'SlideRightIn') {
-                animation = { name: 'SlideRightOut',
-                    duration: this.animation.next.duration, timingFunction: this.animation.next.easing };
+                animation = {
+                    name: 'SlideRightOut',
+                    duration: this.animation.next.duration, timingFunction: this.animation.next.easing
+                };
             }
             else {
                 animation = null;
@@ -7021,11 +7227,24 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
+    Tab.prototype.getTabHeader = function () {
+        var headers = [].slice.call(this.element.children).filter(function (e) { return e.classList.contains(CLS_HEADER$1); });
+        if (headers.length > 0) {
+            return headers[0];
+        }
+        else {
+            var wrap = [].slice.call(this.element.children).filter(function (e) { return !e.classList.contains(CLS_BLA_TEM); })[0];
+            if (!wrap) {
+                return undefined;
+            }
+            return [].slice.call(wrap.children).filter(function (e) { return e.classList.contains(CLS_HEADER$1); })[0];
+        }
+    };
     Tab.prototype.getEleIndex = function (item) {
-        return Array.prototype.indexOf.call(selectAll('.' + CLS_HEADER$1 + ' .' + CLS_TB_ITEM, this.element), item);
+        return Array.prototype.indexOf.call(selectAll('.' + CLS_TB_ITEM, this.getTabHeader()), item);
     };
     Tab.prototype.extIndex = function (id) {
-        return id.replace(CLS_ITEM$2 + '_', '');
+        return id.replace(CLS_ITEM$2 + this.tabId + '_', '');
     };
     Tab.prototype.expTemplateContent = function () {
         var _this = this;
@@ -7110,10 +7329,10 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
     Tab.prototype.getTrgContent = function (cntEle, no) {
         var ele;
         if (this.element.classList.contains(CLS_NEST$1)) {
-            ele = select('.' + CLS_NEST$1 + '> .' + CLS_CONTENT$1 + ' > #' + CLS_CONTENT$1 + '_' + no, this.element);
+            ele = select('.' + CLS_NEST$1 + '> .' + CLS_CONTENT$1 + ' > #' + CLS_CONTENT$1 + this.tabId + '_' + no, this.element);
         }
         else {
-            ele = this.findEle(cntEle.children, CLS_CONTENT$1 + '_' + no);
+            ele = this.findEle(cntEle.children, CLS_CONTENT$1 + this.tabId + '_' + no);
         }
         return ele;
     };
@@ -7161,7 +7380,9 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         this.select(this.selectedItem);
     };
     Tab.prototype.setOrientation = function (place, ele) {
-        if (place === 'Bottom' && Array.prototype.indexOf.call(this.element.children, ele) !== 1) {
+        var headerPos = Array.prototype.indexOf.call(this.element.children, ele);
+        var contentPos = Array.prototype.indexOf.call(this.element.children, this.element.querySelector('.' + CLS_CONTENT$1));
+        if (place === 'Bottom' && (contentPos > headerPos)) {
             this.element.appendChild(ele);
         }
         else {
@@ -7183,10 +7404,13 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         }
     };
     Tab.prototype.setContentHeight = function (val) {
+        if (this.element.classList.contains(CLS_FILL)) {
+            removeClass([this.element], [CLS_FILL]);
+        }
         if (isNullOrUndefined(this.cntEle)) {
             return;
         }
-        var hdrEle = select('.' + CLS_HEADER$1, this.element);
+        var hdrEle = this.getTabHeader();
         if (this.heightAdjustMode === 'None') {
             if (this.height === 'auto') {
                 return;
@@ -7198,8 +7422,9 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             }
         }
         else if (this.heightAdjustMode === 'Fill') {
+            addClass([this.element], [CLS_FILL]);
             setStyleAttribute(this.element, { 'height': '100%' });
-            setStyleAttribute(this.cntEle, { 'height': 'auto' });
+            setStyleAttribute(this.cntEle, { 'height': '100%' });
         }
         else if (this.heightAdjustMode === 'Auto') {
             var cnt = selectAll('.' + CLS_CONTENT$1 + ' > .' + CLS_ITEM$2, this.element);
@@ -7215,8 +7440,8 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                 this.cntEle = select('.' + CLS_CONTENT$1, this.element);
                 if (val === true) {
                     this.cntEle.appendChild(this.createElement('div', {
-                        id: (CLS_CONTENT$1 + '_' + 0), className: CLS_ITEM$2 + ' ' + CLS_ACTIVE$1,
-                        attrs: { 'role': 'tabpanel', 'aria-labelledby': CLS_ITEM$2 + '_' + 0 }
+                        id: (CLS_CONTENT$1 + this.tabId + '_' + 0), className: CLS_ITEM$2 + ' ' + CLS_ACTIVE$1,
+                        attrs: { 'role': 'tabpanel', 'aria-labelledby': CLS_ITEM$2 + this.tabId + '_' + 0 }
                     }));
                 }
                 var ele = this.cntEle.children.item(0);
@@ -7244,18 +7469,10 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             parseFloat(cs.getPropertyValue('margin-top')) + parseFloat(cs.getPropertyValue('margin-bottom'));
     };
     Tab.prototype.setActiveBorder = function () {
-        var trg;
         var bar;
         var scrollCnt;
-        var trgHdrEle;
-        if (this.headerPlacement === 'Bottom') {
-            trgHdrEle = select('.' + CLS_HEADER$1, this.element);
-            trg = select('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE$1, trgHdrEle);
-        }
-        else {
-            trgHdrEle = select('.' + CLS_HEADER$1, this.element);
-            trg = select('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE$1, this.element);
-        }
+        var trgHdrEle = this.getTabHeader();
+        var trg = select('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE$1, trgHdrEle);
         if (trg === null) {
             return;
         }
@@ -7291,7 +7508,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         }
     };
     Tab.prototype.setActive = function (value) {
-        this.tbItem = selectAll('.' + CLS_HEADER$1 + ' .' + CLS_TB_ITEM, this.element);
+        this.tbItem = selectAll('.' + CLS_TB_ITEM, this.getTabHeader());
         var trg = this.tbItem[value];
         if (value >= 0) {
             this.setProperties({ selectedItem: value }, true);
@@ -7308,20 +7525,20 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             if (!isNullOrUndefined(prev)) {
                 prev.removeAttribute('aria-controls');
             }
-            attributes(trg, { 'aria-controls': CLS_CONTENT$1 + '_' + value });
+            attributes(trg, { 'aria-controls': CLS_CONTENT$1 + this.tabId + '_' + value });
         }
         var id = trg.id;
-        this.removeActiveClass(id);
+        this.removeActiveClass();
         trg.classList.add(CLS_ACTIVE$1);
         trg.setAttribute('aria-selected', 'true');
         var no = Number(this.extIndex(id));
         if (isNullOrUndefined(this.prevActiveEle)) {
-            this.prevActiveEle = CLS_CONTENT$1 + '_' + no;
+            this.prevActiveEle = CLS_CONTENT$1 + this.tabId + '_' + no;
         }
         attributes(this.element, { 'aria-activedescendant': id });
         if (this.isTemplate) {
             if (select('.' + CLS_CONTENT$1, this.element).children.length > 0) {
-                var trg_1 = this.findEle(select('.' + CLS_CONTENT$1, this.element).children, CLS_CONTENT$1 + '_' + no);
+                var trg_1 = this.findEle(select('.' + CLS_CONTENT$1, this.element).children, CLS_CONTENT$1 + this.tabId + '_' + no);
                 if (!isNullOrUndefined(trg_1)) {
                     trg_1.classList.add(CLS_ACTIVE$1);
                 }
@@ -7333,8 +7550,8 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             var item = this.getTrgContent(this.cntEle, this.extIndex(id));
             if (isNullOrUndefined(item)) {
                 this.cntEle.appendChild(this.createElement('div', {
-                    id: CLS_CONTENT$1 + '_' + this.extIndex(id), className: CLS_ITEM$2 + ' ' + CLS_ACTIVE$1,
-                    attrs: { role: 'tabpanel', 'aria-labelledby': CLS_ITEM$2 + '_' + this.extIndex(id) }
+                    id: CLS_CONTENT$1 + this.tabId + '_' + this.extIndex(id), className: CLS_ITEM$2 + ' ' + CLS_ACTIVE$1,
+                    attrs: { role: 'tabpanel', 'aria-labelledby': CLS_ITEM$2 + this.tabId + '_' + this.extIndex(id) }
                 }));
                 var eleTrg = this.getTrgContent(this.cntEle, this.extIndex(id));
                 var itemIndex = Array.prototype.indexOf.call(this.itemIndexArray, trg.id);
@@ -7356,7 +7573,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             previousIndex: this.prevIndex,
             selectedItem: trg,
             selectedIndex: value,
-            selectedContent: select('#' + CLS_CONTENT$1 + '_' + this.selectingID, this.content),
+            selectedContent: select('#' + CLS_CONTENT$1 + this.tabId + '_' + this.selectingID, this.content),
             isSwiped: this.isSwipeed
         };
         if (!this.initRender || this.selectedItem !== 0) {
@@ -7365,7 +7582,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
     };
     Tab.prototype.setItems = function (items) {
         this.isReplace = true;
-        this.tbItems = select('.' + CLS_HEADER$1 + ' .' + CLS_TB_ITEMS, this.element);
+        this.tbItems = select('.' + CLS_TB_ITEMS, this.getTabHeader());
         this.tbObj.items = this.parseObject(items, 0);
         this.tbObj.dataBind();
         this.isReplace = false;
@@ -7472,9 +7689,9 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         }
         this.element.classList.add(CLS_FOCUS);
         var trg = e.target;
-        var actEle = select('.' + CLS_HEADER$1 + ' .' + CLS_ACTIVE$1, this.element);
-        var tabItem = selectAll('.' + CLS_TB_ITEM + ':not(.' + CLS_TB_POPUP + ')', this.element);
-        this.popEle = select('.' + CLS_HEADER$1 + ' .' + CLS_TB_POP, this.element);
+        var tabHeader = this.getTabHeader();
+        var actEle = select('.' + CLS_ACTIVE$1, tabHeader);
+        this.popEle = select('.' + CLS_TB_POP, tabHeader);
         if (!isNullOrUndefined(this.popEle)) {
             this.popObj = this.popEle.ej2_instances[0];
         }
@@ -7572,8 +7789,8 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                 var property = Object.keys(newProp.items[index])[0];
                 var oldVal = Object(oldProp.items[index])[property];
                 var newVal = Object(newProp.items[index])[property];
-                var hdrItem = select('.' + CLS_TB_ITEMS + ' #' + CLS_ITEM$2 + '_' + index, this.element);
-                var cntItem = select('.' + CLS_CONTENT$1 + ' #' + CLS_CONTENT$1 + '_' + index, this.element);
+                var hdrItem = select('.' + CLS_TB_ITEMS + ' #' + CLS_ITEM$2 + this.tabId + '_' + index, this.element);
+                var cntItem = select('.' + CLS_CONTENT$1 + ' #' + CLS_CONTENT$1 + this.tabId + '_' + index, this.element);
                 if (property === 'header' || property === 'headerTemplate') {
                     var icon = (isNullOrUndefined(this.items[index].header) ||
                         isNullOrUndefined(this.items[index].header.iconCss)) ? '' : this.items[index].header.iconCss;
@@ -7633,6 +7850,10 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                 this.reRenderItems();
             }
             else {
+                var items = newProp.items;
+                for (var i = 0; i < items.length; i++) {
+                    this.resetBlazorTemplates(items[i], i);
+                }
                 this.setItems(newProp.items);
                 if (this.templateEle.length > 0) {
                     this.expTemplateContent();
@@ -7646,6 +7867,17 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
+    Tab.prototype.resetBlazorTemplates = function (item, index) {
+        if (!isBlazor()) {
+            return;
+        }
+        if (item.headerTemplate && !this.isStringTemplate && (item.headerTemplate).indexOf('<div>Blazor') === 0) {
+            resetBlazorTemplate(this.element.id + index + '_' + 'headerTemplate', 'HeaderTemplate');
+        }
+        if (item.content && !this.isStringTemplate && item.content.indexOf('<div>Blazor') === 0) {
+            resetBlazorTemplate(this.element.id + index + '_' + 'content', 'ContentTemplate');
+        }
+    };
     /**
      * Enables or disables the specified Tab item. On passing value as `false`, the item will be disabled.
      * @param  {number} index - Index value of target Tab item.
@@ -7720,7 +7952,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             if (!isNullOrUndefined(this.bdrLine)) {
                 this.bdrLine.classList.add(CLS_HIDDEN$1);
             }
-            this.tbItems = select('.' + CLS_HEADER$1 + ' .' + CLS_TB_ITEMS, this.element);
+            this.tbItems = select('.' + CLS_TB_ITEMS, this.getTabHeader());
             this.isAdd = true;
             var tabItems = this.parseObject(items, index);
             this.isAdd = false;
@@ -7736,7 +7968,8 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                 if (_this.isTemplate && !isNullOrUndefined(item.header) && !isNullOrUndefined(item.header.text)) {
                     var no = lastEleIndex + place;
                     var ele = _this.createElement('div', {
-                        id: CLS_CONTENT$1 + '_' + no, className: CLS_ITEM$2, attrs: { role: 'tabpanel', 'aria-labelledby': CLS_ITEM$2 + '_' + no }
+                        id: CLS_CONTENT$1 + _this.tabId + '_' + no, className: CLS_ITEM$2,
+                        attrs: { role: 'tabpanel', 'aria-labelledby': CLS_ITEM$2 + _this.tabId + '_' + no }
                     });
                     _this.cntEle.insertBefore(ele, _this.cntEle.children[(index + place)]);
                     var eleTrg = _this.getTrgContent(_this.cntEle, no.toString());
@@ -7769,11 +8002,12 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         var removeArgs = { removedItem: trg, removedIndex: index, cancel: false };
         this.trigger('removing', removeArgs, function (tabRemovingArgs) {
             if (!tabRemovingArgs.cancel) {
+                _this.resetBlazorTemplates(_this.items[index], index);
                 _this.tbObj.removeItems(index);
                 _this.items.splice(index, 1);
                 _this.itemIndexArray.splice(index, 1);
                 _this.refreshActiveBorder();
-                var cntTrg = select('#' + CLS_CONTENT$1 + '_' + _this.extIndex(trg.id), select('.' + CLS_CONTENT$1, _this.element));
+                var cntTrg = select('#' + CLS_CONTENT$1 + _this.tabId + '_' + _this.extIndex(trg.id), select('.' + CLS_CONTENT$1, _this.element));
                 if (!isNullOrUndefined(cntTrg)) {
                     detach(cntTrg);
                 }
@@ -7859,8 +8093,9 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
      */
     Tab.prototype.select = function (args) {
         var _this = this;
-        this.tbItems = select('.' + CLS_HEADER$1 + ' .' + CLS_TB_ITEMS, this.element);
-        this.tbItem = selectAll('.' + CLS_HEADER$1 + ' .' + CLS_TB_ITEM, this.element);
+        var tabHeader = this.getTabHeader();
+        this.tbItems = select('.' + CLS_TB_ITEMS, tabHeader);
+        this.tbItem = selectAll('.' + CLS_TB_ITEM, tabHeader);
         this.content = select('.' + CLS_CONTENT$1, this.element);
         this.prevItem = this.tbItem[this.prevIndex];
         if (isNullOrUndefined(this.selectedItem) || (this.selectedItem < 0) || (this.tbItem.length <= this.selectedItem) || isNaN(this.selectedItem)) {
@@ -7884,10 +8119,12 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             previousIndex: this.prevIndex,
             selectedItem: this.tbItem[this.selectedItem],
             selectedIndex: this.selectedItem,
-            selectedContent: !isNullOrUndefined(this.content) ? select('#' + CLS_CONTENT$1 + '_' + this.selectedID, this.content) : null,
+            selectedContent: !isNullOrUndefined(this.content) ?
+                select('#' + CLS_CONTENT$1 + this.tabId + '_' + this.selectedID, this.content) : null,
             selectingItem: trg,
             selectingIndex: args,
-            selectingContent: !isNullOrUndefined(this.content) ? select('#' + CLS_CONTENT$1 + '_' + this.selectingID, this.content) : null,
+            selectingContent: !isNullOrUndefined(this.content) ?
+                select('#' + CLS_CONTENT$1 + this.tabId + '_' + this.selectingID, this.content) : null,
             isSwiped: this.isSwipeed,
             cancel: false
         };
@@ -8087,25 +8324,25 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
  * Tab modules
  */
 
-var __extends$8 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __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; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    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;
-};
+var __extends$8 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __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; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
 var ROOT = 'e-treeview';
 var CONTROL = 'e-control';
 var COLLAPSIBLE = 'e-icon-collapsible';
@@ -8270,6 +8507,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         _this.disableNode = [];
         _this.parentNodeCheck = [];
         _this.expandChildren = [];
+        _this.isFieldChange = false;
         _this.mouseDownStatus = false;
         return _this;
     }
@@ -8646,13 +8884,13 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         var childCheckedElement;
         for (var i = 0; i < indeterminate.length; i++) {
             var node = closest(indeterminate[i], '.' + LISTITEM);
-            var parentData = this.getTreeData(node);
-            var id = parentData[0][this.fields.id].toString();
+            var nodeId = node.getAttribute('data-uid').toString();
             if (this.dataType === 1) {
-                childCheckedElement = this.getChildNodes(this.treeData, id);
+                childCheckedElement = new DataManager(this.treeData).
+                    executeLocal(new Query().where(this.fields.parentID, 'equal', nodeId, true));
             }
             else {
-                childCheckedElement = getValue(this.fields.child.toString(), parentData[0]);
+                childCheckedElement = this.getChildNodes(this.treeData, nodeId);
             }
             var count = 0;
             if (childCheckedElement) {
@@ -9318,7 +9556,8 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         var eUids = this.expandedNodes;
         if (this.isInitalExpand && eUids.length > 0) {
             this.setProperties({ expandedNodes: [] }, true);
-            if (this.fields.dataSource instanceof DataManager) {
+            // tslint:disable
+            if (this.fields.dataSource instanceof DataManager && (this.fields.dataSource.adaptorName !== 'BlazorAdaptor')) {
                 this.expandGivenNodes(eUids);
             }
             else {
@@ -9374,11 +9613,13 @@ var TreeView = /** @__PURE__ @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) {
+            var eventArgs = { data: this.treeData };
+            this.trigger('dataBound', eventArgs);
+        }
+        this.isLoaded = true;
     };
     TreeView.prototype.doSelectionAction = function () {
         var sNodes = selectAll('.' + SELECTED$1, this.element);
@@ -9543,7 +9784,12 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         removeClass([liEle], NODECOLLAPSED);
         var id = liEle.getAttribute('data-uid');
         if (!isNullOrUndefined(id) && this.expandedNodes.indexOf(id) === -1) {
-            this.expandedNodes.push(id);
+            if (this.isBlazorPlatform) {
+                this.setProperties({ expandedNodes: [].concat([], this.expandedNodes, [id]) }, true);
+            }
+            else {
+                this.expandedNodes.push(id);
+            }
         }
     };
     TreeView.prototype.collapseNode = function (currLi, icon, e) {
@@ -9628,7 +9874,14 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         }
         var index = this.expandedNodes.indexOf(liEle.getAttribute('data-uid'));
         if (index > -1) {
-            this.expandedNodes.splice(index, 1);
+            if (this.isBlazorPlatform) {
+                var removeVal = this.expandedNodes.slice(0);
+                removeVal.splice(index, 1);
+                this.setProperties({ expandedNodes: [].concat([], removeVal) }, true);
+            }
+            else {
+                this.expandedNodes.splice(index, 1);
+            }
         }
     };
     TreeView.prototype.disableExpandAttr = function (liEle) {
@@ -9678,6 +9931,9 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
                 mapper_2.dataSource.executeQuery(this.getQuery(mapper_2, parentLi.getAttribute('data-uid'))).then(function (e) {
                     _this.treeList.pop();
                     childItems = e.result;
+                    if (_this.dataType === 1) {
+                        _this.dataType = 2;
+                    }
                     _this.loadChild(childItems, mapper_2, eicon, parentLi, expandChild, callback, loaded);
                     if (_this.nodeTemplate && _this.isBlazorPlatform && !_this.isStringTemplate) {
                         _this.updateBlazorTemplate();
@@ -10618,6 +10874,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         }
         this.setTouchClass();
         this.setProperties({ selectedNodes: [], checkedNodes: [], expandedNodes: [] }, true);
+        this.checkedElement = [];
         this.isLoaded = false;
         this.setDataBinding();
     };
@@ -10697,14 +10954,14 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
             newText = observedArgs.cancel ? observedArgs.oldText : observedArgs.newText;
             var newData = setValue(_this.editFields.text, newText, _this.editData);
             if (!isNullOrUndefined(_this.nodeTemplateFn)) {
-                txtEle.innerHTML = '';
+                txtEle.innerText = '';
                 var tempArr = _this.nodeTemplateFn(newData, undefined, undefined, _this.element.id + 'nodeTemplate', _this.isStringTemplate);
                 tempArr = Array.prototype.slice.call(tempArr);
                 append(tempArr, txtEle);
                 _this.updateBlazorTemplate();
             }
             else {
-                txtEle.innerHTML = newText;
+                txtEle.innerText = newText;
             }
             if (isInput) {
                 removeClass([liEle], EDITING);
@@ -10848,24 +11105,27 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
                 }
                 var eventArgs = _this.getDragEvent(e.event, _this, null, e.target, null, virtualEle, level);
                 if (eventArgs.draggedNode.classList.contains(EDITING)) {
+                    _this.dragObj.intDestroy(e.event);
                     _this.dragCancelAction(virtualEle);
                 }
                 else {
                     _this.trigger('nodeDragStart', eventArgs, function (observedArgs) {
                         if (observedArgs.cancel) {
+                            _this.dragObj.intDestroy(e.event);
                             _this.dragCancelAction(virtualEle);
                         }
                         else {
                             _this.dragStartAction = true;
                         }
+                        if (isBlazor()) {
+                            e.bindEvents(getElement(e.dragElement));
+                        }
                     });
                 }
             },
             drag: function (e) {
-                if ((_this.isBlazorPlatform && _this.dragStartAction) || !_this.isBlazorPlatform) {
-                    _this.dragObj.setProperties({ cursorAt: { top: (!isNullOrUndefined(e.event.targetTouches) || Browser.isDevice) ? 60 : -20 } });
-                    _this.dragAction(e, virtualEle);
-                }
+                _this.dragObj.setProperties({ cursorAt: { top: (!isNullOrUndefined(e.event.targetTouches) || Browser.isDevice) ? 60 : -20 } });
+                _this.dragAction(e, virtualEle);
             },
             dragStop: function (e) {
                 removeClass([_this.element], DRAGGING);
@@ -10931,15 +11191,18 @@ var TreeView = /** @__PURE__ @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)) {
+                if ((dropLi && e && (!expand && !collapse) && (e.event.offsetY < 7) && !checkWrapper) || (((expand && e.event.offsetY < 5) || (collapse && e.event.offsetX < 3)))) {
                     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))) {
+                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)))) {
                     addClass([icon], DROPNEXT);
                     var virEle = this.createElement('div', { className: SIBLING });
                     var index = this.fullRowSelect ? (2) : (1);
@@ -11038,7 +11301,10 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         this.triggerEvent();
     };
     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);
             }
@@ -11047,10 +11313,16 @@ var TreeView = /** @__PURE__ @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);
@@ -11063,7 +11335,21 @@ var TreeView = /** @__PURE__ @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);
@@ -11075,15 +11361,15 @@ var TreeView = /** @__PURE__ @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)) {
+        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) {
             dropParentUl.insertBefore(dragLi, dropLi.nextElementSibling);
             this.moveData(dragLi, dropLi, dropParentUl, false, dragObj);
         }
@@ -11985,6 +12271,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
      * @returns void
      * @private
      */
+    // tslint:disable-next-line:max-func-body-length
     TreeView.prototype.onPropertyChanged = function (newProp, oldProp) {
         for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
             var prop = _a[_i];
@@ -12026,10 +12313,14 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
                     break;
                 case 'expandedNodes':
                     this.isAnimate = false;
-                    this.setProperties({ expandedNodes: [] }, true);
+                    if (!this.isBlazorPlatform) {
+                        this.setProperties({ expandedNodes: [] }, true);
+                    }
                     this.collapseAll();
                     this.isInitalExpand = true;
-                    this.setProperties({ expandedNodes: isNullOrUndefined(newProp.expandedNodes) ? [] : newProp.expandedNodes }, true);
+                    if (!this.isBlazorPlatform) {
+                        this.setProperties({ expandedNodes: isNullOrUndefined(newProp.expandedNodes) ? [] : newProp.expandedNodes }, true);
+                    }
                     this.doExpandAction();
                     this.isInitalExpand = false;
                     this.isAnimate = true;
@@ -12043,11 +12334,13 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
                     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);
@@ -12096,7 +12389,9 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         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);
     };
     /**
@@ -12114,7 +12409,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         nodes = JSON.parse(JSON.stringify(nodes));
         var dropLi = this.getElement(target);
         this.preventExpand = preventTargetExpand;
-        if (this.fields.dataSource instanceof DataManager) {
+        if (this.fields.dataSource instanceof DataManager && (this.fields.dataSource.adaptorName !== 'BlazorAdaptor')) {
             var dropUl_1;
             var icon = dropLi ? dropLi.querySelector('.' + ICON) : null;
             var proxy_5 = this;
@@ -12151,7 +12446,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         if (this.showCheckBox && dropLi) {
             this.ensureParentCheckState(dropLi);
         }
-        if (this.fields.dataSource instanceof DataManager === false) {
+        if ((this.fields.dataSource instanceof DataManager === false) || (this.fields.dataSource instanceof DataManager) && (this.fields.dataSource.adaptorName === 'BlazorAdaptor')) {
             this.preventExpand = false;
             this.triggerEvent();
         }
@@ -12258,50 +12553,12 @@ var TreeView = /** @__PURE__ @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.getTreeData()[i][this.fields.isChecked] === true
-                    && this.checkedElement.indexOf(this.getTreeData()[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.getTreeData(), this.getTreeData()[i][id].toString());
-                (childNode !== null && this.autoCheck) ? 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;
     };
     /**
      * Get 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.
+     * @BlazorType NodeData
      */
     TreeView.prototype.getNode = function (node) {
         var ele = this.getElement(node);
@@ -12529,25 +12786,25 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
  * TreeView modules
  */
 
-var __extends$9 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __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; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    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;
-};
+var __extends$9 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __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; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
 var CONTROL$1 = 'e-control';
 var ROOT$1 = 'e-sidebar';
 var DOCKER = 'e-dock';
@@ -13217,5 +13474,5 @@ var Sidebar = /** @__PURE__ @class */ (function (_super) {
  * Navigation all modules
  */
 
-export { MenuAnimationSettings, HScroll, VScroll, Item, Toolbar, AccordionActionSettings, AccordionAnimationSettings, AccordionItem, Accordion, ContextMenu, Menu, TabActionSettings, TabAnimationSettings, Header, TabItem, Tab, FieldsSettings, ActionSettings, NodeAnimationSettings, TreeView, Sidebar };
+export { MenuAnimationSettings, MenuItem, HScroll, VScroll, Item, Toolbar, AccordionActionSettings, AccordionAnimationSettings, AccordionItem, Accordion, ContextMenu, Menu, TabActionSettings, TabAnimationSettings, Header, TabItem, Tab, FieldsSettings, ActionSettings, NodeAnimationSettings, TreeView, Sidebar };
 //# sourceMappingURL=ej2-navigations.es5.js.map