@syncfusion/ej2-lists 19.2.49 → 19.3.44

package/src/list-view/list-view.js

@@ -17,7 +17,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { merge, formatUnit, isNullOrUndefined, append, detach, isBlazor, extend } from '@syncfusion/ej2-base';
+import { merge, formatUnit, isNullOrUndefined, append, detach, extend } from '@syncfusion/ej2-base';
 import { attributes, addClass, removeClass, prepend, closest, remove } from '@syncfusion/ej2-base';
 import { Component, EventHandler, Property, Complex, Event } from '@syncfusion/ej2-base';
 import { NotifyPropertyChanges, ChildProperty } from '@syncfusion/ej2-base';
@@ -26,7 +26,6 @@ import { Animation, rippleEffect, Touch } from '@syncfusion/ej2-base';
 import { DataManager, Query } from '@syncfusion/ej2-data';
 import { createCheckBox } from '@syncfusion/ej2-buttons';
 import { ListBase, getFieldValues } from '../common/list-base';
-import { updateBlazorTemplate, resetBlazorTemplate, blazorTemplates } from '@syncfusion/ej2-base';
 // Effect Configuration Effect[] =  [fromViewBackward,fromViewForward,toViewBackward,toviewForward];
 var effectsConfig = {
     'None': [],
@@ -153,7 +152,6 @@ var ListView = /** @class */ (function (_super) {
      */
     function ListView(options, element) {
         var _this = _super.call(this, options, element) || this;
-        _this.itemReRender = false;
         _this.previousSelectedItems = [];
         _this.hiddenItems = [];
         _this.enabledItems = [];
@@ -191,14 +189,9 @@ var ListView = /** @class */ (function (_super) {
                     // eslint-disable-next-line
                     this.listBaseOption.fields = this.fields.properties;
                     if (this.enableVirtualization) {
-                        if (!(this.isServerRendered && isBlazor())) {
-                            this.virtualizationModule.reRenderUiVirtualization();
-                        }
+                        this.virtualizationModule.reRenderUiVirtualization();
                     }
                     else {
-                        if (isBlazor() && this.isServerRendered && !this.enableVirtualization) {
-                            this.itemReRender = true;
-                        }
                         this.reRender();
                     }
                     break;
@@ -209,14 +202,9 @@ var ListView = /** @class */ (function (_super) {
                     break;
                 case 'query':
                     if (this.enableVirtualization) {
-                        if (!(isBlazor() && this.isServerRendered)) {
-                            this.virtualizationModule.reRenderUiVirtualization();
-                        }
+                        this.virtualizationModule.reRenderUiVirtualization();
                     }
                     else {
-                        if (isBlazor() && this.isServerRendered && !this.enableVirtualization) {
-                            this.itemReRender = true;
-                        }
                         this.reRender();
                     }
                     break;
@@ -231,50 +219,35 @@ var ListView = /** @class */ (function (_super) {
                     break;
                 case 'showCheckBox':
                 case 'checkBoxPosition':
-                    if (!isBlazor() || !this.isServerRendered) {
-                        if (this.enableVirtualization) {
-                            this.virtualizationModule.reRenderUiVirtualization();
-                        }
-                        else {
-                            this.setCheckbox();
-                        }
+                    if (this.enableVirtualization) {
+                        this.virtualizationModule.reRenderUiVirtualization();
+                    }
+                    else {
+                        this.setCheckbox();
                     }
                     break;
                 case 'dataSource':
                     if (this.enableVirtualization) {
-                        if (!(this.isServerRendered && isBlazor())) {
-                            this.virtualizationModule.reRenderUiVirtualization();
-                        }
+                        this.virtualizationModule.reRenderUiVirtualization();
                     }
                     else {
-                        if (isBlazor() && this.isServerRendered && !this.enableVirtualization) {
-                            this.itemReRender = true;
-                        }
                         this.reRender();
                     }
                     break;
                 case 'sortOrder':
                 case 'template':
                     if (!this.enableVirtualization) {
-                        if (!(this.isServerRendered && isBlazor())) {
-                            this.refresh();
-                        }
+                        this.refresh();
                     }
                     break;
                 case 'showIcon':
-                    if (isBlazor() && this.isServerRendered) {
-                        // eslint-disable-next-line
-                        this.interopAdaptor.invokeMethodAsync('ItemSorting');
+                    if (this.enableVirtualization) {
+                        this.virtualizationModule.reRenderUiVirtualization();
                     }
                     else {
-                        if (this.enableVirtualization) {
-                            this.virtualizationModule.reRenderUiVirtualization();
-                        }
-                        else {
-                            this.listBaseOption.showIcon = this.showIcon;
-                            this.curViewDS = this.getSubDS();
-                            this.resetCurrentList();
-                        }
+                        this.listBaseOption.showIcon = this.showIcon;
+                        this.curViewDS = this.getSubDS();
+                        this.resetCurrentList();
                     }
                     break;
                 default:
@@ -322,76 +295,68 @@ var ListView = /** @class */ (function (_super) {
     };
     // Support Component Functions
     ListView.prototype.header = function (text, showBack, prop) {
-        if (isBlazor() && this.isServerRendered) {
-            var args = { HeaderText: text, BackButton: showBack };
-            // eslint-disable-next-line
-            this.interopAdaptor.invokeMethodAsync('HeaderTitle', args);
+        if (this.headerEle === undefined && this.showHeader) {
+            if (this.enableHtmlSanitizer) {
+                this.setProperties({ headerTitle: SanitizeHtmlHelper.sanitize(this.headerTitle) }, true);
+            }
+            this.headerEle = this.createElement('div', { className: classNames.header });
+            var innerHeaderEle = this.createElement('span', { className: classNames.headerText, innerHTML: this.headerTitle });
+            var textEle = this.createElement('div', { className: classNames.text, innerHTML: innerHeaderEle.outerHTML });
+            var hedBackButton = this.createElement('div', {
+                className: classNames.icon + ' ' + classNames.backIcon + ' e-but-back',
+                attrs: { style: 'display:none;' }
+            });
+            this.headerEle.appendChild(hedBackButton);
+            this.headerEle.appendChild(textEle);
+            if (this.headerTemplate) {
+                // eslint-disable-next-line
+                var compiledString = compile(this.headerTemplate);
+                var headerTemplateEle = this.createElement('div', { className: classNames.headerTemplateText });
+                // eslint-disable-next-line
+                var compiledElement = compiledString({}, this, prop, this.LISTVIEW_HEADERTEMPLATE_ID, null, null, this.headerEle);
+                if (compiledElement) {
+                    append(compiledElement, headerTemplateEle);
+                }
+                append([headerTemplateEle], this.headerEle);
+                // eslint-disable-next-line
+                if (this.isReact) {
+                    this.renderReactTemplates();
+                }
+            }
+            if (this.headerTemplate && this.headerTitle) {
+                textEle.classList.add('header');
+            }
+            this.element.classList.add('e-has-header');
+            prepend([this.headerEle], this.element);
         }
-        else {
-            if (this.headerEle === undefined && this.showHeader) {
+        else if (this.headerEle) {
+            if (this.showHeader) {
+                this.headerEle.style.display = '';
+                var textEle = this.headerEle.querySelector('.' + classNames.headerText);
+                var hedBackButton = this.headerEle.querySelector('.' + classNames.backIcon);
                 if (this.enableHtmlSanitizer) {
-                    this.setProperties({ headerTitle: SanitizeHtmlHelper.sanitize(this.headerTitle) }, true);
+                    text = SanitizeHtmlHelper.sanitize(text);
                 }
-                this.headerEle = this.createElement('div', { className: classNames.header });
-                var innerHeaderEle = this.createElement('span', { className: classNames.headerText, innerHTML: this.headerTitle });
-                var textEle = this.createElement('div', { className: classNames.text, innerHTML: innerHeaderEle.outerHTML });
-                var hedBackButton = this.createElement('div', {
-                    className: classNames.icon + ' ' + classNames.backIcon + ' e-but-back',
-                    attrs: { style: 'display:none;' }
-                });
-                this.headerEle.appendChild(hedBackButton);
-                this.headerEle.appendChild(textEle);
-                if (this.headerTemplate) {
-                    // eslint-disable-next-line
-                    var compiledString = compile(this.headerTemplate);
-                    var headerTemplateEle = this.createElement('div', { className: classNames.headerTemplateText });
-                    // eslint-disable-next-line
-                    var compiledElement = compiledString({}, this, prop, this.LISTVIEW_HEADERTEMPLATE_ID, null, null, this.headerEle);
-                    if (compiledElement) {
-                        append(compiledElement, headerTemplateEle);
-                    }
-                    append([headerTemplateEle], this.headerEle);
-                    this.updateBlazorTemplates(false, true, true);
-                    // eslint-disable-next-line
-                    if (this.isReact) {
-                        this.renderReactTemplates();
-                    }
+                textEle.innerHTML = text;
+                if (this.headerTemplate && showBack) {
+                    textEle.parentElement.classList.remove('header');
+                    this.headerEle.querySelector('.' + classNames.headerTemplateText).classList.add('nested-header');
                 }
-                if (this.headerTemplate && this.headerTitle) {
-                    textEle.classList.add('header');
+                if (this.headerTemplate && !showBack) {
+                    textEle.parentElement.classList.add('header');
+                    this.headerEle.querySelector('.' + classNames.headerTemplateText).classList.remove('nested-header');
+                    this.headerEle.querySelector('.' + classNames.headerTemplateText).classList.add('header');
                 }
-                this.element.classList.add('e-has-header');
-                prepend([this.headerEle], this.element);
-            }
-            else if (this.headerEle) {
-                if (this.showHeader) {
-                    this.headerEle.style.display = '';
-                    var textEle = this.headerEle.querySelector('.' + classNames.headerText);
-                    var hedBackButton = this.headerEle.querySelector('.' + classNames.backIcon);
-                    if (this.enableHtmlSanitizer) {
-                        text = SanitizeHtmlHelper.sanitize(text);
-                    }
-                    textEle.innerHTML = text;
-                    if (this.headerTemplate && showBack) {
-                        textEle.parentElement.classList.remove('header');
-                        this.headerEle.querySelector('.' + classNames.headerTemplateText).classList.add('nested-header');
-                    }
-                    if (this.headerTemplate && !showBack) {
-                        textEle.parentElement.classList.add('header');
-                        this.headerEle.querySelector('.' + classNames.headerTemplateText).classList.remove('nested-header');
-                        this.headerEle.querySelector('.' + classNames.headerTemplateText).classList.add('header');
-                    }
-                    if (showBack === true) {
-                        hedBackButton.style.display = '';
-                    }
-                    else {
-                        hedBackButton.style.display = 'none';
-                    }
+                if (showBack === true) {
+                    hedBackButton.style.display = '';
                 }
                 else {
-                    this.headerEle.style.display = 'none';
+                    hedBackButton.style.display = 'none';
                 }
             }
+            else {
+                this.headerEle.style.display = 'none';
+            }
         }
     };
     // Animation Related Functions
@@ -442,7 +407,7 @@ var ListView = /** @class */ (function (_super) {
         if (this.template) {
             try {
                 if (document.querySelectorAll(this.template).length) {
-                    this.template = document.querySelector(this.template).innerHTML.trim();
+                    this.setProperties({ template: document.querySelector(this.template).innerHTML.trim() }, true);
                 }
             }
             catch (e) {
@@ -465,39 +430,10 @@ var ListView = /** @class */ (function (_super) {
             templateID: "" + this.element.id + LISTVIEW_TEMPLATE_PROPERTY,
             groupTemplateID: "" + this.element.id + LISTVIEW_GROUPTEMPLATE_PROPERTY,
             enableHtmlSanitizer: this.enableHtmlSanitizer,
-            removeBlazorID: true
         };
         this.initialization();
     };
-    ListView.prototype.updateLiElementHeight = function () {
-        var liContainer = this.element.querySelector('.' + classNames.virtualElementContainer);
-        if (liContainer.children[0]) {
-            this.liElementHeight = liContainer.children[0].getBoundingClientRect().height;
-            // eslint-disable-next-line
-            this.interopAdaptor.invokeMethodAsync('LiElementHeight', this.liElementHeight);
-        }
-    };
     ListView.prototype.initialization = function () {
-        if (isBlazor() && this.isServerRendered && this.enableVirtualization) {
-            var ulContainer = this.element.querySelector('.' + classNames.virtualElementContainer);
-            if (ulContainer !== null) {
-                if (this.height === '') {
-                    // eslint-disable-next-line
-                    this.interopAdaptor.invokeMethodAsync('SetComponentHeight', window.innerHeight);
-                    this.isWindow = true;
-                    ulContainer.scrollIntoView();
-                }
-                if (this.height.toString().indexOf('%') !== -1) {
-                    // eslint-disable-next-line
-                    this.interopAdaptor.invokeMethodAsync('SetContainerHeight', this.element.getBoundingClientRect().height.toString());
-                }
-                if (ulContainer.children[0]) {
-                    this.liElementHeight = ulContainer.children[0].getBoundingClientRect().height;
-                    // eslint-disable-next-line
-                    this.interopAdaptor.invokeMethodAsync('LiElementHeight', this.liElementHeight);
-                }
-            }
-        }
         this.curDSLevel = [];
         this.animateOptions = {};
         this.curViewDS = [];
@@ -747,38 +683,6 @@ var ListView = /** @class */ (function (_super) {
                 }
             }
         }
-        if (isBlazor() && this.isServerRendered && this.enableVirtualization) {
-            var ulElementContainer = this.element.querySelector('.' + classNames.virtualElementContainer);
-            if (ulElementContainer.querySelector('.e-active')) {
-                // eslint-disable-next-line
-                var selectedElements = ulElementContainer.querySelectorAll('.e-active');
-                if (this.showCheckBox) {
-                    for (var i = 0; i < selectedElements.length; i++) {
-                        // eslint-disable-next-line
-                        if (!this.previousSelectedItems.includes(selectedElements[i].getAttribute('data-uid'))) {
-                            this.previousSelectedItems.push(selectedElements[i].getAttribute('data-uid'));
-                        }
-                    }
-                }
-                else {
-                    this.previousSelectedItems[0] = (ulElementContainer.querySelector('.e-active').getAttribute('data-uid'));
-                }
-            }
-            if (ulElementContainer.querySelector('.e-focused')) {
-                // eslint-disable-next-line
-                var focusElement = ulElementContainer.querySelector('.e-focused');
-                if (!focusElement.classList.contains('e-active')) {
-                    var focusElementId = focusElement.getAttribute('data-uid');
-                    // eslint-disable-next-line
-                    if (this.previousSelectedItems.includes(focusElementId)) {
-                        var selectedElement1 = this.previousSelectedItems.slice(0, this.previousSelectedItems.indexOf(focusElementId));
-                        var selectedElement2 = this.previousSelectedItems.
-                            slice(this.previousSelectedItems.indexOf(focusElementId) + 1, this.previousSelectedItems.length);
-                        this.previousSelectedItems = selectedElement1.concat(selectedElement2);
-                    }
-                }
-            }
-        }
     };
     ListView.prototype.removeElement = function (element) {
         return element && element.parentNode && element.parentNode.removeChild(element);
@@ -1271,14 +1175,14 @@ var ListView = /** @class */ (function (_super) {
         if (dataSource === void 0) { dataSource = this.localData; }
         if (dataSource && this.fields.groupBy) {
             if (this.sortOrder !== 'None') {
-                this.curViewDS = ListBase.groupDataSource(ListBase.getDataSource(dataSource, ListBase.addSorting(this.sortOrder, this.fields.sortBy)), this.listBaseOption.fields, this.sortOrder);
+                this.curViewDS = ListBase.groupDataSource(ListBase.getDataSource(dataSource, ListBase.addSorting(this.sortOrder, (isNullOrUndefined(this.fields.sortBy)) ? this.fields.text : this.fields.sortBy)), this.listBaseOption.fields, this.sortOrder);
             }
             else {
                 this.curViewDS = ListBase.groupDataSource(dataSource, this.listBaseOption.fields, this.sortOrder);
             }
         }
         else if (dataSource && this.sortOrder !== 'None') {
-            this.curViewDS = ListBase.getDataSource(dataSource, ListBase.addSorting(this.sortOrder, this.fields.sortBy));
+            this.curViewDS = ListBase.getDataSource(dataSource, ListBase.addSorting(this.sortOrder, (isNullOrUndefined(this.fields.sortBy)) ? this.fields.text : this.fields.sortBy));
         }
         else {
             this.curViewDS = dataSource;
@@ -1287,28 +1191,45 @@ var ListView = /** @class */ (function (_super) {
     ListView.prototype.isInAnimation = function () {
         return this.curUL.classList.contains('.e-animate');
     };
+    ListView.prototype.renderRemoteLists = function (e, listViewComponent) {
+        if (this.isDestroyed) {
+            return;
+        }
+        this.localData = e.result;
+        listViewComponent.removeElement(listViewComponent.contentContainer);
+        this.renderList();
+        this.trigger('actionComplete', e);
+    };
+    ListView.prototype.triggerActionFailure = function (e) {
+        if (this.isDestroyed) {
+            return;
+        }
+        this.trigger('actionFailure', e);
+    };
     ListView.prototype.setLocalData = function () {
         var _this = this;
         this.trigger('actionBegin');
         // eslint-disable-next-line
         var listViewComponent = this;
         if (this.dataSource instanceof DataManager) {
-            this.dataSource.executeQuery(this.getQuery()).then(function (e) {
-                if (_this.isDestroyed) {
-                    return;
-                }
-                _this.localData = e.result;
-                if (!_this.isServerRendered || (!isBlazor())) {
-                    listViewComponent.removeElement(listViewComponent.contentContainer);
-                }
-                _this.renderList();
-                _this.trigger('actionComplete', e);
-            }).catch(function (e) {
-                if (_this.isDestroyed) {
-                    return;
-                }
-                _this.trigger('actionFailure', e);
-            });
+            if (this.dataSource.ready) {
+                this.dataSource.ready.then(function (e) {
+                    /* eslint-disable */
+                    _this.isOffline = _this.dataSource.dataSource.offline;
+                    if (_this.dataSource instanceof DataManager && _this.isOffline) {
+                        _this.renderRemoteLists(e, listViewComponent);
+                    }
+                }).catch(function (e) {
+                    _this.triggerActionFailure(e);
+                });
+            }
+            else {
+                this.dataSource.executeQuery(this.getQuery()).then(function (e) {
+                    _this.renderRemoteLists(e, listViewComponent);
+                }).catch(function (e) {
+                    _this.triggerActionFailure(e);
+                });
+            }
         }
         else if (!this.dataSource || !this.dataSource.length) {
             var ul = this.element.querySelector('ul');
@@ -1327,25 +1248,21 @@ var ListView = /** @class */ (function (_super) {
         }
     };
     ListView.prototype.reRender = function () {
-        if (!isBlazor() || !this.isServerRendered || this.enableVirtualization) {
-            this.resetBlazorTemplates();
-            this.removeElement(this.headerEle);
-            this.removeElement(this.ulElement);
-            this.removeElement(this.contentContainer);
-            // eslint-disable-next-line
-            if (this.isReact) {
-                this.clearTemplate();
-            }
-            if (Object.keys(window).indexOf('ejsInterop') === -1) {
-                this.element.innerHTML = '';
-            }
-            this.headerEle = this.ulElement = this.liCollection = undefined;
-            this.header();
+        this.removeElement(this.headerEle);
+        this.removeElement(this.ulElement);
+        this.removeElement(this.contentContainer);
+        // eslint-disable-next-line
+        if (this.isReact) {
+            this.clearTemplate();
+        }
+        if (Object.keys(window).indexOf('ejsInterop') === -1) {
+            this.element.innerHTML = '';
         }
+        this.headerEle = this.ulElement = this.liCollection = undefined;
+        this.header();
         this.setLocalData();
     };
     ListView.prototype.resetCurrentList = function () {
-        this.resetBlazorTemplates();
         this.setViewDataSource(this.curViewDS);
         this.contentContainer.innerHTML = '';
         this.createList();
@@ -1367,36 +1284,6 @@ var ListView = /** @class */ (function (_super) {
         this.ulElement = this.curUL = ListBase.createList(this.createElement, this.curViewDS, this.listBaseOption, null, this);
         this.liCollection = this.curUL.querySelectorAll('.' + classNames.listItem);
         this.setAttributes(this.liCollection);
-        this.updateBlazorTemplates(true);
-    };
-    ListView.prototype.resetBlazorTemplates = function () {
-        // eslint-disable-next-line
-        var templateCollection = blazorTemplates;
-        if (this.template) {
-            templateCollection[this.LISTVIEW_TEMPLATE_ID] = [];
-            resetBlazorTemplate(this.LISTVIEW_TEMPLATE_ID, LISTVIEW_TEMPLATE_PROPERTY);
-        }
-        if (this.groupTemplate) {
-            templateCollection[this.LISTVIEW_GROUPTEMPLATE_ID] = [];
-            resetBlazorTemplate(this.LISTVIEW_GROUPTEMPLATE_ID, LISTVIEW_GROUPTEMPLATE_PROPERTY);
-        }
-        if (this.headerTemplate) {
-            resetBlazorTemplate(this.LISTVIEW_HEADERTEMPLATE_ID, LISTVIEW_HEADERTEMPLATE_PROPERTY);
-        }
-    };
-    ListView.prototype.updateBlazorTemplates = function (template, headerTemplate, resetExistingElements) {
-        if (template === void 0) { template = false; }
-        if (headerTemplate === void 0) { headerTemplate = false; }
-        if (resetExistingElements === void 0) { resetExistingElements = false; }
-        if (this.template && template && !this.enableVirtualization) {
-            updateBlazorTemplate(this.LISTVIEW_TEMPLATE_ID, LISTVIEW_TEMPLATE_PROPERTY, this, resetExistingElements);
-        }
-        if (this.groupTemplate && template && !this.enableVirtualization) {
-            updateBlazorTemplate(this.LISTVIEW_GROUPTEMPLATE_ID, LISTVIEW_GROUPTEMPLATE_PROPERTY, this, resetExistingElements);
-        }
-        if (this.headerTemplate && headerTemplate) {
-            updateBlazorTemplate(this.LISTVIEW_HEADERTEMPLATE_ID, LISTVIEW_HEADERTEMPLATE_PROPERTY, this, resetExistingElements);
-        }
     };
     ListView.prototype.exceptionEvent = function (e) {
         this.trigger('actionFailure', e);
@@ -1408,97 +1295,6 @@ var ListView = /** @class */ (function (_super) {
             this.liCollection = this.curUL.querySelectorAll('.' + classNames.listItem);
         }
     };
-    ListView.prototype.removeActiveClass = function () {
-        // eslint-disable-next-line
-        var listViewComponent = this;
-        setTimeout(function () {
-            var ulContainer = listViewComponent.element.querySelector('.' + classNames.virtualElementContainer);
-            for (var i = 0; i < ulContainer.childElementCount; i++) {
-                var selectedElement = ulContainer.children[i];
-                var elementIndex = void 0;
-                var hiddenElementIndex = void 0;
-                if (listViewComponent.showCheckBox) {
-                    if (listViewComponent.previousSelectedItems.length > 0) {
-                        for (var j = 0; j < listViewComponent.previousSelectedItems.length; j++) {
-                            if (selectedElement.getAttribute('data-uid') === listViewComponent.previousSelectedItems[j]) {
-                                selectedElement.classList.add('e-active');
-                                selectedElement.setAttribute('aria-selected', 'true');
-                                if (selectedElement.querySelector('.e-frame.e-icons')) {
-                                    selectedElement.querySelector('.e-frame.e-icons').classList.add('e-check');
-                                }
-                                elementIndex = i;
-                            }
-                            else {
-                                if (elementIndex !== i) {
-                                    selectedElement.classList.remove('e-active');
-                                    selectedElement.removeAttribute('aria-selected');
-                                    if (selectedElement.querySelector('.e-check')) {
-                                        selectedElement.querySelector('.e-check').classList.remove('e-check');
-                                    }
-                                }
-                            }
-                        }
-                    }
-                    else {
-                        selectedElement.classList.remove('e-active');
-                        selectedElement.removeAttribute('aria-selected');
-                        if (selectedElement.querySelector('.e-check')) {
-                            selectedElement.querySelector('.e-check').classList.remove('e-check');
-                        }
-                    }
-                }
-                else {
-                    if (selectedElement.getAttribute('data-uid') === listViewComponent.previousSelectedItems[0]) {
-                        selectedElement.classList.add('e-active');
-                        selectedElement.setAttribute('aria-selected', 'true');
-                    }
-                    else {
-                        selectedElement.classList.remove('e-active');
-                        selectedElement.removeAttribute('aria-selected');
-                    }
-                }
-                if (listViewComponent.hiddenItems.length > 0) {
-                    for (var k = 0; k < listViewComponent.hiddenItems.length; k++) {
-                        if (selectedElement.getAttribute('data-uid') === listViewComponent.previousSelectedItems[k]) {
-                            selectedElement.style.display = 'none';
-                            hiddenElementIndex = i;
-                        }
-                        else {
-                            if (hiddenElementIndex !== i) {
-                                selectedElement.style.display = null;
-                            }
-                        }
-                    }
-                }
-                if (listViewComponent.enabledItems.length > 0) {
-                    for (var x = 0; x < listViewComponent.enabledItems.length; x++) {
-                        if (selectedElement.getAttribute('data-uid') === listViewComponent.enabledItems[x]) {
-                            if (selectedElement.classList.contains('e-disabled')) {
-                                selectedElement.classList.remove('e-disabled');
-                            }
-                        }
-                    }
-                }
-                if (listViewComponent.disabledItems.length > 0) {
-                    for (var y = 0; y < listViewComponent.disabledItems.length; y++) {
-                        if (selectedElement.getAttribute('data-uid') === listViewComponent.disabledItems[y]) {
-                            if (!selectedElement.classList.contains('e-disabled')) {
-                                selectedElement.classList.add('e-disabled');
-                            }
-                        }
-                    }
-                }
-            }
-        }, 200);
-    };
-    ListView.prototype.renderingNestedList = function () {
-        var ul = closest(this.liElement.parentNode, '.' + classNames.parentItem);
-        var ctrlId = this.element.id;
-        var ulElement = document.getElementById(ctrlId);
-        var currentListItem = ulElement.getElementsByTagName('UL')[ulElement.getElementsByTagName('UL').length - 1];
-        this.switchView(ul, currentListItem);
-        this.liElement = null;
-    };
     ListView.prototype.renderSubList = function (li) {
         this.liElement = li;
         var uID = li.getAttribute('data-uid');
@@ -1509,27 +1305,18 @@ var ListView = /** @class */ (function (_super) {
             this.setViewDataSource(this.getSubDS());
             if (!ele) {
                 var data = this.curViewDS;
-                if (isBlazor() && this.isServerRendered) {
-                    // eslint-disable-next-line
-                    this.interopAdaptor.invokeMethodAsync('ListChildDataSource', data);
-                }
-                else {
-                    ele = ListBase.createListFromJson(this.createElement, data, this.listBaseOption, this.curDSLevel.length, null, this);
-                    // eslint-disable-next-line
-                    if (this.isReact) {
-                        this.renderReactTemplates();
-                    }
-                    var lists = ele.querySelectorAll('.' + classNames.listItem);
-                    this.setAttributes(lists);
-                    ele.setAttribute('pID', uID);
-                    ele.style.display = 'none';
-                    this.renderIntoDom(ele);
-                    this.updateBlazorTemplates(true);
+                ele = ListBase.createListFromJson(this.createElement, data, this.listBaseOption, this.curDSLevel.length, null, this);
+                // eslint-disable-next-line
+                if (this.isReact) {
+                    this.renderReactTemplates();
                 }
+                var lists = ele.querySelectorAll('.' + classNames.listItem);
+                this.setAttributes(lists);
+                ele.setAttribute('pID', uID);
+                ele.style.display = 'none';
+                this.renderIntoDom(ele);
             }
-            if (!isBlazor() || !this.isServerRendered || this.enableVirtualization) {
-                this.switchView(ul, ele);
-            }
+            this.switchView(ul, ele);
             this.liCollection = this.curUL.querySelectorAll('.' + classNames.listItem);
             if (this.selectedItems) {
                 var fieldData = getFieldValues(this.selectedItems.data, this.listBaseOption.fields);
@@ -1544,38 +1331,34 @@ var ListView = /** @class */ (function (_super) {
     };
     ListView.prototype.renderList = function (data) {
         this.setViewDataSource(data);
-        if (!isBlazor() || !this.isServerRendered || this.enableVirtualization) {
-            if (this.enableVirtualization) {
-                if (Object.keys(this.dataSource).length) {
-                    if (!(isBlazor() && this.isServerRendered)) {
-                        if ((this.template || this.groupTemplate) && !this.virtualizationModule.isNgTemplate()) {
-                            if (this.isReact) {
-                                if (typeof this.template == "string") {
-                                    this.listBaseOption.template = null;
-                                }
-                                if (typeof this.groupTemplate == "string") {
-                                    this.listBaseOption.groupTemplate = null;
-                                }
-                            }
-                            else {
-                                this.listBaseOption.template = null;
-                                this.listBaseOption.groupTemplate = null;
-                            }
-                            this.listBaseOption.itemCreated = this.virtualizationModule.createUIItem.bind(this.virtualizationModule);
+        if (this.enableVirtualization) {
+            if (Object.keys(this.dataSource).length) {
+                if ((this.template || this.groupTemplate) && !this.virtualizationModule.isNgTemplate()) {
+                    if (this.isReact) {
+                        if (typeof this.template == "string") {
+                            this.listBaseOption.template = null;
+                        }
+                        if (typeof this.groupTemplate == "string") {
+                            this.listBaseOption.groupTemplate = null;
                         }
                     }
+                    else {
+                        this.listBaseOption.template = null;
+                        this.listBaseOption.groupTemplate = null;
+                    }
+                    this.listBaseOption.itemCreated = this.virtualizationModule.createUIItem.bind(this.virtualizationModule);
                 }
-                this.virtualizationModule.uiVirtualization();
             }
-            else {
-                this.createList();
-                this.contentContainer = this.createElement('div', { className: classNames.content });
-                this.element.appendChild(this.contentContainer);
-                this.renderIntoDom(this.ulElement);
-                // eslint-disable-next-line
-                if (this.isReact) {
-                    this.renderReactTemplates();
-                }
+            this.virtualizationModule.uiVirtualization();
+        }
+        else {
+            this.createList();
+            this.contentContainer = this.createElement('div', { className: classNames.content });
+            this.element.appendChild(this.contentContainer);
+            this.renderIntoDom(this.ulElement);
+            // eslint-disable-next-line
+            if (this.isReact) {
+                this.renderReactTemplates();
             }
         }
     };
@@ -1594,42 +1377,25 @@ var ListView = /** @class */ (function (_super) {
      * Initializes the ListView component rendering.
      */
     ListView.prototype.render = function () {
-        if (!isBlazor() || !this.isServerRendered) {
-            this.element.classList.add(classNames.root);
-            attributes(this.element, { role: 'list', tabindex: '0' });
-            this.setCSSClass();
-            this.setEnableRTL();
-            this.setEnable();
-            this.setSize();
-            this.wireEvents();
-            this.header();
-            this.setLocalData();
-            this.setHTMLAttribute();
-        }
-        else {
-            this.initBlazor(true);
-        }
+        this.element.classList.add(classNames.root);
+        attributes(this.element, { role: 'list', tabindex: '0' });
+        this.setCSSClass();
+        this.setEnableRTL();
+        this.setEnable();
+        this.setSize();
+        this.wireEvents();
+        this.header();
+        this.setLocalData();
+        this.setHTMLAttribute();
         this.rippleFn = rippleEffect(this.element, {
             selector: '.' + classNames.listItem
         });
         this.renderComplete();
     };
-    ListView.prototype.initBlazor = function (firstRender) {
-        if (firstRender === null) {
-            firstRender = false;
-        }
-        this.setLocalData();
-        this.setViewDataSource(this.localData);
-        this.contentContainer = this.element.querySelector('.' + classNames.content);
-        if (firstRender) {
-            this.wireEvents();
-        }
-    };
     /**
      * It is used to destroy the ListView component.
      */
     ListView.prototype.destroy = function () {
-        this.resetBlazorTemplates();
         // eslint-disable-next-line
         if (this.isReact) {
             this.clearTemplate();
@@ -1641,13 +1407,8 @@ var ListView = /** @class */ (function (_super) {
         this.element.removeAttribute('role');
         this.element.removeAttribute('tabindex');
         this.curUL = this.ulElement = this.liCollection = this.headerEle = undefined;
-        if (!(isBlazor() && this.isServerRendered)) {
-            this.element.innerHTML = '';
-            _super.prototype.destroy.call(this);
-        }
-        else {
-            this.element.style.display = 'none';
-        }
+        this.element.innerHTML = '';
+        _super.prototype.destroy.call(this);
     };
     /**
      * Switches back from the navigated sub list item.
@@ -1667,12 +1428,7 @@ var ListView = /** @class */ (function (_super) {
             toUL = this.curUL;
         }
         else {
-            if (isBlazor() && this.isServerRendered && this.enableVirtualization) {
-                toUL = toUL.parentElement.parentElement.parentElement;
-            }
-            else {
-                toUL = toUL.parentElement;
-            }
+            toUL = toUL.parentElement;
         }
         var fieldData = getFieldValues(this.curDSJSON, this.listBaseOption.fields);
         // eslint-disable-next-line
@@ -1790,7 +1546,6 @@ var ListView = /** @class */ (function (_super) {
     /**
      * Gets the details of the currently selected item from the list items.
      *
-     * @blazorType ListSelectedItem<TValue>
      */
     ListView.prototype.getSelectedItems = function () {
         // eslint-disable-next-line
@@ -1878,55 +1633,12 @@ var ListView = /** @class */ (function (_super) {
                 }
             }
         }
-        if (isBlazor()) {
-            // eslint-disable-next-line
-            return this.blazorGetSelectedItems(finalValue);
-        }
-        else {
-            return finalValue;
-        }
-    };
-    // eslint-disable-next-line
-    ListView.prototype.blazorGetSelectedItems = function (finalGetSelectedItem) {
-        var blazorSelectedItem = {
-            data: [],
-            index: [],
-            parentId: [],
-            text: []
-        };
-        if (!isNullOrUndefined(finalGetSelectedItem)) {
-            if (!isNullOrUndefined(finalGetSelectedItem.data)) {
-                if (this.showCheckBox && this.isNestedList) {
-                    for (var i = 0; i < finalGetSelectedItem.data.length; i++) {
-                        blazorSelectedItem.data.push(finalGetSelectedItem.data[i].data);
-                    }
-                    if (!isNullOrUndefined(finalGetSelectedItem.data[0])
-                        && !isNullOrUndefined(finalGetSelectedItem.data[0].parentId)) {
-                        blazorSelectedItem.parentId = finalGetSelectedItem.data[0].parentId;
-                    }
-                }
-                else {
-                    blazorSelectedItem.data = this.convertItemsToArray(finalGetSelectedItem.data);
-                }
-            }
-            if (!isNullOrUndefined(finalGetSelectedItem.text)) {
-                blazorSelectedItem.text = this.convertItemsToArray(finalGetSelectedItem.text);
-            }
-            if (!isNullOrUndefined(finalGetSelectedItem.index)) {
-                blazorSelectedItem.index = this.convertItemsToArray(finalGetSelectedItem.index);
-            }
-        }
-        return blazorSelectedItem;
-    };
-    // eslint-disable-next-line
-    ListView.prototype.convertItemsToArray = function (items) {
-        return Array.isArray(items) ? items.slice() : [items];
+        return finalValue;
     };
     /**
      * Finds out an item details from the current list.
      *
      * @param  {Fields | HTMLElement | Element} item - We can pass element Object or Fields as Object with ID and Text fields.
-     * @blazorType TValue
      */
     ListView.prototype.findItem = function (item) {
         return this.getItemData(item);
@@ -2023,7 +1735,6 @@ var ListView = /** @class */ (function (_super) {
      *
      * @param  {Fields} fields - Target item to add the given data as its children (can be null).
      *
-     * @blazorType data|object,fields|object
      */
     ListView.prototype.addItem = function (data, fields) {
         if (fields === void 0) { fields = undefined; }
@@ -2066,9 +1777,6 @@ var ListView = /** @class */ (function (_super) {
                             this.reRender();
                         }
                     }
-                    if (this.curUL) {
-                        this.updateBlazorTemplates(true);
-                    }
                     this.liCollection = this.curUL.querySelectorAll('.' + classNames.listItem);
                 }
                 else {
@@ -2112,9 +1820,6 @@ var ListView = /** @class */ (function (_super) {
             }
             isRefreshTemplateNeeded = true;
         }
-        if (isRefreshTemplateNeeded) {
-            this.updateBlazorTemplates(true);
-        }
     };
     ListView.prototype.addItemIntoDom = function (currentItem, targetUL, curViewDS) {
         var index = curViewDS.indexOf(currentItem);
@@ -2155,7 +1860,6 @@ var ListView = /** @class */ (function (_super) {
         }
         else {
             this.removeItemFromList(item, listDataSource);
-            this.updateBlazorTemplates(true);
         }
     };
     ListView.prototype.removeItemFromList = function (obj, listDataSource) {
@@ -2233,7 +1937,6 @@ var ListView = /** @class */ (function (_super) {
             for (var i = 0; i < item.length; i++) {
                 this.removeItem(item[i]);
             }
-            this.updateBlazorTemplates(true);
         }
     };
     // eslint-disable-next-line