@syncfusion/ej2-lists 19.2.49 → 19.3.44

package/dist/es6/ej2-lists.es2015.js

@@ -1,4 +1,4 @@
-import { Animation, Base, ChildProperty, Complex, Component, Draggable, Event, EventHandler, NotifyPropertyChanges, Property, SanitizeHtmlHelper, Touch, addClass, append, attributes, blazorTemplates, closest, compareElementParent, compile, debounce, detach, extend, formatUnit, getComponent, getUniqueID, getValue, isBlazor, isNullOrUndefined, isVisible, merge, prepend, remove, removeClass, resetBlazorTemplate, rippleEffect, updateBlazorTemplate } from '@syncfusion/ej2-base';
+import { Animation, Base, ChildProperty, Complex, Component, Draggable, Event, EventHandler, NotifyPropertyChanges, Property, SanitizeHtmlHelper, Touch, addClass, append, attributes, closest, compareElementParent, compile, detach, extend, formatUnit, getComponent, getUniqueID, getValue, isBlazor, isNullOrUndefined, isVisible, merge, prepend, remove, removeClass, rippleEffect } from '@syncfusion/ej2-base';
 import { DataManager, Query } from '@syncfusion/ej2-data';
 import { createCheckBox } from '@syncfusion/ej2-buttons';
 
@@ -52,7 +52,8 @@ var ListBase;
         urlAttributes: 'urlAttributes',
         imageAttributes: 'imageAttributes',
         imageUrl: 'imageUrl',
-        groupBy: null
+        groupBy: null,
+        sortBy: null
     };
     const defaultAriaAttributes = {
         level: 1,
@@ -584,7 +585,7 @@ var ListBase;
         const curOpt = extend({}, defaultListBaseOptions, options);
         const curFields = extend({}, ListBase.defaultMappedFields, fields);
         // eslint-disable-next-line
-        const compiledString = compile(template);
+        const compiledString = compileTemplate(template);
         const liCollection = [];
         let value;
         const id = generateId(); // generate id for drop-down-list option.
@@ -681,7 +682,7 @@ var ListBase;
     // eslint-disable-next-line
     headerItems, options, componentInstance) {
         // eslint-disable-next-line @typescript-eslint/ban-types
-        const compiledString = compile(groupTemplate);
+        const compiledString = compileTemplate(groupTemplate);
         const curFields = extend({}, ListBase.defaultMappedFields, fields);
         const curOpt = extend({}, defaultListBaseOptions, options);
         const category = curFields.groupBy;
@@ -865,16 +866,9 @@ var ListBase;
         else {
             li.setAttribute('data-uid', generateId());
         }
-        const blazId = 'BlazId';
-        if (options && !!options.removeBlazorID
-            && typeof item === 'object'
-            // eslint-disable-next-line no-prototype-builtins
-            && item.hasOwnProperty(blazId)) {
-            delete item[blazId];
-        }
         if (grpLI && options && options.groupTemplate) {
             // eslint-disable-next-line @typescript-eslint/ban-types
-            const compiledString = compile(options.groupTemplate);
+            const compiledString = compileTemplate(options.groupTemplate);
             // eslint-disable-next-line
             const compiledElement = compiledString(item, componentInstance, 'groupTemplate', curOpt.groupTemplateID, !!curOpt.isStringTemplate, null, li);
             if (compiledElement) {
@@ -883,7 +877,7 @@ var ListBase;
         }
         else if (!grpLI && options && options.template) {
             // eslint-disable-next-line @typescript-eslint/ban-types
-            const compiledString = compile(options.template);
+            const compiledString = compileTemplate(options.template);
             // eslint-disable-next-line
             const compiledElement = compiledString(item, componentInstance, 'template', curOpt.templateID, !!curOpt.isStringTemplate, null, li);
             if (compiledElement) {
@@ -984,6 +978,19 @@ function getFieldValues(dataItem, fields) {
     }
     return fieldData;
 }
+function compileTemplate(template) {
+    if (template) {
+        try {
+            if (document.querySelector(template)) {
+                return compile(document.querySelector(template).innerHTML.trim());
+            }
+        }
+        catch (e) {
+            return compile(template);
+        }
+    }
+    return undefined;
+}
 
 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;
@@ -1110,7 +1117,6 @@ let ListView = class ListView extends Component {
      */
     constructor(options, element) {
         super(options, element);
-        this.itemReRender = false;
         this.previousSelectedItems = [];
         this.hiddenItems = [];
         this.enabledItems = [];
@@ -1146,14 +1152,9 @@ let ListView = class ListView extends Component {
                     // 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;
@@ -1164,14 +1165,9 @@ let ListView = class ListView extends Component {
                     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;
@@ -1186,50 +1182,35 @@ let ListView = class ListView extends Component {
                     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:
@@ -1277,76 +1258,68 @@ let ListView = class ListView extends Component {
     }
     // Support Component Functions
     header(text, showBack, prop) {
-        if (isBlazor() && this.isServerRendered) {
-            const 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 });
+            const innerHeaderEle = this.createElement('span', { className: classNames.headerText, innerHTML: this.headerTitle });
+            const textEle = this.createElement('div', { className: classNames.text, innerHTML: innerHeaderEle.outerHTML });
+            const 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
+                const compiledString = compile(this.headerTemplate);
+                const headerTemplateEle = this.createElement('div', { className: classNames.headerTemplateText });
+                // eslint-disable-next-line
+                const 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 = '';
+                const textEle = this.headerEle.querySelector('.' + classNames.headerText);
+                const hedBackButton = this.headerEle.querySelector('.' + classNames.backIcon);
                 if (this.enableHtmlSanitizer) {
-                    this.setProperties({ headerTitle: SanitizeHtmlHelper.sanitize(this.headerTitle) }, true);
-                }
-                this.headerEle = this.createElement('div', { className: classNames.header });
-                const innerHeaderEle = this.createElement('span', { className: classNames.headerText, innerHTML: this.headerTitle });
-                const textEle = this.createElement('div', { className: classNames.text, innerHTML: innerHeaderEle.outerHTML });
-                const 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
-                    const compiledString = compile(this.headerTemplate);
-                    const headerTemplateEle = this.createElement('div', { className: classNames.headerTemplateText });
-                    // eslint-disable-next-line
-                    const 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();
-                    }
+                    text = SanitizeHtmlHelper.sanitize(text);
                 }
-                if (this.headerTemplate && this.headerTitle) {
-                    textEle.classList.add('header');
+                textEle.innerHTML = text;
+                if (this.headerTemplate && showBack) {
+                    textEle.parentElement.classList.remove('header');
+                    this.headerEle.querySelector('.' + classNames.headerTemplateText).classList.add('nested-header');
                 }
-                this.element.classList.add('e-has-header');
-                prepend([this.headerEle], this.element);
-            }
-            else if (this.headerEle) {
-                if (this.showHeader) {
-                    this.headerEle.style.display = '';
-                    const textEle = this.headerEle.querySelector('.' + classNames.headerText);
-                    const 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 (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 {
-                    this.headerEle.style.display = 'none';
+                    hedBackButton.style.display = 'none';
                 }
             }
+            else {
+                this.headerEle.style.display = 'none';
+            }
         }
     }
     // Animation Related Functions
@@ -1396,7 +1369,7 @@ let ListView = class ListView extends Component {
         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) {
@@ -1419,39 +1392,10 @@ let ListView = class ListView extends Component {
             templateID: `${this.element.id}${LISTVIEW_TEMPLATE_PROPERTY}`,
             groupTemplateID: `${this.element.id}${LISTVIEW_GROUPTEMPLATE_PROPERTY}`,
             enableHtmlSanitizer: this.enableHtmlSanitizer,
-            removeBlazorID: true
         };
         this.initialization();
     }
-    updateLiElementHeight() {
-        const 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);
-        }
-    }
     initialization() {
-        if (isBlazor() && this.isServerRendered && this.enableVirtualization) {
-            const 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 = [];
@@ -1701,38 +1645,6 @@ let ListView = class ListView extends Component {
                 }
             }
         }
-        if (isBlazor() && this.isServerRendered && this.enableVirtualization) {
-            const ulElementContainer = this.element.querySelector('.' + classNames.virtualElementContainer);
-            if (ulElementContainer.querySelector('.e-active')) {
-                // eslint-disable-next-line
-                const selectedElements = ulElementContainer.querySelectorAll('.e-active');
-                if (this.showCheckBox) {
-                    for (let 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
-                const focusElement = ulElementContainer.querySelector('.e-focused');
-                if (!focusElement.classList.contains('e-active')) {
-                    const focusElementId = focusElement.getAttribute('data-uid');
-                    // eslint-disable-next-line
-                    if (this.previousSelectedItems.includes(focusElementId)) {
-                        const selectedElement1 = this.previousSelectedItems.slice(0, this.previousSelectedItems.indexOf(focusElementId));
-                        const selectedElement2 = this.previousSelectedItems.
-                            slice(this.previousSelectedItems.indexOf(focusElementId) + 1, this.previousSelectedItems.length);
-                        this.previousSelectedItems = selectedElement1.concat(selectedElement2);
-                    }
-                }
-            }
-        }
     }
     removeElement(element) {
         return element && element.parentNode && element.parentNode.removeChild(element);
@@ -2218,14 +2130,14 @@ let ListView = class ListView extends Component {
     setViewDataSource(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;
@@ -2234,27 +2146,44 @@ let ListView = class ListView extends Component {
     isInAnimation() {
         return this.curUL.classList.contains('.e-animate');
     }
+    renderRemoteLists(e, listViewComponent) {
+        if (this.isDestroyed) {
+            return;
+        }
+        this.localData = e.result;
+        listViewComponent.removeElement(listViewComponent.contentContainer);
+        this.renderList();
+        this.trigger('actionComplete', e);
+    }
+    triggerActionFailure(e) {
+        if (this.isDestroyed) {
+            return;
+        }
+        this.trigger('actionFailure', e);
+    }
     setLocalData() {
         this.trigger('actionBegin');
         // eslint-disable-next-line
         const listViewComponent = this;
         if (this.dataSource instanceof DataManager) {
-            this.dataSource.executeQuery(this.getQuery()).then((e) => {
-                if (this.isDestroyed) {
-                    return;
-                }
-                this.localData = e.result;
-                if (!this.isServerRendered || (!isBlazor())) {
-                    listViewComponent.removeElement(listViewComponent.contentContainer);
-                }
-                this.renderList();
-                this.trigger('actionComplete', e);
-            }).catch((e) => {
-                if (this.isDestroyed) {
-                    return;
-                }
-                this.trigger('actionFailure', e);
-            });
+            if (this.dataSource.ready) {
+                this.dataSource.ready.then((e) => {
+                    /* eslint-disable */
+                    this.isOffline = this.dataSource.dataSource.offline;
+                    if (this.dataSource instanceof DataManager && this.isOffline) {
+                        this.renderRemoteLists(e, listViewComponent);
+                    }
+                }).catch((e) => {
+                    this.triggerActionFailure(e);
+                });
+            }
+            else {
+                this.dataSource.executeQuery(this.getQuery()).then((e) => {
+                    this.renderRemoteLists(e, listViewComponent);
+                }).catch((e) => {
+                    this.triggerActionFailure(e);
+                });
+            }
         }
         else if (!this.dataSource || !this.dataSource.length) {
             const ul = this.element.querySelector('ul');
@@ -2273,25 +2202,21 @@ let ListView = class ListView extends Component {
         }
     }
     reRender() {
-        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();
     }
     resetCurrentList() {
-        this.resetBlazorTemplates();
         this.setViewDataSource(this.curViewDS);
         this.contentContainer.innerHTML = '';
         this.createList();
@@ -2313,33 +2238,6 @@ let ListView = class ListView extends Component {
         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);
-    }
-    resetBlazorTemplates() {
-        // eslint-disable-next-line
-        const 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);
-        }
-    }
-    updateBlazorTemplates(template = false, headerTemplate = false, 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);
-        }
     }
     exceptionEvent(e) {
         this.trigger('actionFailure', e);
@@ -2351,97 +2249,6 @@ let ListView = class ListView extends Component {
             this.liCollection = this.curUL.querySelectorAll('.' + classNames.listItem);
         }
     }
-    removeActiveClass() {
-        // eslint-disable-next-line
-        const listViewComponent = this;
-        setTimeout(() => {
-            const ulContainer = listViewComponent.element.querySelector('.' + classNames.virtualElementContainer);
-            for (let i = 0; i < ulContainer.childElementCount; i++) {
-                const selectedElement = ulContainer.children[i];
-                let elementIndex;
-                let hiddenElementIndex;
-                if (listViewComponent.showCheckBox) {
-                    if (listViewComponent.previousSelectedItems.length > 0) {
-                        for (let 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 (let 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 (let 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 (let 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);
-    }
-    renderingNestedList() {
-        const ul = closest(this.liElement.parentNode, '.' + classNames.parentItem);
-        const ctrlId = this.element.id;
-        const ulElement = document.getElementById(ctrlId);
-        const currentListItem = ulElement.getElementsByTagName('UL')[ulElement.getElementsByTagName('UL').length - 1];
-        this.switchView(ul, currentListItem);
-        this.liElement = null;
-    }
     renderSubList(li) {
         this.liElement = li;
         const uID = li.getAttribute('data-uid');
@@ -2452,27 +2259,18 @@ let ListView = class ListView extends Component {
             this.setViewDataSource(this.getSubDS());
             if (!ele) {
                 const 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();
-                    }
-                    const 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();
                 }
+                const 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) {
                 const fieldData = getFieldValues(this.selectedItems.data, this.listBaseOption.fields);
@@ -2487,38 +2285,34 @@ let ListView = class ListView extends Component {
     }
     renderList(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();
             }
         }
     }
@@ -2537,42 +2331,25 @@ let ListView = class ListView extends Component {
      * Initializes the ListView component rendering.
      */
     render() {
-        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();
     }
-    initBlazor(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.
      */
     destroy() {
-        this.resetBlazorTemplates();
         // eslint-disable-next-line
         if (this.isReact) {
             this.clearTemplate();
@@ -2584,13 +2361,8 @@ let ListView = class ListView extends Component {
         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.destroy();
-        }
-        else {
-            this.element.style.display = 'none';
-        }
+        this.element.innerHTML = '';
+        super.destroy();
     }
     /**
      * Switches back from the navigated sub list item.
@@ -2610,12 +2382,7 @@ let ListView = class ListView extends Component {
             toUL = this.curUL;
         }
         else {
-            if (isBlazor() && this.isServerRendered && this.enableVirtualization) {
-                toUL = toUL.parentElement.parentElement.parentElement;
-            }
-            else {
-                toUL = toUL.parentElement;
-            }
+            toUL = toUL.parentElement;
         }
         const fieldData = getFieldValues(this.curDSJSON, this.listBaseOption.fields);
         // eslint-disable-next-line
@@ -2733,7 +2500,6 @@ let ListView = class ListView extends Component {
     /**
      * Gets the details of the currently selected item from the list items.
      *
-     * @blazorType ListSelectedItem<TValue>
      */
     getSelectedItems() {
         // eslint-disable-next-line
@@ -2821,55 +2587,12 @@ let ListView = class ListView extends Component {
                 }
             }
         }
-        if (isBlazor()) {
-            // eslint-disable-next-line
-            return this.blazorGetSelectedItems(finalValue);
-        }
-        else {
-            return finalValue;
-        }
-    }
-    // eslint-disable-next-line
-    blazorGetSelectedItems(finalGetSelectedItem) {
-        const blazorSelectedItem = {
-            data: [],
-            index: [],
-            parentId: [],
-            text: []
-        };
-        if (!isNullOrUndefined(finalGetSelectedItem)) {
-            if (!isNullOrUndefined(finalGetSelectedItem.data)) {
-                if (this.showCheckBox && this.isNestedList) {
-                    for (let 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
-    convertItemsToArray(items) {
-        return Array.isArray(items) ? [...items] : [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
      */
     findItem(item) {
         return this.getItemData(item);
@@ -2966,7 +2689,6 @@ let ListView = class ListView extends Component {
      *
      * @param  {Fields} fields - Target item to add the given data as its children (can be null).
      *
-     * @blazorType data|object,fields|object
      */
     addItem(data, fields = undefined) {
         const dataSource = this.dataSource instanceof DataManager
@@ -3008,9 +2730,6 @@ let ListView = class ListView extends Component {
                             this.reRender();
                         }
                     }
-                    if (this.curUL) {
-                        this.updateBlazorTemplates(true);
-                    }
                     this.liCollection = this.curUL.querySelectorAll('.' + classNames.listItem);
                 }
                 else {
@@ -3036,15 +2755,12 @@ let ListView = class ListView extends Component {
                 : null;
         const targetDS = isAlreadyRenderedUL ? targetChildDS : [targetItemData];
         const isTargetEmptyChild = targetLi ? !targetLi.classList.contains(classNames.hasChild) : false;
-        let isRefreshTemplateNeeded = false;
-        // if li element is already rendered, that element needs to be refreshed so that
-        // it becomes child viewable due to new child items are added now
         if (isTargetEmptyChild) {
             const targetRefreshedElement = ListBase.createListItemFromJson(this.createElement, targetDS, this.listBaseOption, null, null, this);
             this.setAttributes(targetRefreshedElement);
             targetUL.insertBefore(targetRefreshedElement[0], targetLi);
             detach(targetLi);
-            isRefreshTemplateNeeded = true;
+            
         }
         // if it is already rendered element, we need to create and append new elements
         if (isAlreadyRenderedUL && itemQueue) {
@@ -3052,10 +2768,7 @@ let ListView = class ListView extends Component {
                 targetDS.push(itemQueue[i]);
                 this.addItemIntoDom(itemQueue[i], targetUL, targetDS);
             }
-            isRefreshTemplateNeeded = true;
-        }
-        if (isRefreshTemplateNeeded) {
-            this.updateBlazorTemplates(true);
+            
         }
     }
     addItemIntoDom(currentItem, targetUL, curViewDS) {
@@ -3097,7 +2810,6 @@ let ListView = class ListView extends Component {
         }
         else {
             this.removeItemFromList(item, listDataSource);
-            this.updateBlazorTemplates(true);
         }
     }
     removeItemFromList(obj, listDataSource) {
@@ -3174,7 +2886,6 @@ let ListView = class ListView extends Component {
             for (let i = 0; i < item.length; i++) {
                 this.removeItem(item[i]);
             }
-            this.updateBlazorTemplates(true);
         }
     }
     // eslint-disable-next-line
@@ -3318,66 +3029,43 @@ class Virtualization {
         this.wireScrollEvent(false);
         const curViewDS = this.listViewInstance.curViewDS;
         const firstDs = curViewDS.slice(0, 1);
-        if (!(isBlazor() || this.listViewInstance.isServerRendered)) {
-            this.listViewInstance.ulElement = this.listViewInstance.curUL = ListBase.createList(
-            // eslint-disable-next-line
-            this.listViewInstance.createElement, firstDs, this.listViewInstance.listBaseOption, null, this.listViewInstance);
-            this.listViewInstance.contentContainer = this.listViewInstance.createElement('div', { className: classNames.content });
-            this.listViewInstance.element.appendChild(this.listViewInstance.contentContainer);
-            this.listViewInstance.contentContainer.appendChild(this.listViewInstance.ulElement);
-        }
+        this.listViewInstance.ulElement = this.listViewInstance.curUL = ListBase.createList(
+        // eslint-disable-next-line
+        this.listViewInstance.createElement, firstDs, this.listViewInstance.listBaseOption, null, this.listViewInstance);
+        this.listViewInstance.contentContainer = this.listViewInstance.createElement('div', { className: classNames.content });
+        this.listViewInstance.element.appendChild(this.listViewInstance.contentContainer);
+        this.listViewInstance.contentContainer.appendChild(this.listViewInstance.ulElement);
         this.listItemHeight = this.listViewInstance.ulElement.firstElementChild.getBoundingClientRect().height;
         this.expectedDomItemCount = this.ValidateItemCount(10000);
         this.domItemCount = this.ValidateItemCount(Object.keys(this.listViewInstance.curViewDS).length);
         this.uiFirstIndex = 0;
         this.uiLastIndex = this.domItemCount - 1;
         const otherDs = curViewDS.slice(1, this.domItemCount);
-        if (!(isBlazor() || this.listViewInstance.isServerRendered)) {
-            const listItems = ListBase.createListItemFromJson(
-            // eslint-disable-next-line
-            this.listViewInstance.createElement, otherDs, this.listViewInstance.listBaseOption, null, null, this.listViewInstance);
-            append(listItems, this.listViewInstance.ulElement);
-            this.listViewInstance.liCollection = this.listViewInstance.curUL.querySelectorAll('li');
-            this.topElement = this.listViewInstance.createElement('div');
-            this.listViewInstance.ulElement.insertBefore(this.topElement, this.listViewInstance.ulElement.firstElementChild);
-            this.bottomElement = this.listViewInstance.createElement('div');
-            this.listViewInstance.ulElement.insertBefore(this.bottomElement, null);
-            this.totalHeight = (Object.keys(curViewDS).length * this.listItemHeight) - (this.domItemCount * this.listItemHeight);
-            this.topElement.style.height = 0 + 'px';
-            this.bottomElement.style.height = this.totalHeight + 'px';
-            this.topElementHeight = 0;
-            this.bottomElementHeight = this.totalHeight;
-        }
-        else {
-            this.listViewInstance.contentContainer = this.listViewInstance.element.querySelector('.e-content');
-            this.listViewInstance.liCollection = this.listViewInstance.curUL.querySelectorAll('li');
-        }
+        const listItems = ListBase.createListItemFromJson(
+        // eslint-disable-next-line
+        this.listViewInstance.createElement, otherDs, this.listViewInstance.listBaseOption, null, null, this.listViewInstance);
+        append(listItems, this.listViewInstance.ulElement);
+        this.listViewInstance.liCollection = this.listViewInstance.curUL.querySelectorAll('li');
+        this.topElement = this.listViewInstance.createElement('div');
+        this.listViewInstance.ulElement.insertBefore(this.topElement, this.listViewInstance.ulElement.firstElementChild);
+        this.bottomElement = this.listViewInstance.createElement('div');
+        this.listViewInstance.ulElement.insertBefore(this.bottomElement, null);
+        this.totalHeight = (Object.keys(curViewDS).length * this.listItemHeight) - (this.domItemCount * this.listItemHeight);
+        this.topElement.style.height = 0 + 'px';
+        this.bottomElement.style.height = this.totalHeight + 'px';
+        this.topElementHeight = 0;
+        this.bottomElementHeight = this.totalHeight;
         this.listDiff = 0;
         this.uiIndicesInitialization();
     }
     wireScrollEvent(destroy) {
         if (!destroy) {
-            if (!(isBlazor() && this.listViewInstance.isServerRendered)) {
-                if (this.listViewInstance.isWindow) {
-                    this.onVirtualScroll = this.onVirtualUiScroll.bind(this);
-                    window.addEventListener('scroll', this.onVirtualScroll);
-                }
-                else {
-                    EventHandler.add(this.listViewInstance.element, 'scroll', this.onVirtualUiScroll, this);
-                }
+            if (this.listViewInstance.isWindow) {
+                this.onVirtualScroll = this.onVirtualUiScroll.bind(this);
+                window.addEventListener('scroll', this.onVirtualScroll);
             }
             else {
-                if (this.listViewInstance.isWindow) {
-                    // eslint-disable-next-line
-                    this.onVirtualScroll = debounce(this.onVirtualUiScroll.bind(this), 350);
-                    this.updateUl = this.updateUlContainer.bind(this);
-                    window.addEventListener('scroll', this.onVirtualScroll);
-                    window.addEventListener('scroll', this.updateUl);
-                }
-                else {
-                    EventHandler.add(this.listViewInstance.element, 'scroll', debounce(this.onVirtualUiScroll, 350), this);
-                    EventHandler.add(this.listViewInstance.element, 'scroll', this.updateUlContainer, this);
-                }
+                EventHandler.add(this.listViewInstance.element, 'scroll', this.onVirtualUiScroll, this);
             }
         }
         else {
@@ -3456,16 +3144,10 @@ class Virtualization {
     refreshItemHeight() {
         if (this.listViewInstance.curViewDS.length) {
             const curViewDS = this.listViewInstance.curViewDS;
-            if (isBlazor() && this.listViewInstance.isServerRendered) {
-                this.listViewInstance.ulElement.children[0].style.height =
-                    (this.listViewInstance.liElementHeight * (Object.keys(curViewDS).length)) + 'px';
-            }
-            else {
-                this.listItemHeight = this.topElement.nextSibling.getBoundingClientRect().height;
-                this.totalHeight = (Object.keys(curViewDS).length * this.listItemHeight) - (this.domItemCount * this.listItemHeight);
-                this.bottomElementHeight = this.totalHeight;
-                this.bottomElement.style.height = this.totalHeight + 'px';
-            }
+            this.listItemHeight = this.topElement.nextSibling.getBoundingClientRect().height;
+            this.totalHeight = (Object.keys(curViewDS).length * this.listItemHeight) - (this.domItemCount * this.listItemHeight);
+            this.bottomElementHeight = this.totalHeight;
+            this.bottomElement.style.height = this.totalHeight + 'px';
         }
     }
     getscrollerHeight(startingHeight) {
@@ -3488,54 +3170,31 @@ class Virtualization {
         this.bottomElementHeight = this.totalHeight - this.topElementHeight;
         [this.topElementHeight, this.bottomElementHeight] = scroll <= this.totalHeight ?
             [this.topElementHeight, this.bottomElementHeight] : [this.totalHeight, 0];
-        if (isBlazor() && this.listViewInstance.isServerRendered) {
-            let listDiff;
-            if (isNullOrUndefined(this.listViewInstance.liElementHeight)) {
-                this.listViewInstance.updateLiElementHeight();
-            }
-            if (this.listViewInstance.isWindow) {
-                listDiff = Math.round(document.documentElement.scrollTop / this.listViewInstance.liElementHeight);
-            }
-            else {
-                // eslint-disable-next-line
-                listDiff = Math.round(e.target.scrollTop / this.listViewInstance.liElementHeight);
-            }
-            if ((listDiff - 2) - this.elementDifference >= 3 || (listDiff - 2) - this.elementDifference <= -1) {
-                const args = { listDiff: listDiff - 2, selectedItems: this.listViewInstance.previousSelectedItems };
-                this.listViewInstance.interopAdaptor.invokeMethodAsync('VirtalScrolling', args);
-                if (this.listViewInstance.ulElement.querySelector('.e-focused')) {
-                    this.listViewInstance.ulElement.querySelector('.e-focused').classList.remove('e-focused');
+        if (this.topElementHeight !== parseFloat(this.topElement.style.height)) {
+            this.topElement.style.height = this.topElementHeight + 'px';
+            this.bottomElement.style.height = this.bottomElementHeight + 'px';
+            if (scroll > this.scrollPosition) {
+                const listDiff = Math.round(((this.topElementHeight / this.listItemHeight) - this.listDiff));
+                if (listDiff > (this.expectedDomItemCount + 5)) {
+                    this.onLongScroll(listDiff, true);
+                }
+                else {
+                    this.onNormalScroll(listDiff, true);
                 }
-                this.elementDifference = listDiff - 2;
             }
-        }
-        else {
-            if (this.topElementHeight !== parseFloat(this.topElement.style.height)) {
-                this.topElement.style.height = this.topElementHeight + 'px';
-                this.bottomElement.style.height = this.bottomElementHeight + 'px';
-                if (scroll > this.scrollPosition) {
-                    const listDiff = Math.round(((this.topElementHeight / this.listItemHeight) - this.listDiff));
-                    if (listDiff > (this.expectedDomItemCount + 5)) {
-                        this.onLongScroll(listDiff, true);
-                    }
-                    else {
-                        this.onNormalScroll(listDiff, true);
-                    }
+            else {
+                const listDiff = Math.round((this.listDiff - (this.topElementHeight / this.listItemHeight)));
+                if (listDiff > (this.expectedDomItemCount + 5)) {
+                    this.onLongScroll(listDiff, false);
                 }
                 else {
-                    const listDiff = Math.round((this.listDiff - (this.topElementHeight / this.listItemHeight)));
-                    if (listDiff > (this.expectedDomItemCount + 5)) {
-                        this.onLongScroll(listDiff, false);
-                    }
-                    else {
-                        this.onNormalScroll(listDiff, false);
-                    }
+                    this.onNormalScroll(listDiff, false);
                 }
             }
-            this.listDiff = Math.round(this.topElementHeight / this.listItemHeight);
-            if (typeof this.listViewInstance.onUIScrolled === 'function') {
-                this.listViewInstance.onUIScrolled();
-            }
+        }
+        this.listDiff = Math.round(this.topElementHeight / this.listItemHeight);
+        if (typeof this.listViewInstance.onUIScrolled === 'function') {
+            this.listViewInstance.onUIScrolled();
         }
         this.scrollPosition = scroll;
     }
@@ -3719,14 +3378,6 @@ class Virtualization {
                 }
             }
             else {
-                if (isBlazor() && this.listViewInstance.isServerRendered) {
-                    let scrollDiff = Math.round(this.listViewInstance.element.scrollTop /
-                        this.listViewInstance.liElementHeight) - 2;
-                    if (scrollDiff < 0) {
-                        scrollDiff = 0;
-                    }
-                    this.activeIndex += scrollDiff;
-                }
                 const curViewDS = this.listViewInstance.curViewDS;
                 const text = this.listViewInstance.fields.text;
                 if (this.listViewInstance.showCheckBox) {
@@ -3819,114 +3470,35 @@ class Virtualization {
             this.listViewInstance.removeSelect();
             this.activeIndex = undefined;
         }
-        if (isBlazor() && this.listViewInstance.isServerRendered) {
-            // eslint-disable-next-line
-            const elementId = resutJSON.data[this.listViewInstance.fields.id];
-            if (this.listViewInstance.showCheckBox) {
-                if (!this.listViewInstance.previousSelectedItems.includes(elementId)) {
-                    this.listViewInstance.previousSelectedItems.push(elementId);
-                }
-                else {
-                    const indexPosition = this.listViewInstance.previousSelectedItems.indexOf(elementId);
-                    if (indexPosition > -1) {
-                        this.listViewInstance.previousSelectedItems.splice(indexPosition, 1);
-                    }
-                }
-            }
-            else {
-                this.listViewInstance.previousSelectedItems[0] = elementId;
-            }
-            this.listViewInstance.removeActiveClass();
-        }
     }
     enableItem(obj) {
         const resutJSON = this.findDSAndIndexFromId(this.listViewInstance.curViewDS, obj);
-        if (isBlazor() && this.listViewInstance.isServerRendered) {
-            // eslint-disable-next-line
-            const itemId = resutJSON.data[this.listViewInstance.fields.id];
-            if (!this.listViewInstance.enabledItems.includes(itemId)) {
-                this.listViewInstance.enabledItems.push(itemId);
-                this.listViewInstance.removeActiveClass();
-            }
-            if (this.listViewInstance.disabledItems.includes(itemId)) {
-                const indexPosition = this.listViewInstance.disabledItems.indexOf(itemId);
-                if (indexPosition > -1) {
-                    this.listViewInstance.disabledItems.splice(indexPosition, 1);
-                }
-            }
-        }
-        else {
-            if (Object.keys(resutJSON).length) {
-                this.uiIndices.disabledItemIndices.splice(this.uiIndices.disabledItemIndices.indexOf(resutJSON.index), 1);
-            }
+        if (Object.keys(resutJSON).length) {
+            this.uiIndices.disabledItemIndices.splice(this.uiIndices.disabledItemIndices.indexOf(resutJSON.index), 1);
         }
     }
     disableItem(obj) {
         const resutJSON = this.findDSAndIndexFromId(this.listViewInstance.curViewDS, obj);
-        if (isBlazor() && this.listViewInstance.isServerRendered) {
-            // eslint-disable-next-line
-            const liElementId = resutJSON.data[this.listViewInstance.fields.id];
-            if (!this.listViewInstance.disabledItems.includes(liElementId)) {
-                this.listViewInstance.disabledItems.push(liElementId);
-                this.listViewInstance.removeActiveClass();
-            }
-            if (this.listViewInstance.enabledItems.includes(liElementId)) {
-                const indexPosition = this.listViewInstance.enabledItems.indexOf(liElementId);
-                if (indexPosition > -1) {
-                    this.listViewInstance.enabledItems.splice(indexPosition, 1);
-                }
-            }
-        }
-        else {
-            if (Object.keys(resutJSON).length && this.uiIndices.disabledItemIndices.indexOf(resutJSON.index) === -1) {
-                this.uiIndices.disabledItemIndices.push(resutJSON.index);
-            }
+        if (Object.keys(resutJSON).length && this.uiIndices.disabledItemIndices.indexOf(resutJSON.index) === -1) {
+            this.uiIndices.disabledItemIndices.push(resutJSON.index);
         }
     }
     showItem(obj) {
         const resutJSON = this.findDSAndIndexFromId(this.listViewInstance.curViewDS, obj);
-        if (isBlazor() && this.listViewInstance.isServerRendered) {
-            // eslint-disable-next-line
-            const hiddenElementId = resutJSON.data[this.listViewInstance.fields.id];
-            if (this.listViewInstance.hiddenItems.includes(hiddenElementId)) {
-                const indexPosition = this.listViewInstance.hiddenItems.indexOf(hiddenElementId);
-                if (indexPosition > -1) {
-                    this.listViewInstance.previousSelectedItems.splice(indexPosition, 1);
-                    this.listViewInstance.removeActiveClass();
-                }
-            }
-        }
-        else {
-            if (Object.keys(resutJSON).length) {
-                this.uiIndices.hiddenItemIndices.splice(this.uiIndices.hiddenItemIndices.indexOf(resutJSON.index), 1);
-            }
+        if (Object.keys(resutJSON).length) {
+            this.uiIndices.hiddenItemIndices.splice(this.uiIndices.hiddenItemIndices.indexOf(resutJSON.index), 1);
         }
     }
     hideItem(obj) {
         const resutJSON = this.findDSAndIndexFromId(this.listViewInstance.curViewDS, obj);
-        if (isBlazor() && this.listViewInstance.isServerRendered) {
-            // eslint-disable-next-line
-            let elementId = resutJSON.data[this.listViewInstance.fields.id];
-            if (!this.listViewInstance.hiddenItems.includes(elementId)) {
-                this.listViewInstance.hiddenItems.push(elementId);
-                this.listViewInstance.removeActiveClass();
-            }
-        }
-        else {
-            if (Object.keys(resutJSON).length && this.uiIndices.hiddenItemIndices.indexOf(resutJSON.index) === -1) {
-                this.uiIndices.hiddenItemIndices.push(resutJSON.index);
-            }
+        if (Object.keys(resutJSON).length && this.uiIndices.hiddenItemIndices.indexOf(resutJSON.index) === -1) {
+            this.uiIndices.hiddenItemIndices.push(resutJSON.index);
         }
     }
     removeItem(obj) {
         let dataSource;
         const curViewDS = this.listViewInstance.curViewDS;
         const resutJSON = this.findDSAndIndexFromId(curViewDS, obj);
-        if (isBlazor() && this.listViewInstance.isServerRendered) {
-            if (resutJSON.index !== undefined) {
-                this.listViewInstance.interopAdaptor.invokeMethodAsync('RemoveItemPosition', resutJSON.index);
-            }
-        }
         if (Object.keys(resutJSON).length) {
             dataSource = resutJSON.data;
             if (curViewDS[resutJSON.index - 1] &&
@@ -3937,9 +3509,7 @@ class Virtualization {
                 this.removeUiItem(resutJSON.index - 1);
             }
             else {
-                if (!(isBlazor() && this.listViewInstance.isServerRendered)) {
-                    this.removeUiItem(resutJSON.index);
-                }
+                this.removeUiItem(resutJSON.index);
             }
         }
         const listDataSource = this.listViewInstance.dataSource instanceof DataManager
@@ -3955,12 +3525,6 @@ class Virtualization {
     }
     // eslint-disable-next-line
     setCheckboxLI(li, e) {
-        if (isBlazor() && this.listViewInstance.isServerRendered) {
-            this.uiFirstIndex = Math.round(this.listViewInstance.element.scrollTop / 36) - 4;
-            if (this.uiFirstIndex < 0) {
-                this.uiFirstIndex = 0;
-            }
-        }
         const index = Array.prototype.indexOf.call(this.listViewInstance.curUL.querySelectorAll('li'), li) + this.uiFirstIndex;
         this.activeIndex = Array.prototype.indexOf.call(this.listViewInstance.curUL.querySelectorAll('li'), li) + this.uiFirstIndex;
         if (li.classList.contains(classNames.selected)) {
@@ -4590,10 +4154,6 @@ let Sortable = Sortable_1 = class Sortable extends Base {
                 element.style.height = `${target.offsetHeight}px`;
             }
             addClass([element], ['e-sortableclone']);
-            removeClass([element], ['e-listboxtool-container']);
-            if (element && element.className.indexOf("e-listbox-wrapper") < 0) {
-                addClass([element], ['e-listbox-wrapper']);
-            }
             document.body.appendChild(element);
             return element;
         };
@@ -4706,9 +4266,8 @@ let Sortable = Sortable_1 = class Sortable extends Base {
             const isPlaceHolderPresent = this.isPlaceHolderPresent(dropInst);
             if (isPlaceHolderPresent) {
                 const curIdx = this.getIndex(dropInst.placeHolderElement, dropInst);
-                let prevIndx = this === dropInst && (prevIdx - curIdx) > 0 ? prevIdx - 1 : prevIdx;
                 const args = {
-                    previousIndex: prevIndx, currentIndex: this.curTarget === this.target ? prevIndx : curIdx, target: e.target, droppedElement: this.target,
+                    previousIndex: prevIdx, currentIndex: curIdx, target: e.target, droppedElement: this.target,
                     helper: e.helper, cancel: false, handled: false
                 };
                 this.trigger('beforeDrop', args, (observedArgs) => {
@@ -4735,8 +4294,7 @@ let Sortable = Sortable_1 = class Sortable extends Base {
             // eslint-disable-next-line prefer-const
             curIdx = dropInst.element.childElementCount;
             prevIdx = this.getIndex(this.target);
-            const target = (e.target.className.indexOf("e-list-nrt") > -1) ? e.target.parentElement : e.target;
-            if (dropInst.element === target || (!isPlaceHolderPresent && this.curTarget === this.target)) {
+            if (dropInst.element === e.target || (!isPlaceHolderPresent && this.curTarget === this.target)) {
                 const beforeDropArgs = {
                     previousIndex: prevIdx, currentIndex: this.curTarget === this.target ? prevIdx : curIdx,
                     target: e.target, droppedElement: this.target, helper: e.helper, cancel: false