@syncfusion/ej2-lists 23.1.43 → 24.1.41

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, animationMode, append, attributes, closest, compareElementParent, compile, detach, extend, formatUnit, getComponent, getUniqueID, getValue, isBlazor, isNullOrUndefined, isVisible, merge, prepend, remove, removeClass, rippleEffect } from '@syncfusion/ej2-base';
+import { Animation, Base, ChildProperty, Complex, Component, Draggable, Event, EventHandler, NotifyPropertyChanges, Property, SanitizeHtmlHelper, Touch, addClass, animationMode, append, attributes, closest, compareElementParent, compile, detach, extend, formatUnit, getComponent, getUniqueID, getValue, isBlazor, isNullOrUndefined, isVisible, merge, prepend, remove, removeClass, rippleEffect, select } from '@syncfusion/ej2-base';
 import { DataManager, Query } from '@syncfusion/ej2-data';
 import { createCheckBox } from '@syncfusion/ej2-buttons';
 
@@ -280,17 +280,23 @@ var ListBase;
                 li = generateLI(createElement, curItem, fieldData, fields, curOpt.itemClass, options, componentInstance);
                 li.classList.add(cssClass.level + '-' + ariaAttributes.level);
                 li.setAttribute('aria-level', ariaAttributes.level.toString());
-                if (ariaAttributes.groupItemRole == 'presentation' || ariaAttributes.itemRole == 'presentation') {
+                if (ariaAttributes.groupItemRole === 'presentation' || ariaAttributes.itemRole === 'presentation') {
                     li.removeAttribute('aria-level');
                 }
                 anchorElement = li.querySelector('.' + cssClass.anchorWrap);
                 // eslint-disable-next-line no-prototype-builtins
                 if (fieldData.hasOwnProperty(fields.tooltip)) {
-                    li.setAttribute('title', fieldData[fields.tooltip]);
+                    const tooltipText = SanitizeHtmlHelper.sanitize(fieldData[fields.tooltip]);
+                    li.setAttribute('title', tooltipText);
                 }
                 // eslint-disable-next-line no-prototype-builtins
                 if (fieldData.hasOwnProperty(fields.htmlAttributes) && fieldData[fields.htmlAttributes]) {
-                    setAttribute(li, fieldData[fields.htmlAttributes]);
+                    const htmlAttributes = fieldData[fields.htmlAttributes];
+                    // Check if 'class' attribute is present and not an empty string
+                    if (htmlAttributes.hasOwnProperty('class') && typeof htmlAttributes['class'] === 'string' && htmlAttributes['class'].trim() === '') {
+                        delete htmlAttributes['class'];
+                    }
+                    setAttribute(li, htmlAttributes);
                 }
                 // eslint-disable-next-line no-prototype-builtins
                 if (fieldData.hasOwnProperty(fields.enabled) && fieldData[fields.enabled] === false) {
@@ -506,7 +512,6 @@ var ListBase;
         const curOpt = extend({}, defaultListBaseOptions, options);
         const fields = extend({}, ListBase.defaultMappedFields, curOpt.fields);
         const curEle = element.cloneNode(true);
-        // eslint-disable-next-line
         const jsonAr = [];
         curEle.classList.add('json-parent');
         const childs = curEle.querySelectorAll('.json-parent>li');
@@ -515,7 +520,6 @@ var ListBase;
             const li = childs[i];
             const anchor = li.querySelector('a');
             const ul = li.querySelector('ul');
-            // eslint-disable-next-line
             const json = {};
             const childNodes = anchor ? anchor.childNodes : li.childNodes;
             const keys = Object.keys(childNodes);
@@ -589,7 +593,6 @@ var ListBase;
         const ulElement = createElement('ul', { className: cssClass.ul, attrs: { role: 'presentation' } });
         const curOpt = extend({}, defaultListBaseOptions, options);
         const curFields = extend({}, ListBase.defaultMappedFields, fields);
-        // eslint-disable-next-line
         const compiledString = compileTemplate(template);
         const liCollection = [];
         let value;
@@ -638,7 +641,7 @@ var ListBase;
             else {
                 const currentID = isHeader ? curOpt.groupTemplateID : curOpt.templateID;
                 if (isHeader) {
-                    if (componentInstance && componentInstance.getModuleName() != 'listview') {
+                    if (componentInstance && componentInstance.getModuleName() !== 'listview') {
                         // eslint-disable-next-line
                         const compiledElement = compiledString(curItem, componentInstance, 'headerTemplate', currentID, !!curOpt.isStringTemplate, null, li);
                         if (compiledElement) {
@@ -696,7 +699,6 @@ var ListBase;
     function renderGroupTemplate(groupTemplate, groupDataSource, fields, 
     // eslint-disable-next-line
     headerItems, options, componentInstance) {
-        // eslint-disable-next-line @typescript-eslint/ban-types
         const compiledString = compileTemplate(groupTemplate);
         const curFields = extend({}, ListBase.defaultMappedFields, fields);
         const curOpt = extend({}, defaultListBaseOptions, options);
@@ -705,7 +707,7 @@ var ListBase;
             const headerData = {};
             headerData[`${category}`] = header.textContent;
             header.innerHTML = '';
-            if (componentInstance && componentInstance.getModuleName() !== "listview") {
+            if (componentInstance && componentInstance.getModuleName() !== 'listview') {
                 // eslint-disable-next-line
                 const compiledElement = compiledString(headerData, componentInstance, 'groupTemplate', curOpt.groupTemplateID, !!curOpt.isStringTemplate, null, header);
                 if (compiledElement) {
@@ -741,7 +743,6 @@ var ListBase;
         // Create expand and collapse node
         if (!!options.expandCollapse && hasChildren && !options.template) {
             element.firstElementChild.classList.add(cssClass.iconWrapper);
-            // eslint-disable-next-line @typescript-eslint/ban-types
             const expandElement = options.expandIconPosition === 'Left' ? prepend : append;
             expandElement([createElement('div', { className: 'e-icons ' + options.expandIconClass })], element.querySelector('.' + cssClass.textContent));
         }
@@ -887,9 +888,8 @@ var ListBase;
             li.setAttribute('data-uid', generateId());
         }
         if (grpLI && options && options.groupTemplate) {
-            // eslint-disable-next-line @typescript-eslint/ban-types
             const compiledString = compileTemplate(options.groupTemplate);
-            if (componentInstance && componentInstance.getModuleName() !== "listview") {
+            if (componentInstance && componentInstance.getModuleName() !== 'listview') {
                 // eslint-disable-next-line
                 const compiledElement = compiledString(item, componentInstance, 'groupTemplate', curOpt.groupTemplateID, !!curOpt.isStringTemplate, null, li);
                 if (compiledElement) {
@@ -901,7 +901,6 @@ var ListBase;
             }
         }
         else if (!grpLI && options && options.template) {
-            // eslint-disable-next-line @typescript-eslint/ban-types
             const compiledString = compileTemplate(options.template);
             if (componentInstance && componentInstance.getModuleName() !== 'listview') {
                 // eslint-disable-next-line
@@ -973,7 +972,6 @@ var ListBase;
     function generateIcon(createElement, liElement, className, options) {
         const curOpt = extend({}, defaultListBaseOptions, options);
         cssClass = getModuleClass(curOpt.moduleName);
-        // eslint-disable-next-line @typescript-eslint/ban-types
         const expandElement = curOpt.expandIconPosition === 'Left' ? prepend : append;
         expandElement([createElement('div', {
                 className: 'e-icons ' + curOpt.expandIconClass + ' ' +
@@ -1310,7 +1308,6 @@ let ListView = class ListView extends Component {
             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
@@ -1429,7 +1426,7 @@ let ListView = class ListView extends Component {
             itemCreated: this.renderCheckbox.bind(this),
             templateID: `${this.element.id}${LISTVIEW_TEMPLATE_PROPERTY}`,
             groupTemplateID: `${this.element.id}${LISTVIEW_GROUPTEMPLATE_PROPERTY}`,
-            enableHtmlSanitizer: this.enableHtmlSanitizer,
+            enableHtmlSanitizer: this.enableHtmlSanitizer
         };
         this.initialization();
     }
@@ -1470,8 +1467,8 @@ let ListView = class ListView extends Component {
             if (typeof this.dataSource[0] !== 'string' && typeof this.dataSource[0] !== 'number') {
                 fieldData = getFieldValues(args.curData, this.listBaseOption.fields);
                 if (this.enablePersistence && !isNullOrUndefined(this.selectedId)) {
-                    let index = this.selectedId.findIndex(e => e == fieldData[this.listBaseOption.fields.id].toString());
-                    if (index != -1) {
+                    const index = this.selectedId.findIndex(e => e === fieldData[this.listBaseOption.fields.id].toString());
+                    if (index !== -1) {
                         this.checkInternally(args, checkboxElement);
                     }
                 }
@@ -1484,7 +1481,7 @@ let ListView = class ListView extends Component {
                 this.checkInternally(args, checkboxElement);
             }
             checkboxElement.setAttribute('aria-checked', frameElement.classList.contains(classNames.checked) ? 'true' : 'false');
-            checkboxElement.setAttribute('aria-label', 'checkbox');
+            checkboxElement.setAttribute('aria-label', args.text);
             if (this.checkBoxPosition === 'Left') {
                 checkboxElement.classList.add(classNames.checkboxLeft);
                 args.item.firstElementChild.classList.add(classNames.checkboxLeft);
@@ -1681,7 +1678,7 @@ let ListView = class ListView extends Component {
                 }
                 else {
                     this.setCheckboxLI(li, e);
-                    if ((target.nodeName == "INPUT") || (target.nodeName == "TEXTAREA")) {
+                    if ((target.nodeName === 'INPUT') || (target.nodeName === 'TEXTAREA')) {
                         target.classList.add('e-focused');
                         this.targetElement = target;
                     }
@@ -1689,7 +1686,7 @@ let ListView = class ListView extends Component {
             }
             else {
                 this.setSelectLI(li, e);
-                if ((target.nodeName == "INPUT") || (target.nodeName == "TEXTAREA")) {
+                if ((target.nodeName === 'INPUT') || (target.nodeName === 'TEXTAREA')) {
                     target.classList.add('e-focused');
                     this.targetElement = target;
                 }
@@ -1950,6 +1947,9 @@ let ListView = class ListView extends Component {
         EventHandler.add(this.element, 'mouseout', this.leaveHandler, this);
         EventHandler.add(this.element, 'focusout', this.focusout, this);
         this.touchModule = new Touch(this.element, { swipe: this.swipeActionHandler.bind(this) });
+        if (!isNullOrUndefined(this.scroll)) {
+            EventHandler.add(this.element, 'scroll', this.onListScroll, this);
+        }
     }
     unWireEvents() {
         EventHandler.remove(this.element, 'click', this.clickHandler);
@@ -1957,6 +1957,9 @@ let ListView = class ListView extends Component {
         EventHandler.remove(this.element, 'mouseout', this.leaveHandler);
         EventHandler.remove(this.element, 'mouseover', this.hoverHandler);
         EventHandler.remove(this.element, 'mouseout', this.leaveHandler);
+        if (!isNullOrUndefined(this.scroll)) {
+            EventHandler.remove(this.element, 'scroll', this.onListScroll);
+        }
         this.touchModule.destroy();
         this.touchModule = null;
     }
@@ -1998,7 +2001,7 @@ let ListView = class ListView extends Component {
             if (this.curUL.querySelector('.' + classNames.focused)) {
                 this.curUL.querySelector('.' + classNames.focused).classList.remove(classNames.focused);
             }
-            let textAreaFocus = li.querySelector('textarea') || li.querySelector('input');
+            const textAreaFocus = li.querySelector('textarea') || li.querySelector('input');
             li.classList.add(classNames.focused);
             if (!isNullOrUndefined(e)) {
                 if (e.target === textAreaFocus) {
@@ -2038,7 +2041,6 @@ let ListView = class ListView extends Component {
         }
         else {
             selectedItem =
-                // eslint-disable-next-line
                 {
                     item: li, text: fieldData && fieldData[this.listBaseOption.fields.text],
                     // eslint-disable-next-line
@@ -2196,7 +2198,7 @@ let ListView = class ListView extends Component {
     setViewDataSource(dataSource = this.localData) {
         // eslint-disable-next-line
         let fieldValue = (isNullOrUndefined(this.fields.sortBy)) ? this.fields.text : this.fields.sortBy;
-        let query = ListBase.addSorting(this.sortOrder, fieldValue);
+        const query = ListBase.addSorting(this.sortOrder, fieldValue);
         if (dataSource && this.fields.groupBy) {
             if (this.sortOrder !== 'None') {
                 this.curViewDS = ListBase.groupDataSource(ListBase.getDataSource(dataSource, query), this.listBaseOption.fields, this.sortOrder);
@@ -2274,7 +2276,6 @@ let ListView = class ListView extends Component {
         this.removeElement(this.headerEle);
         this.removeElement(this.ulElement);
         this.removeElement(this.contentContainer);
-        // eslint-disable-next-line
         if (this.isReact) {
             this.clearTemplate();
         }
@@ -2313,7 +2314,6 @@ let ListView = class ListView extends Component {
     UpdateCurrentUL() {
         this.ulElement = this.curUL = this.element.querySelector('.' + classNames.parentItem);
         if (this.curUL) {
-            // eslint-disable-next-line
             this.liCollection = this.curUL.querySelectorAll('.' + classNames.listItem);
         }
     }
@@ -2328,7 +2328,6 @@ let ListView = class ListView extends Component {
             if (!ele) {
                 const data = this.curViewDS;
                 ele = ListBase.createListFromJson(this.createElement, data, this.listBaseOption, this.curDSLevel.length, null, this);
-                // eslint-disable-next-line
                 if (this.isReact) {
                     this.renderReactTemplates();
                 }
@@ -2342,7 +2341,6 @@ let ListView = class ListView extends Component {
             this.liCollection = this.curUL.querySelectorAll('.' + classNames.listItem);
             if (this.selectedItems) {
                 const fieldData = getFieldValues(this.selectedItems.data, this.listBaseOption.fields);
-                // eslint-disable-next-line
                 this.header((fieldData[this.listBaseOption.fields.text]), true, 'header');
             }
             this.selectedLI = undefined;
@@ -2366,7 +2364,6 @@ let ListView = class ListView extends Component {
             this.contentContainer = this.createElement('div', { className: classNames.container });
             this.element.appendChild(this.contentContainer);
             this.renderIntoDom(this.ulElement);
-            // eslint-disable-next-line
             if (this.isReact) {
                 this.renderReactTemplates();
             }
@@ -2375,7 +2372,6 @@ let ListView = class ListView extends Component {
     getElementUID(obj) {
         let fields = {};
         if (obj instanceof Element) {
-            // eslint-disable-next-line
             fields[this.fields.id] = obj.getAttribute('data-uid');
         }
         else {
@@ -2401,12 +2397,12 @@ let ListView = class ListView extends Component {
             selector: '.' + classNames.listItem
         });
         this.renderComplete();
+        this.previousScrollTop = this.element.scrollTop;
     }
     /**
      * It is used to destroy the ListView component.
      */
     destroy() {
-        // eslint-disable-next-line
         if (this.isReact) {
             this.clearTemplate();
         }
@@ -2448,7 +2444,6 @@ let ListView = class ListView extends Component {
             toUL = toUL.parentElement;
         }
         const fieldData = getFieldValues(this.curDSJSON, this.listBaseOption.fields);
-        // eslint-disable-next-line
         const text = fieldData[this.fields.text];
         this.switchView(fromUL, toUL, true);
         this.removeFocus();
@@ -2521,7 +2516,6 @@ let ListView = class ListView extends Component {
                     if (!this.enableVirtualization && isNullOrUndefined(li)) {
                         const curLi = this.element.querySelectorAll('.' + classNames.listItem);
                         for (let i = 0; i < curLi.length; i++) {
-                            // eslint-disable-next-line
                             if (curLi[i].innerText.trim() === fieldData[this.fields.text]) {
                                 li = curLi[i];
                             }
@@ -2571,7 +2565,6 @@ let ListView = class ListView extends Component {
      *
      */
     getSelectedItems() {
-        // eslint-disable-next-line
         let finalValue;
         let isCompleted = false;
         this.selectedId = [];
@@ -2582,7 +2575,6 @@ let ListView = class ListView extends Component {
             isCompleted = true;
         }
         else if (this.showCheckBox && !isCompleted) {
-            // eslint-disable-next-line
             const liCollection = this.curUL.getElementsByClassName(classNames.selected);
             const liTextCollection = [];
             const liDataCollection = [];
@@ -2602,9 +2594,7 @@ let ListView = class ListView extends Component {
                         liDataCollection.push(tempData);
                     }
                     if (fieldData) {
-                        // eslint-disable-next-line
                         liTextCollection.push(fieldData[this.listBaseOption.fields.text]);
-                        // eslint-disable-next-line
                         this.selectedId.push(fieldData[this.listBaseOption.fields.id]);
                     }
                     else {
@@ -2646,7 +2636,6 @@ let ListView = class ListView extends Component {
                     isCompleted = true;
                 }
                 else {
-                    // eslint-disable-next-line
                     this.selectedId.push(fieldData[this.listBaseOption.fields.id]);
                     finalValue = {
                         text: fieldData[this.listBaseOption.fields.text], item: liElement,
@@ -2704,7 +2693,6 @@ let ListView = class ListView extends Component {
                 if (li) {
                     li.classList.add(classNames.disable);
                 }
-                // eslint-disable-next-line
                 resultJSON[this.fields.enabled] = false;
             }
         }
@@ -2740,7 +2728,6 @@ let ListView = class ListView extends Component {
                 li.style.display = display;
             }
             if (isHide) {
-                // eslint-disable-next-line
                 resultJSON[this.fields.isVisible] = false;
             }
             else {
@@ -2823,7 +2810,6 @@ let ListView = class ListView extends Component {
         return newDataSource;
     }
     addItemInNestedList(targetItemData, itemQueue) {
-        // eslint-disable-next-line
         const targetItemId = targetItemData[this.fields.id];
         const targetChildDS = targetItemData[this.fields.child];
         const isAlreadyRenderedUL = this.element.querySelector('[pid=\'' + targetItemId + '\']');
@@ -2864,7 +2850,6 @@ let ListView = class ListView extends Component {
             this.getLiFromObjOrElement(curViewDS[index + 2]) || null;
         const li = ListBase.createListItemFromJson(this.createElement, [dataSource], this.listBaseOption, null, null, this);
         this.setAttributes(li);
-        // eslint-disable-next-line
         if (this.template && this.isReact) {
             this.renderReactTemplates();
         }
@@ -2896,11 +2881,9 @@ let ListView = class ListView extends Component {
         const curViewDS = this.curViewDS;
         const fields = obj instanceof Element ? this.getElementUID(obj) : obj;
         let dataSource;
-        // eslint-disable-next-line prefer-const
         dataSource = this.findItemFromDS(listDataSource, fields, true);
         if (dataSource) {
             let data;
-            // eslint-disable-next-line prefer-const
             data = this.findItemFromDS(dataSource, fields);
             const index = curViewDS.indexOf(data);
             const li = this.getLiFromObjOrElement(obj);
@@ -2921,11 +2904,8 @@ let ListView = class ListView extends Component {
             if (groupLi) {
                 detach(groupLi);
             }
-            // eslint-disable-next-line
             const foundData = (dataSource.length - 1) <= 0
-                ? this.findParent(this.localData, this.fields.id, 
-                // eslint-disable-next-line
-                (value) => value === data[this.fields.id], null) : null;
+                ? this.findParent(this.localData, this.fields.id, (value) => value === data[this.fields.id], null) : null;
             const dsIndex = dataSource.indexOf(data);
             dataSource.splice(dsIndex, 1);
             this.setViewDataSource(listDataSource);
@@ -2968,16 +2948,13 @@ let ListView = class ListView extends Component {
             }
         }
     }
-    // eslint-disable-next-line
     findParent(dataSource, id, callback, parent) {
-        // eslint-disable-next-line no-prototype-builtins
         if (dataSource.hasOwnProperty(id) && callback(dataSource[id]) === true) {
             return extend({}, dataSource);
         }
         for (let i = 0; i < Object.keys(dataSource).length; i++) {
             if (dataSource[Object.keys(dataSource)[i]]
                 && typeof dataSource[Object.keys(dataSource)[i]] === 'object') {
-                // eslint-disable-next-line
                 const result = this.findParent(dataSource[Object.keys(dataSource)[i]], id, callback, dataSource);
                 if (result != null) {
                     if (!result.parent) {
@@ -3000,6 +2977,21 @@ let ListView = class ListView extends Component {
         }
         return modules;
     }
+    onListScroll(e) {
+        let args = { originalEvent: e, scrollDirection: "Bottom", distanceY: this.element.scrollHeight - this.element.scrollTop };
+        let currentScrollTop = this.element.scrollTop;
+        if (currentScrollTop > this.previousScrollTop) {
+            args.scrollDirection = "Bottom";
+            args.distanceY = this.element.scrollHeight - this.element.clientHeight - this.element.scrollTop;
+            this.trigger('scroll', args);
+        }
+        else if (this.previousScrollTop > currentScrollTop) {
+            args.scrollDirection = "Top";
+            args.distanceY = this.element.scrollTop;
+            this.trigger('scroll', args);
+        }
+        this.previousScrollTop = currentScrollTop;
+    }
     /**
      * Get the properties to be maintained in the persisted state.
      */
@@ -3081,6 +3073,9 @@ __decorate([
 __decorate([
     Event()
 ], ListView.prototype, "actionFailure", void 0);
+__decorate([
+    Event()
+], ListView.prototype, "scroll", void 0);
 ListView = __decorate([
     NotifyPropertyChanges
 ], ListView);
@@ -3114,10 +3109,6 @@ class Virtualization {
      * @private
      */
     uiVirtualization() {
-        this.commonTemplate = '<div class="e-text-content" role="presentation"> ' +
-            '<span class="e-list-text"> ${' + this.listViewInstance.fields.text + '} </span></div>';
-        this.templateFunction = compile(this.listViewInstance.template || this.commonTemplate, this.listViewInstance);
-        this.groupTemplateFunction = compile(this.listViewInstance.groupTemplate || this.commonTemplate, this.listViewInstance);
         this.wireScrollEvent(false);
         const curViewDS = this.listViewInstance.curViewDS;
         const firstDs = curViewDS.slice(0, 1);
@@ -3249,6 +3240,9 @@ class Virtualization {
     }
     onVirtualUiScroll(e) {
         let startingHeight;
+        const curViewDS = this.listViewInstance.curViewDS;
+        this.listItemHeight = select('.e-list-item', this.listViewInstance.element).getBoundingClientRect().height;
+        this.totalHeight = (Object.keys(curViewDS).length * this.listItemHeight) - (this.domItemCount * this.listItemHeight);
         if (this.listViewInstance.isWindow) {
             startingHeight = this.listViewInstance.ulElement.getBoundingClientRect().top -
                 document.documentElement.getBoundingClientRect().top;
@@ -3364,7 +3358,13 @@ class Virtualization {
                 if (!element.querySelector('.' + classNames.checkboxWrapper)) {
                     element.classList.add(classNames.checklist);
                     textContent.classList.add(classNames.checkbox);
-                    textContent.insertBefore(this.checkListWrapper.cloneNode(true), element.querySelector('.' + classNames.listItemText));
+                    if (this.listViewInstance.checkBoxPosition === 'Left') {
+                        textContent.classList.add('e-checkbox-left');
+                    }
+                    else {
+                        textContent.classList.add('e-checkbox-right');
+                    }
+                    textContent.append(this.checkListWrapper.cloneNode(true));
                 }
             }
         }
@@ -3602,7 +3602,6 @@ class Virtualization {
         const curViewDS = this.listViewInstance.curViewDS;
         // eslint-disable-next-line
         const resutJSON = this.findDSAndIndexFromId(curViewDS, obj);
-        // eslint-disable-next-line
         if (Object.keys(resutJSON).length) {
             dataSource = resutJSON.data;
             if (curViewDS[resutJSON.index - 1] &&
@@ -3850,7 +3849,7 @@ class Virtualization {
                 this.listViewInstance.getLiFromObjOrElement(this.listViewInstance.curViewDS[index + 2]);
         }
         if (this.listViewInstance.fields.groupBy && this.listViewInstance.curViewDS[index + 1] && this.listViewInstance.curViewDS[index + 1].isHeader) {
-            let targetEle = this.listViewInstance.getLiFromObjOrElement(this.listViewInstance.curViewDS[index - 1]);
+            const targetEle = this.listViewInstance.getLiFromObjOrElement(this.listViewInstance.curViewDS[index - 1]);
             if (targetEle) {
                 target = targetEle.nextElementSibling;
             }
@@ -3866,190 +3865,49 @@ class Virtualization {
         this.refreshItemHeight();
     }
     createUIItem(args) {
-        const template = document.createElement('div');
-        this.templateData = args.curData.isHeader ? args.curData.items[0] :
-            args.curData;
-        if (this.listViewInstance.isReact) {
-            this.commonTemplate = null;
-        }
-        if (this.listViewInstance.showCheckBox) {
-            // eslint-disable-next-line
-            this.listViewInstance.renderCheckbox(args);
-            if ((!isNullOrUndefined(this.listViewInstance.virtualCheckBox)) &&
-                (!isNullOrUndefined(this.listViewInstance.virtualCheckBox.outerHTML))) {
-                const div = document.createElement('div');
-                const nodes = this.templateFunction(this.templateData, this.listViewInstance);
-                if (this.listViewInstance.template && this.listViewInstance.isReact) {
-                    this.listViewInstance.renderReactTemplates();
-                }
-                [].slice.call(nodes).forEach((ele) => {
-                    div.appendChild(ele);
-                });
-                if (div.children && div.children[0]) {
-                    div.children[0].classList.add('e-checkbox');
-                    if (this.listViewInstance.checkBoxPosition === 'Left') {
-                        div.children[0].classList.add('e-checkbox-left');
-                    }
-                    else {
-                        div.children[0].classList.add('e-checkbox-right');
-                    }
-                    if (this.listViewInstance.checkBoxPosition === 'Left') {
-                        div.children[0].insertBefore(this.listViewInstance.virtualCheckBox, div.childNodes[0].children[0]);
-                    }
-                    else {
-                        div.children[0].appendChild(this.listViewInstance.virtualCheckBox);
+        if (!args.item.classList.contains('e-list-group-item')) {
+            this.templateData = args.curData.isHeader ? args.curData.items[0] :
+                args.curData;
+            if (this.listViewInstance.showCheckBox) {
+                // eslint-disable-next-line
+                this.listViewInstance.renderCheckbox(args);
+                if ((!isNullOrUndefined(this.listViewInstance.virtualCheckBox)) &&
+                    (!isNullOrUndefined(this.listViewInstance.virtualCheckBox.outerHTML))) {
+                    const div = document.createElement('div');
+                    const commonTemplate = '<div class="e-text-content" role="presentation"> ' +
+                        '<span class="e-list-text"> ${' + this.listViewInstance.fields.text + '} </span></div>';
+                    const templateFunction = compile(this.listViewInstance.template || commonTemplate, this.listViewInstance);
+                    const nodes = templateFunction(this.templateData, this.listViewInstance);
+                    if (this.listViewInstance.template && this.listViewInstance.isReact) {
+                        this.listViewInstance.renderReactTemplates();
                     }
-                    template.innerHTML = div.innerHTML;
-                }
-            }
-            else {
-                let div = document.createElement('div');
-                const nodes = this.templateFunction(this.templateData, this.listViewInstance);
-                if (this.listViewInstance.template && this.listViewInstance.isReact) {
-                    this.listViewInstance.renderReactTemplates();
-                }
-                [].slice.call(nodes).forEach((ele) => {
-                    div.appendChild(ele);
-                });
-                template.innerHTML = div.innerHTML;
-            }
-        }
-        else {
-            const nodes = this.templateFunction(this.templateData, this.listViewInstance);
-            if (this.listViewInstance.template && this.listViewInstance.isReact) {
-                this.listViewInstance.renderReactTemplates();
-            }
-            [].slice.call(nodes).forEach((ele) => {
-                template.appendChild(ele);
-            });
-        }
-        if (args.curData.isHeader) {
-            this.headerData = args.curData;
-        }
-        const groupTemplate = this.listViewInstance.createElement('div');
-        if (this.listViewInstance.fields.groupBy) {
-            const nodes = this.groupTemplateFunction(this.headerData, this.listViewInstance);
-            if (this.listViewInstance.template && this.listViewInstance.isReact) {
-                this.listViewInstance.renderReactTemplates();
-            }
-            [].slice.call(nodes).forEach((ele) => {
-                groupTemplate.appendChild(ele);
-            });
-        }
-        if ((!this.listViewInstance.isReact || (typeof this.listViewInstance.template == "string" && !args.item.classList.contains("e-list-group-item")) ||
-            (typeof this.listViewInstance.groupTemplate == "string" && args.item.classList.contains("e-list-group-item"))) && !this.listViewInstance.isVue) {
-            args.item.innerHTML = '';
-        }
-        args.item.context = { data: args.curData, nodes: { flatTemplateNodes: [], groupTemplateNodes: [] } };
-        for (let i = 0; i < template.children.length; i++) {
-            this.compileTemplate(template.children[i], args.item, false);
-        }
-        for (let i = 0; i < groupTemplate.children.length; i++) {
-            this.compileTemplate(groupTemplate.children[i], args.item, true);
-        }
-        args.item.context.template = args.curData.isHeader ? template.firstElementChild :
-            groupTemplate.firstElementChild;
-        args.item.context.type = args.curData.isHeader ? 'flatList' : 'groupList';
-        const element = args.curData.isHeader ? groupTemplate : template;
-        if (element.firstElementChild && !this.listViewInstance.isReact && !this.listViewInstance.isVue) {
-            args.item.insertBefore(element.firstElementChild, null);
-        }
-    }
-    compileTemplate(element, item, isHeader) {
-        const subNode = {};
-        subNode.onChange = (value) => {
-            let groupTemplateElements;
-            let templateElements;
-            if (this.listViewInstance.isVue) {
-                groupTemplateElements = this.groupTemplateFunction(value);
-                templateElements = this.templateFunction(value);
-            }
-            else {
-                groupTemplateElements = this.groupTemplateFunction(value, this.listViewInstance);
-                templateElements = this.templateFunction(value, this.listViewInstance);
-            }
-            if (this.listViewInstance.template && this.listViewInstance.isReact) {
-                this.listViewInstance.renderReactTemplates();
-            }
-            let currentTemplate = templateElements;
-            if (value.isHeader) {
-                currentTemplate = groupTemplateElements;
-            }
-            [].slice.call(currentTemplate).forEach(function (currentElement) {
-                let RemovableClass = element.classList.value.replace('e-checkbox', '');
-                RemovableClass = RemovableClass.replace('e-checkbox-left', '');
-                RemovableClass = RemovableClass.replace('e-checkbox-right', '');
-                removeClass([element], RemovableClass.split(' ').filter(function (css) { return css; }));
-                addClass([element], Array.from(currentElement.classList));
-                for (let i = 0; i < element.attributes.length; i++) {
-                    if (element.attributes[i].name != 'class') {
-                        const newData = currentElement.getAttribute(element.attributes[i].name);
-                        element.setAttribute(element.attributes[i].name, newData);
+                    [].slice.call(nodes).forEach((ele) => {
+                        div.appendChild(ele);
+                    });
+                    if (div.children && div.children[0]) {
+                        div.children[0].classList.add('e-checkbox');
+                        if (this.listViewInstance.checkBoxPosition === 'Left') {
+                            div.children[0].classList.add('e-checkbox-left');
+                        }
+                        else {
+                            div.children[0].classList.add('e-checkbox-right');
+                        }
+                        if (this.listViewInstance.checkBoxPosition === 'Left') {
+                            div.children[0].insertBefore(this.listViewInstance.virtualCheckBox, div.childNodes[0].children[0]);
+                        }
+                        else {
+                            div.children[0].appendChild(this.listViewInstance.virtualCheckBox);
+                        }
+                        while (args.item.lastChild) {
+                            args.item.removeChild(args.item.lastChild);
+                        }
+                        [].slice.call(div.children).forEach(function (ele) {
+                            args.item.appendChild(ele);
+                        });
                     }
                 }
-                [].slice.call(element.children).forEach(function (ele) {
-                    if (!ele.classList.contains('e-listview-checkbox') && !(ele.classList.contains('e-checkbox-left') || ele.classList.contains('e-checkbox-right'))) {
-                        ele.remove();
-                    }
-                });
-                [].slice.call(currentElement.children).forEach(function (ele) {
-                    element.appendChild(ele);
-                });
-            });
-        };
-        this.updateContextData(item, subNode, isHeader);
-    }
-    onChange(newData, listElement) {
-        listElement.context.data = newData;
-        // eslint-disable-next-line max-len
-        const groupTemplateNodes = listElement.context.nodes.groupTemplateNodes;
-        // eslint-disable-next-line max-len
-        const flatTemplateNodes = listElement.context.nodes.flatTemplateNodes;
-        // eslint-disable-next-line
-        if (!isNullOrUndefined(newData.isHeader) && newData.isHeader && listElement.context.type === 'groupList') {
-            // eslint-disable-next-line
-            const element = listElement.firstElementChild;
-            detach(listElement.firstElementChild);
-            listElement.insertBefore(listElement.context.template, null);
-            listElement.context.template = element;
-            listElement.context.type = 'flatList';
-            for (let i = 0; i < groupTemplateNodes.length; i++) {
-                // eslint-disable-next-line
-                groupTemplateNodes[i].onChange(newData);
             }
         }
-        else if (!newData.isHeader && listElement.context.type === 'flatList') {
-            const element = listElement.firstElementChild;
-            detach(listElement.firstElementChild);
-            listElement.insertBefore(listElement.context.template, null);
-            listElement.context.template = element;
-            listElement.context.type = 'groupList';
-            for (let i = 0; i < flatTemplateNodes.length; i++) {
-                // eslint-disable-next-line
-                flatTemplateNodes[i].onChange(newData);
-            }
-        }
-        else if (!newData.isHeader) {
-            for (let i = 0; i < flatTemplateNodes.length; i++) {
-                // eslint-disable-next-line
-                flatTemplateNodes[i].onChange(newData);
-            }
-        }
-        else {
-            for (let i = 0; i < groupTemplateNodes.length; i++) {
-                // eslint-disable-next-line
-                groupTemplateNodes[i].onChange(newData);
-            }
-        }
-    }
-    // eslint-disable-next-line
-    updateContextData(listElement, node, isHeader) {
-        if (isHeader) {
-            listElement.context.nodes.groupTemplateNodes.push(node);
-        }
-        else {
-            listElement.context.nodes.flatTemplateNodes.push(node);
-        }
     }
     reRenderUiVirtualization() {
         this.wireScrollEvent(true);
@@ -4064,8 +3922,7 @@ class Virtualization {
         this.listViewInstance.setLocalData();
     }
     updateUI(element, index, targetElement) {
-        // eslint-disable-next-line @typescript-eslint/ban-types
-        const onChange = this.isNgTemplate() ? this.onNgChange : (this.isVueFunctionTemplate()) ? this.onVueChange : this.onChange;
+        const onChange = this.isNgTemplate() ? this.onNgChange : this.onChange;
         if (this.listViewInstance.template || this.listViewInstance.groupTemplate) {
             const curViewDS = this.listViewInstance.curViewDS[index];
             // eslint-disable-next-line
@@ -4089,18 +3946,22 @@ class Virtualization {
      * @param {ElementContext} listElement - The HTML element context for the list view.
      * @param {Virtualization} virtualThis - The virtualization context for the list view.
      */
-    onVueChange(newData, listElement, virtualThis) {
-        let liItem = ListBase.createListItemFromJson(virtualThis.listViewInstance.createElement, 
+    onChange(newData, listElement, virtualThis) {
+        const liItem = ListBase.createListItemFromJson(virtualThis.listViewInstance.createElement, 
         // eslint-disable-next-line
         [newData], virtualThis.listViewInstance.listBaseOption, null, null, virtualThis.listViewInstance);
+        if (virtualThis.listViewInstance.isReact) {
+            virtualThis.listViewInstance.renderReactTemplates();
+        }
         while (listElement.lastChild) {
             listElement.removeChild(listElement.lastChild);
         }
-        listElement.appendChild(liItem[0].firstChild);
+        [].slice.call(liItem[0].children).forEach(function (ele) {
+            listElement.appendChild(ele);
+        });
     }
     onNgChange(newData, listElement, virtualThis) {
         // compile given target element with template for new data
-        // eslint-disable-next-line
         const templateCompiler = compile(virtualThis.listViewInstance.template);
         const resultElement = templateCompiler(newData);
         while (listElement.lastChild) {