@syncfusion/ej2-lists 23.1.43 → 24.1.41

package/dist/es6/ej2-lists.es5.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]);
+                    var 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]);
+                    var 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) {
@@ -508,7 +514,6 @@ var ListBase;
         var curOpt = extend({}, defaultListBaseOptions, options);
         var fields = extend({}, ListBase.defaultMappedFields, curOpt.fields);
         var curEle = element.cloneNode(true);
-        // eslint-disable-next-line
         var jsonAr = [];
         curEle.classList.add('json-parent');
         var childs = curEle.querySelectorAll('.json-parent>li');
@@ -517,7 +522,6 @@ var ListBase;
             var li = childs[i];
             var anchor = li.querySelector('a');
             var ul = li.querySelector('ul');
-            // eslint-disable-next-line
             var json = {};
             var childNodes = anchor ? anchor.childNodes : li.childNodes;
             var keys = Object.keys(childNodes);
@@ -591,7 +595,6 @@ var ListBase;
         var ulElement = createElement('ul', { className: cssClass.ul, attrs: { role: 'presentation' } });
         var curOpt = extend({}, defaultListBaseOptions, options);
         var curFields = extend({}, ListBase.defaultMappedFields, fields);
-        // eslint-disable-next-line
         var compiledString = compileTemplate(template);
         var liCollection = [];
         var value;
@@ -640,7 +643,7 @@ var ListBase;
             else {
                 var currentID = isHeader ? curOpt.groupTemplateID : curOpt.templateID;
                 if (isHeader) {
-                    if (componentInstance && componentInstance.getModuleName() != 'listview') {
+                    if (componentInstance && componentInstance.getModuleName() !== 'listview') {
                         // eslint-disable-next-line
                         var compiledElement = compiledString(curItem, componentInstance, 'headerTemplate', currentID, !!curOpt.isStringTemplate, null, li);
                         if (compiledElement) {
@@ -698,7 +701,6 @@ var ListBase;
     function renderGroupTemplate(groupTemplate, groupDataSource, fields, 
     // eslint-disable-next-line
     headerItems, options, componentInstance) {
-        // eslint-disable-next-line @typescript-eslint/ban-types
         var compiledString = compileTemplate(groupTemplate);
         var curFields = extend({}, ListBase.defaultMappedFields, fields);
         var curOpt = extend({}, defaultListBaseOptions, options);
@@ -708,7 +710,7 @@ var ListBase;
             var headerData = {};
             headerData["" + category] = header.textContent;
             header.innerHTML = '';
-            if (componentInstance && componentInstance.getModuleName() !== "listview") {
+            if (componentInstance && componentInstance.getModuleName() !== 'listview') {
                 // eslint-disable-next-line
                 var compiledElement = compiledString(headerData, componentInstance, 'groupTemplate', curOpt.groupTemplateID, !!curOpt.isStringTemplate, null, header);
                 if (compiledElement) {
@@ -744,7 +746,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
             var expandElement = options.expandIconPosition === 'Left' ? prepend : append;
             expandElement([createElement('div', { className: 'e-icons ' + options.expandIconClass })], element.querySelector('.' + cssClass.textContent));
         }
@@ -890,9 +891,8 @@ var ListBase;
             li.setAttribute('data-uid', generateId());
         }
         if (grpLI && options && options.groupTemplate) {
-            // eslint-disable-next-line @typescript-eslint/ban-types
             var compiledString = compileTemplate(options.groupTemplate);
-            if (componentInstance && componentInstance.getModuleName() !== "listview") {
+            if (componentInstance && componentInstance.getModuleName() !== 'listview') {
                 // eslint-disable-next-line
                 var compiledElement = compiledString(item, componentInstance, 'groupTemplate', curOpt.groupTemplateID, !!curOpt.isStringTemplate, null, li);
                 if (compiledElement) {
@@ -904,7 +904,6 @@ var ListBase;
             }
         }
         else if (!grpLI && options && options.template) {
-            // eslint-disable-next-line @typescript-eslint/ban-types
             var compiledString = compileTemplate(options.template);
             if (componentInstance && componentInstance.getModuleName() !== 'listview') {
                 // eslint-disable-next-line
@@ -976,7 +975,6 @@ var ListBase;
     function generateIcon(createElement, liElement, className, options) {
         var curOpt = extend({}, defaultListBaseOptions, options);
         cssClass = getModuleClass(curOpt.moduleName);
-        // eslint-disable-next-line @typescript-eslint/ban-types
         var expandElement = curOpt.expandIconPosition === 'Left' ? prepend : append;
         expandElement([createElement('div', {
                 className: 'e-icons ' + curOpt.expandIconClass + ' ' +
@@ -1335,7 +1333,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
             this.headerEle.appendChild(hedBackButton);
             this.headerEle.appendChild(textEle);
             if (this.headerTemplate) {
-                // eslint-disable-next-line
                 var compiledString = compile(this.headerTemplate);
                 var headerTemplateEle = this.createElement('div', { className: classNames.headerTemplateText });
                 // eslint-disable-next-line
@@ -1455,7 +1452,7 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
             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();
     };
@@ -1497,8 +1494,8 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
             if (typeof this.dataSource[0] !== 'string' && typeof this.dataSource[0] !== 'number') {
                 fieldData_1 = getFieldValues(args.curData, this.listBaseOption.fields);
                 if (this.enablePersistence && !isNullOrUndefined(this.selectedId)) {
-                    var index = this.selectedId.findIndex(function (e) { return e == fieldData_1[_this.listBaseOption.fields.id].toString(); });
-                    if (index != -1) {
+                    var index = this.selectedId.findIndex(function (e) { return e === fieldData_1[_this.listBaseOption.fields.id].toString(); });
+                    if (index !== -1) {
                         this.checkInternally(args, checkboxElement);
                     }
                 }
@@ -1511,7 +1508,7 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
                 this.checkInternally(args, checkboxElement);
             }
             checkboxElement.setAttribute('aria-checked', frameElement_1.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);
@@ -1708,7 +1705,7 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
                 }
                 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;
                     }
@@ -1716,7 +1713,7 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
             }
             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;
                 }
@@ -1978,6 +1975,9 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
         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);
+        }
     };
     ListView.prototype.unWireEvents = function () {
         EventHandler.remove(this.element, 'click', this.clickHandler);
@@ -1985,6 +1985,9 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
         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;
     };
@@ -2068,7 +2071,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
         }
         else {
             selectedItem =
-                // eslint-disable-next-line
                 {
                     item: li, text: fieldData && fieldData[this.listBaseOption.fields.text],
                     // eslint-disable-next-line
@@ -2310,7 +2312,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
         this.removeElement(this.headerEle);
         this.removeElement(this.ulElement);
         this.removeElement(this.contentContainer);
-        // eslint-disable-next-line
         if (this.isReact) {
             this.clearTemplate();
         }
@@ -2349,7 +2350,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
     ListView.prototype.UpdateCurrentUL = function () {
         this.ulElement = this.curUL = this.element.querySelector('.' + classNames.parentItem);
         if (this.curUL) {
-            // eslint-disable-next-line
             this.liCollection = this.curUL.querySelectorAll('.' + classNames.listItem);
         }
     };
@@ -2364,7 +2364,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
             if (!ele) {
                 var 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();
                 }
@@ -2378,7 +2377,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
             this.liCollection = this.curUL.querySelectorAll('.' + classNames.listItem);
             if (this.selectedItems) {
                 var fieldData = getFieldValues(this.selectedItems.data, this.listBaseOption.fields);
-                // eslint-disable-next-line
                 this.header((fieldData[this.listBaseOption.fields.text]), true, 'header');
             }
             this.selectedLI = undefined;
@@ -2402,7 +2400,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
             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();
             }
@@ -2411,7 +2408,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
     ListView.prototype.getElementUID = function (obj) {
         var fields = {};
         if (obj instanceof Element) {
-            // eslint-disable-next-line
             fields[this.fields.id] = obj.getAttribute('data-uid');
         }
         else {
@@ -2437,12 +2433,12 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
             selector: '.' + classNames.listItem
         });
         this.renderComplete();
+        this.previousScrollTop = this.element.scrollTop;
     };
     /**
      * It is used to destroy the ListView component.
      */
     ListView.prototype.destroy = function () {
-        // eslint-disable-next-line
         if (this.isReact) {
             this.clearTemplate();
         }
@@ -2484,7 +2480,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
             toUL = toUL.parentElement;
         }
         var fieldData = getFieldValues(this.curDSJSON, this.listBaseOption.fields);
-        // eslint-disable-next-line
         var text = fieldData[this.fields.text];
         this.switchView(fromUL, toUL, true);
         this.removeFocus();
@@ -2557,7 +2552,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
                     if (!this.enableVirtualization && isNullOrUndefined(li)) {
                         var curLi = this.element.querySelectorAll('.' + classNames.listItem);
                         for (var i = 0; i < curLi.length; i++) {
-                            // eslint-disable-next-line
                             if (curLi[i].innerText.trim() === fieldData[this.fields.text]) {
                                 li = curLi[i];
                             }
@@ -2607,7 +2601,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
      *
      */
     ListView.prototype.getSelectedItems = function () {
-        // eslint-disable-next-line
         var finalValue;
         var isCompleted = false;
         this.selectedId = [];
@@ -2618,7 +2611,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
             isCompleted = true;
         }
         else if (this.showCheckBox && !isCompleted) {
-            // eslint-disable-next-line
             var liCollection = this.curUL.getElementsByClassName(classNames.selected);
             var liTextCollection = [];
             var liDataCollection = [];
@@ -2638,9 +2630,7 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
                         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 {
@@ -2682,7 +2672,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
                     isCompleted = true;
                 }
                 else {
-                    // eslint-disable-next-line
                     this.selectedId.push(fieldData[this.listBaseOption.fields.id]);
                     finalValue = {
                         text: fieldData[this.listBaseOption.fields.text], item: liElement,
@@ -2740,7 +2729,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
                 if (li) {
                     li.classList.add(classNames.disable);
                 }
-                // eslint-disable-next-line
                 resultJSON[this.fields.enabled] = false;
             }
         }
@@ -2776,7 +2764,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
                 li.style.display = display;
             }
             if (isHide) {
-                // eslint-disable-next-line
                 resultJSON[this.fields.isVisible] = false;
             }
             else {
@@ -2860,7 +2847,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
         return newDataSource;
     };
     ListView.prototype.addItemInNestedList = function (targetItemData, itemQueue) {
-        // eslint-disable-next-line
         var targetItemId = targetItemData[this.fields.id];
         var targetChildDS = targetItemData[this.fields.child];
         var isAlreadyRenderedUL = this.element.querySelector('[pid=\'' + targetItemId + '\']');
@@ -2901,7 +2887,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
             this.getLiFromObjOrElement(curViewDS[index + 2]) || null;
         var 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();
         }
@@ -2934,11 +2919,9 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
         var curViewDS = this.curViewDS;
         var fields = obj instanceof Element ? this.getElementUID(obj) : obj;
         var dataSource;
-        // eslint-disable-next-line prefer-const
         dataSource = this.findItemFromDS(listDataSource, fields, true);
         if (dataSource) {
             var data_1;
-            // eslint-disable-next-line prefer-const
             data_1 = this.findItemFromDS(dataSource, fields);
             var index = curViewDS.indexOf(data_1);
             var li = this.getLiFromObjOrElement(obj);
@@ -2959,11 +2942,8 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
             if (groupLi) {
                 detach(groupLi);
             }
-            // eslint-disable-next-line
             var foundData = (dataSource.length - 1) <= 0
-                ? this.findParent(this.localData, this.fields.id, 
-                // eslint-disable-next-line
-                function (value) { return value === data_1[_this.fields.id]; }, null) : null;
+                ? this.findParent(this.localData, this.fields.id, function (value) { return value === data_1[_this.fields.id]; }, null) : null;
             var dsIndex = dataSource.indexOf(data_1);
             dataSource.splice(dsIndex, 1);
             this.setViewDataSource(listDataSource);
@@ -3006,16 +2986,13 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
-    // eslint-disable-next-line
     ListView.prototype.findParent = function (dataSource, id, callback, parent) {
-        // eslint-disable-next-line no-prototype-builtins
         if (dataSource.hasOwnProperty(id) && callback(dataSource[id]) === true) {
             return extend({}, dataSource);
         }
         for (var 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
                 var result = this.findParent(dataSource[Object.keys(dataSource)[i]], id, callback, dataSource);
                 if (result != null) {
                     if (!result.parent) {
@@ -3038,6 +3015,21 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
         }
         return modules;
     };
+    ListView.prototype.onListScroll = function (e) {
+        var args = { originalEvent: e, scrollDirection: "Bottom", distanceY: this.element.scrollHeight - this.element.scrollTop };
+        var 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.
      */
@@ -3118,6 +3110,9 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
     __decorate([
         Event()
     ], ListView.prototype, "actionFailure", void 0);
+    __decorate([
+        Event()
+    ], ListView.prototype, "scroll", void 0);
     ListView = __decorate([
         NotifyPropertyChanges
     ], ListView);
@@ -3153,10 +3148,6 @@ var Virtualization = /** @__PURE__ @class */ (function () {
      * @private
      */
     Virtualization.prototype.uiVirtualization = function () {
-        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);
         var curViewDS = this.listViewInstance.curViewDS;
         var firstDs = curViewDS.slice(0, 1);
@@ -3289,6 +3280,9 @@ var Virtualization = /** @__PURE__ @class */ (function () {
     Virtualization.prototype.onVirtualUiScroll = function (e) {
         var _a;
         var startingHeight;
+        var 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;
@@ -3404,7 +3398,13 @@ var Virtualization = /** @__PURE__ @class */ (function () {
                 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));
                 }
             }
         }
@@ -3648,7 +3648,6 @@ var Virtualization = /** @__PURE__ @class */ (function () {
         var curViewDS = this.listViewInstance.curViewDS;
         // eslint-disable-next-line
         var resutJSON = this.findDSAndIndexFromId(curViewDS, obj);
-        // eslint-disable-next-line
         if (Object.keys(resutJSON).length) {
             dataSource = resutJSON.data;
             if (curViewDS[resutJSON.index - 1] &&
@@ -3912,191 +3911,49 @@ var Virtualization = /** @__PURE__ @class */ (function () {
         this.refreshItemHeight();
     };
     Virtualization.prototype.createUIItem = function (args) {
-        var 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))) {
-                var div_1 = document.createElement('div');
-                var nodes = this.templateFunction(this.templateData, this.listViewInstance);
-                if (this.listViewInstance.template && this.listViewInstance.isReact) {
-                    this.listViewInstance.renderReactTemplates();
-                }
-                [].slice.call(nodes).forEach(function (ele) {
-                    div_1.appendChild(ele);
-                });
-                if (div_1.children && div_1.children[0]) {
-                    div_1.children[0].classList.add('e-checkbox');
-                    if (this.listViewInstance.checkBoxPosition === 'Left') {
-                        div_1.children[0].classList.add('e-checkbox-left');
-                    }
-                    else {
-                        div_1.children[0].classList.add('e-checkbox-right');
-                    }
-                    if (this.listViewInstance.checkBoxPosition === 'Left') {
-                        div_1.children[0].insertBefore(this.listViewInstance.virtualCheckBox, div_1.childNodes[0].children[0]);
-                    }
-                    else {
-                        div_1.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))) {
+                    var div_1 = document.createElement('div');
+                    var commonTemplate = '<div class="e-text-content" role="presentation"> ' +
+                        '<span class="e-list-text"> ${' + this.listViewInstance.fields.text + '} </span></div>';
+                    var templateFunction = compile(this.listViewInstance.template || commonTemplate, this.listViewInstance);
+                    var nodes = templateFunction(this.templateData, this.listViewInstance);
+                    if (this.listViewInstance.template && this.listViewInstance.isReact) {
+                        this.listViewInstance.renderReactTemplates();
                     }
-                    template.innerHTML = div_1.innerHTML;
-                }
-            }
-            else {
-                var div_2 = document.createElement('div');
-                var nodes = this.templateFunction(this.templateData, this.listViewInstance);
-                if (this.listViewInstance.template && this.listViewInstance.isReact) {
-                    this.listViewInstance.renderReactTemplates();
-                }
-                [].slice.call(nodes).forEach(function (ele) {
-                    div_2.appendChild(ele);
-                });
-                template.innerHTML = div_2.innerHTML;
-            }
-        }
-        else {
-            var nodes = this.templateFunction(this.templateData, this.listViewInstance);
-            if (this.listViewInstance.template && this.listViewInstance.isReact) {
-                this.listViewInstance.renderReactTemplates();
-            }
-            [].slice.call(nodes).forEach(function (ele) {
-                template.appendChild(ele);
-            });
-        }
-        if (args.curData.isHeader) {
-            this.headerData = args.curData;
-        }
-        var groupTemplate = this.listViewInstance.createElement('div');
-        if (this.listViewInstance.fields.groupBy) {
-            var nodes = this.groupTemplateFunction(this.headerData, this.listViewInstance);
-            if (this.listViewInstance.template && this.listViewInstance.isReact) {
-                this.listViewInstance.renderReactTemplates();
-            }
-            [].slice.call(nodes).forEach(function (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 (var i = 0; i < template.children.length; i++) {
-            this.compileTemplate(template.children[i], args.item, false);
-        }
-        for (var 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';
-        var element = args.curData.isHeader ? groupTemplate : template;
-        if (element.firstElementChild && !this.listViewInstance.isReact && !this.listViewInstance.isVue) {
-            args.item.insertBefore(element.firstElementChild, null);
-        }
-    };
-    Virtualization.prototype.compileTemplate = function (element, item, isHeader) {
-        var _this = this;
-        var subNode = {};
-        subNode.onChange = function (value) {
-            var groupTemplateElements;
-            var 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();
-            }
-            var currentTemplate = templateElements;
-            if (value.isHeader) {
-                currentTemplate = groupTemplateElements;
-            }
-            [].slice.call(currentTemplate).forEach(function (currentElement) {
-                var 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 (var i = 0; i < element.attributes.length; i++) {
-                    if (element.attributes[i].name != 'class') {
-                        var newData = currentElement.getAttribute(element.attributes[i].name);
-                        element.setAttribute(element.attributes[i].name, newData);
+                    [].slice.call(nodes).forEach(function (ele) {
+                        div_1.appendChild(ele);
+                    });
+                    if (div_1.children && div_1.children[0]) {
+                        div_1.children[0].classList.add('e-checkbox');
+                        if (this.listViewInstance.checkBoxPosition === 'Left') {
+                            div_1.children[0].classList.add('e-checkbox-left');
+                        }
+                        else {
+                            div_1.children[0].classList.add('e-checkbox-right');
+                        }
+                        if (this.listViewInstance.checkBoxPosition === 'Left') {
+                            div_1.children[0].insertBefore(this.listViewInstance.virtualCheckBox, div_1.childNodes[0].children[0]);
+                        }
+                        else {
+                            div_1.children[0].appendChild(this.listViewInstance.virtualCheckBox);
+                        }
+                        while (args.item.lastChild) {
+                            args.item.removeChild(args.item.lastChild);
+                        }
+                        [].slice.call(div_1.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);
-    };
-    Virtualization.prototype.onChange = function (newData, listElement) {
-        listElement.context.data = newData;
-        // eslint-disable-next-line max-len
-        var groupTemplateNodes = listElement.context.nodes.groupTemplateNodes;
-        // eslint-disable-next-line max-len
-        var flatTemplateNodes = listElement.context.nodes.flatTemplateNodes;
-        // eslint-disable-next-line
-        if (!isNullOrUndefined(newData.isHeader) && newData.isHeader && listElement.context.type === 'groupList') {
-            // eslint-disable-next-line
-            var element = listElement.firstElementChild;
-            detach(listElement.firstElementChild);
-            listElement.insertBefore(listElement.context.template, null);
-            listElement.context.template = element;
-            listElement.context.type = 'flatList';
-            for (var i = 0; i < groupTemplateNodes.length; i++) {
-                // eslint-disable-next-line
-                groupTemplateNodes[i].onChange(newData);
             }
         }
-        else if (!newData.isHeader && listElement.context.type === 'flatList') {
-            var element = listElement.firstElementChild;
-            detach(listElement.firstElementChild);
-            listElement.insertBefore(listElement.context.template, null);
-            listElement.context.template = element;
-            listElement.context.type = 'groupList';
-            for (var i = 0; i < flatTemplateNodes.length; i++) {
-                // eslint-disable-next-line
-                flatTemplateNodes[i].onChange(newData);
-            }
-        }
-        else if (!newData.isHeader) {
-            for (var i = 0; i < flatTemplateNodes.length; i++) {
-                // eslint-disable-next-line
-                flatTemplateNodes[i].onChange(newData);
-            }
-        }
-        else {
-            for (var i = 0; i < groupTemplateNodes.length; i++) {
-                // eslint-disable-next-line
-                groupTemplateNodes[i].onChange(newData);
-            }
-        }
-    };
-    // eslint-disable-next-line
-    Virtualization.prototype.updateContextData = function (listElement, node, isHeader) {
-        if (isHeader) {
-            listElement.context.nodes.groupTemplateNodes.push(node);
-        }
-        else {
-            listElement.context.nodes.flatTemplateNodes.push(node);
-        }
     };
     Virtualization.prototype.reRenderUiVirtualization = function () {
         this.wireScrollEvent(true);
@@ -4111,8 +3968,7 @@ var Virtualization = /** @__PURE__ @class */ (function () {
         this.listViewInstance.setLocalData();
     };
     Virtualization.prototype.updateUI = function (element, index, targetElement) {
-        // eslint-disable-next-line @typescript-eslint/ban-types
-        var onChange = this.isNgTemplate() ? this.onNgChange : (this.isVueFunctionTemplate()) ? this.onVueChange : this.onChange;
+        var onChange = this.isNgTemplate() ? this.onNgChange : this.onChange;
         if (this.listViewInstance.template || this.listViewInstance.groupTemplate) {
             var curViewDS = this.listViewInstance.curViewDS[index];
             // eslint-disable-next-line
@@ -4136,18 +3992,22 @@ var Virtualization = /** @__PURE__ @class */ (function () {
      * @param {ElementContext} listElement - The HTML element context for the list view.
      * @param {Virtualization} virtualThis - The virtualization context for the list view.
      */
-    Virtualization.prototype.onVueChange = function (newData, listElement, virtualThis) {
+    Virtualization.prototype.onChange = function (newData, listElement, virtualThis) {
         var 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);
+        });
     };
     Virtualization.prototype.onNgChange = function (newData, listElement, virtualThis) {
         // compile given target element with template for new data
-        // eslint-disable-next-line
         var templateCompiler = compile(virtualThis.listViewInstance.template);
         var resultElement = templateCompiler(newData);
         while (listElement.lastChild) {