@syncfusion/ej2-lists 23.1.42 → 23.2.4

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 23.1.42
+*  version : 23.2.4
 *  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-lists@*",
-  "_id": "@syncfusion/ej2-lists@22.1.1",
+  "_id": "@syncfusion/ej2-lists@23.1.43",
   "_inBundle": false,
-  "_integrity": "sha512-jBtRRqzsH1qGVl/Y8NGkBIY04wOvQy2grGsN748ycD+JdOddlO14d9S0QA1CemMOcuBm1vLMEqi1gR1XWpFdVw==",
+  "_integrity": "sha512-ZxZ2s8B0jIlHbLi8qgl0OTos0aGYcIV7SW8DITGgwBWX6Orh+hxs/AnQ0YiqL7zwFtJe+E5oo2cctD0Fj6yi8Q==",
   "_location": "/@syncfusion/ej2-lists",
   "_phantomChildren": {},
   "_requested": {
@@ -35,8 +35,8 @@
     "/@syncfusion/ej2-schedule",
     "/@syncfusion/ej2-vue-lists"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-lists/-/ej2-lists-22.1.1.tgz",
-  "_shasum": "8e9b20d503a0da30682fe271bdb2d35a3923a978",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-lists/-/ej2-lists-23.1.43.tgz",
+  "_shasum": "597cc14fc40bb16eb42cc9c91a539e19230c8380",
   "_spec": "@syncfusion/ej2-lists@*",
   "_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
   "author": {
@@ -44,9 +44,9 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~23.1.41",
-    "@syncfusion/ej2-buttons": "~23.1.42",
-    "@syncfusion/ej2-data": "~23.1.36"
+    "@syncfusion/ej2-base": "~23.2.4",
+    "@syncfusion/ej2-buttons": "~23.2.4",
+    "@syncfusion/ej2-data": "~23.2.4"
   },
   "deprecated": false,
   "description": "The listview control allows you to select an item or multiple items from a list-like interface and represents the data in interactive hierarchical structure across different layouts or views.",
@@ -86,7 +86,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/lists"
   },
   "typings": "index.d.ts",
-  "version": "23.1.42",
+  "version": "23.2.4",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/common/list-base.js

@@ -286,7 +286,8 @@ export var ListBase;
                 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]) {

package/src/list-view/list-view.d.ts

@@ -556,11 +556,13 @@ export declare class ListView extends Component<HTMLElement> implements INotifyP
      *
      * @param  {Fields} fields - Target item to add the given data as its children (can be null).
      *
+     * @param {number} index - Indicates the index where the data to be added.
      */
     addItem(data: {
         [key: string]: Object;
-    }[], fields?: Fields): void;
+    }[], fields?: Fields, index?: number): void;
     private addItemInternally;
+    private addItemAtIndex;
     private addItemInNestedList;
     private addItemIntoDom;
     private addListItem;

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

@@ -1773,17 +1773,18 @@ var ListView = /** @class */ (function (_super) {
      *
      * @param  {Fields} fields - Target item to add the given data as its children (can be null).
      *
+     * @param {number} index - Indicates the index where the data to be added.
      */
-    ListView.prototype.addItem = function (data, fields) {
+    ListView.prototype.addItem = function (data, fields, index) {
         if (fields === void 0) { fields = undefined; }
         var dataSource = this.dataSource instanceof DataManager
             ? this.localData : this.dataSource;
-        this.addItemInternally(data, fields, dataSource);
+        this.addItemInternally(data, fields, dataSource, index);
     };
-    ListView.prototype.addItemInternally = function (data, fields, dataSource) {
+    ListView.prototype.addItemInternally = function (data, fields, dataSource, index) {
         if (data instanceof Array) {
             if (this.enableVirtualization) {
-                this.virtualizationModule.addItem(data, fields, dataSource);
+                this.virtualizationModule.addItem(data, fields, dataSource, index);
             }
             else {
                 var ds = this.findItemFromDS(dataSource, fields);
@@ -1799,7 +1800,7 @@ var ListView = /** @class */ (function (_super) {
                 // check for whether target is nested level or top level in list
                 if (ds instanceof Array) {
                     for (var i = 0; i < data.length; i++) {
-                        dataSource.push(data[i]);
+                        dataSource = this.addItemAtIndex(index, dataSource, data[i]);
                         this.setViewDataSource(dataSource);
                         // since it is top level target, get the content container's first child
                         // as it is always the top level UL
@@ -1827,6 +1828,16 @@ var ListView = /** @class */ (function (_super) {
             }
         }
     };
+    ListView.prototype.addItemAtIndex = function (index, newDataSource, itemData) {
+        var isIndexValid = !(isNullOrUndefined(index)) && index >= 0 && index < newDataSource.length && isNullOrUndefined(this.listBaseOption.fields.groupBy);
+        if (isIndexValid) {
+            newDataSource.splice(index, 0, itemData);
+        }
+        else {
+            newDataSource.push(itemData);
+        }
+        return newDataSource;
+    };
     ListView.prototype.addItemInNestedList = function (targetItemData, itemQueue) {
         // eslint-disable-next-line
         var targetItemId = targetItemData[this.fields.id];

package/src/list-view/virtualization.d.ts

@@ -10,7 +10,6 @@ export interface ElementContext extends HTMLElement {
 export declare class Virtualization {
     constructor(instance: ListView);
     private listViewInstance;
-    private headerData;
     private templateData;
     private topElementHeight;
     private bottomElementHeight;
@@ -31,9 +30,6 @@ export declare class Virtualization {
     private uiIndices;
     private listDiff;
     private elementDifference;
-    private templateFunction;
-    private groupTemplateFunction;
-    private commonTemplate;
     /**
      * For internal use only.
      *
@@ -77,12 +73,9 @@ export declare class Virtualization {
     private addUiItem;
     private removeUiItem;
     private changeUiIndices;
-    addItem(data: DataSource[], fields: Fields, dataSource: DataSource[]): void;
+    addItem(data: DataSource[], fields: Fields, dataSource: DataSource[], index: number): void;
     private createAndInjectNewItem;
     createUIItem(args: ItemCreatedArgs): void;
-    private compileTemplate;
-    private onChange;
-    private updateContextData;
     reRenderUiVirtualization(): void;
     private updateUI;
     /**
@@ -92,7 +85,7 @@ export declare class Virtualization {
      * @param {ElementContext} listElement - The HTML element context for the list view.
      * @param {Virtualization} virtualThis - The virtualization context for the list view.
      */
-    private onVueChange;
+    private onChange;
     private onNgChange;
     getModuleName(): string;
     destroy(): void;

package/src/list-view/virtualization.js

@@ -1,5 +1,5 @@
 import { classNames } from './list-view';
-import { EventHandler, append, isNullOrUndefined, detach, removeClass, addClass, compile, formatUnit } from '@syncfusion/ej2-base';
+import { EventHandler, append, isNullOrUndefined, detach, compile, formatUnit, select } from '@syncfusion/ej2-base';
 import { ListBase } from '../common/list-base';
 import { DataManager } from '@syncfusion/ej2-data';
 var listElementCount = 1.5;
@@ -31,10 +31,6 @@ var Virtualization = /** @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);
@@ -167,6 +163,9 @@ var Virtualization = /** @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;
@@ -282,7 +281,13 @@ var Virtualization = /** @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));
                 }
             }
         }
@@ -706,11 +711,11 @@ var Virtualization = /** @class */ (function () {
             });
         }
     };
-    Virtualization.prototype.addItem = function (data, fields, dataSource) {
+    Virtualization.prototype.addItem = function (data, fields, dataSource, index) {
         for (var i = 0; i < data.length; i++) {
             var currentItem = data[i];
             // push the given data to main data array
-            dataSource.push(currentItem);
+            dataSource = this.listViewInstance.addItemAtIndex(index, dataSource, currentItem);
             // recalculate all the group data or other datasource related things
             this.listViewInstance.setViewDataSource(dataSource);
             // render list items for first time due to no datasource present earlier
@@ -728,16 +733,16 @@ var Virtualization = /** @class */ (function () {
                 var ds = this.listViewInstance.findItemFromDS(dataSource, fields);
                 if (ds instanceof Array) {
                     if (this.listViewInstance.ulElement) {
-                        var index = this.listViewInstance.curViewDS.indexOf(currentItem);
+                        var index_1 = this.listViewInstance.curViewDS.indexOf(currentItem);
                         // inject new list item into DOM
-                        this.createAndInjectNewItem(currentItem, index);
+                        this.createAndInjectNewItem(currentItem, index_1);
                         // check for group header item
-                        var curViewDS = this.listViewInstance.curViewDS[index - 1];
+                        var curViewDS = this.listViewInstance.curViewDS[index_1 - 1];
                         if (curViewDS && curViewDS.isHeader && curViewDS.items.length === 1) {
                             // target group item index in datasource
-                            --index;
+                            --index_1;
                             // inject new group header into DOM for previously created list item
-                            this.createAndInjectNewItem(curViewDS, index);
+                            this.createAndInjectNewItem(curViewDS, index_1);
                         }
                     }
                     // recollect all the list item into collection
@@ -747,13 +752,13 @@ var Virtualization = /** @class */ (function () {
             }
             else {
                 // eslint-disable-next-line
-                var index = this.listViewInstance.curViewDS.indexOf(currentItem);
+                var index_2 = this.listViewInstance.curViewDS.indexOf(currentItem);
                 // virtually new add list item based on the scollbar position
-                this.addUiItem(index);
+                this.addUiItem(index_2);
                 // check for group header item needs to be added
-                var curViewDS = this.listViewInstance.curViewDS[index - 1];
+                var curViewDS = this.listViewInstance.curViewDS[index_2 - 1];
                 if (curViewDS && curViewDS.isHeader && curViewDS.items.length === 1) {
-                    this.addUiItem(index - 1);
+                    this.addUiItem(index_2 - 1);
                 }
             }
         }
@@ -790,192 +795,50 @@ var Virtualization = /** @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);
         if (this.listViewInstance.contentContainer) {
@@ -990,7 +853,7 @@ var Virtualization = /** @class */ (function () {
     };
     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
@@ -1014,14 +877,19 @@ var Virtualization = /** @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