@syncfusion/ej2-lists - npm Package Compare versions

Comparing version 17.1.43 to 17.1.47

CHANGELOG.md

@@ -7,2 +7,10 @@ # Changelog
 
+#### New Features
+
+- #230272 - Provided the support for adding new list view item without re-render the listview in virtualization mode.
+
+## 17.1.43 (2019-04-30)
+
+### ListView
+
 #### Bug Fixes
@@ -9,0 +17,0 @@

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 17.1.43
+*  version : 17.1.47
 *  Copyright Syncfusion Inc. 2001 - 2019. All rights reserved.
@@ -5,0 +5,0 @@ *  Use of this code is subject to the terms of our license.

package.json

 {
   "name": "@syncfusion/ej2-lists",
-  "version": "17.1.43",
+  "version": "17.1.47",
   "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.",
@@ -11,5 +11,5 @@ "author": "Syncfusion Inc.",
   "dependencies": {
-    "@syncfusion/ej2-base": "~17.1.43",
-    "@syncfusion/ej2-data": "~17.1.42",
-    "@syncfusion/ej2-buttons": "~17.1.42"
+    "@syncfusion/ej2-base": "~17.1.47",
+    "@syncfusion/ej2-data": "~17.1.47",
+    "@syncfusion/ej2-buttons": "~17.1.47"
   },
@@ -16,0 +16,0 @@ "devDependencies": {},

src/list-view/virtualization.d.ts

@@ -69,2 +69,3 @@ import { ListView, ItemCreatedArgs, Fields, UISelectedItem } from './list-view';
     }[], fields: Fields): void;
+    private createAndInjectNewItem;
     createUIItem(args: ItemCreatedArgs): void;
@@ -71,0 +72,0 @@ private compileTemplate;

src/list-view/virtualization.js

 import { classNames } from './list-view';
-import { EventHandler, append, isNullOrUndefined, detach, removeClass, addClass } from '@syncfusion/ej2-base';
+import { EventHandler, append, isNullOrUndefined, detach, removeClass, addClass, compile } from '@syncfusion/ej2-base';
 import { ListBase } from '../common/list-base';
@@ -123,3 +123,3 @@ var Virtualization = /** @class */ (function () {
             if (scroll > this.scrollPosition) {
-                var listDiff = ((this.topElementHeight / this.listItemHeight) - this.listDiff);
+                var listDiff = Math.round(((this.topElementHeight / this.listItemHeight) - this.listDiff));
                 if (listDiff > (this.expectedDomItemCount + 5)) {
@@ -133,3 +133,3 @@ this.onLongScroll(listDiff, true);
             else {
-                var listDiff = (this.listDiff - (this.topElementHeight / this.listItemHeight));
+                var listDiff = Math.round((this.listDiff - (this.topElementHeight / this.listItemHeight)));
                 if (listDiff > (this.expectedDomItemCount + 5)) {
@@ -142,3 +142,3 @@ this.onLongScroll(listDiff, false);
             }
-            this.listDiff = this.topElementHeight / this.listItemHeight;
+            this.listDiff = Math.round(this.topElementHeight / this.listItemHeight);
             if (typeof this.listViewInstance.onUIScrolled === 'function') {
@@ -460,2 +460,5 @@ this.listViewInstance.onUIScrolled();
         }
+        // recollect all the list item into collection
+        this.listViewInstance.liCollection =
+            this.listViewInstance.curUL.querySelectorAll('li');
     };
@@ -494,2 +497,6 @@ Virtualization.prototype.setCheckboxLI = function (li, e) {
     Virtualization.prototype.addUiItem = function (index) {
+        // virtually new add list item based on the scollbar position
+        // if the scroll bar is at the top, just pretend the new item has been added since no UI
+        // change is required for the item that has been added at last but when scroll bar is at the bottom
+        // just detach top and inject into bottom to mimic new item is added
         var curViewDs = this.listViewInstance.curViewDS;
@@ -536,3 +543,3 @@ this.changeUiIndices(index, true);
         this.totalHeight += this.listItemHeight;
-        this.listDiff = parseFloat(this.topElement.style.height) / this.listItemHeight;
+        this.listDiff = Math.round(parseFloat(this.topElement.style.height) / this.listItemHeight);
     };
@@ -594,3 +601,3 @@ Virtualization.prototype.removeUiItem = function (index) {
         this.changeUiIndices(index, false);
-        this.listDiff = parseFloat(this.topElement.style.height) / this.listItemHeight;
+        this.listDiff = Math.round(parseFloat(this.topElement.style.height) / this.listItemHeight);
     };
@@ -613,15 +620,43 @@ Virtualization.prototype.changeUiIndices = function (index, increment) {
         data.forEach(function (dataSource) {
+            // push the given data to main data array
             _this.listViewInstance.dataSource.push(dataSource);
+            // recalculate all the group data or other datasource related things
             _this.listViewInstance.setViewDataSource(_this.listViewInstance.dataSource);
+            // render list items for first time due to no datasource present earlier
             if (!_this.domItemCount) {
+                // fresh rendering for first time
+                if ((_this.listViewInstance.template || _this.listViewInstance.groupTemplate) && !_this.isNgTemplate()) {
+                    _this.listViewInstance.listBaseOption.template = null;
+                    _this.listViewInstance.listBaseOption.groupTemplate = null;
+                    _this.listViewInstance.listBaseOption.itemCreated = _this.createUIItem.bind(_this);
+                }
                 _this.uiVirtualization();
+                // when expected expected DOM count doesn't meet the condition we need to create and inject new item into DOM
             }
             else if (_this.domItemCount < _this.expectedDomItemCount) {
-                _this.wireScrollEvent(true);
-                detach(_this.listViewInstance.contentContainer);
-                _this.uiVirtualization();
+                var ds = _this.listViewInstance.findItemFromDS(_this.listViewInstance.dataSource, fields);
+                if (ds instanceof Array) {
+                    if (_this.listViewInstance.ulElement) {
+                        var index = _this.listViewInstance.curViewDS.indexOf(dataSource);
+                        // inject new list item into DOM
+                        _this.createAndInjectNewItem(dataSource, index);
+                        // check for group header item
+                        var curViewDS = _this.listViewInstance.curViewDS[index - 1];
+                        if (curViewDS && curViewDS.isHeader && curViewDS.items.length === 1) {
+                            // target group item index in datasource
+                            --index;
+                            // inject new group header into DOM for previously created list item
+                            _this.createAndInjectNewItem(curViewDS, index);
+                        }
+                    }
+                    // recollect all the list item into collection
+                    _this.listViewInstance.liCollection =
+                        _this.listViewInstance.curUL.querySelectorAll('li');
+                }
             }
             else {
                 var index = _this.listViewInstance.curViewDS.indexOf(dataSource);
+                // virtually new add list item based on the scollbar position
                 _this.addUiItem(index);
+                // check for group header item needs to be added
                 var curViewDS = _this.listViewInstance.curViewDS[index - 1];
@@ -634,2 +669,25 @@ if (curViewDS && curViewDS.isHeader && curViewDS.items.length === 1) {
     };
+    Virtualization.prototype.createAndInjectNewItem = function (itemData, index) {
+        // generate li item for given datasource
+        var target;
+        var li = ListBase.createListItemFromJson(this.listViewInstance.createElement, [itemData], this.listViewInstance.listBaseOption);
+        // check for target element whether to insert before last item or group item
+        if ((Object.keys(this.listViewInstance.curViewDS).length - 1) === index) {
+            target = this.listViewInstance.curUL.lastElementChild;
+        }
+        else {
+            // target group header's first child item to append its header
+            target = this.listViewInstance.getLiFromObjOrElement(this.listViewInstance.curViewDS[index + 1]) ||
+                this.listViewInstance.getLiFromObjOrElement(this.listViewInstance.curViewDS[index + 2]);
+        }
+        // insert before the target element
+        this.listViewInstance.ulElement.insertBefore(li[0], target);
+        // increment internal DOM count, last index count for new element
+        this.domItemCount++;
+        if (this.bottomElementHeight <= 0) {
+            this.uiLastIndex++;
+        }
+        // recalculate the current item height, to avoid jumpy scroller
+        this.refreshItemHeight();
+    };
     Virtualization.prototype.createUIItem = function (args) {
@@ -869,2 +927,5 @@ var template = this.listViewInstance.createElement('div');
         this.listViewInstance.localData = this.listViewInstance.dataSource;
+        // resetting the dom count to 0, to avoid edge case of dataSource suddenly becoming zero
+        // and then manually adding item using addItem API
+        this.domItemCount = 0;
         this.listViewInstance.renderList();
@@ -878,3 +939,3 @@ };
                 curViewDS[this.listViewInstance.fields.id].toString() : ListBase.generateId();
-            onChange(curViewDS, element);
+            onChange(curViewDS, element, this);
         }
@@ -889,4 +950,10 @@ else {
     };
-    Virtualization.prototype.onNgChange = function (newData, listElement) {
-        listElement.context.$implicit = newData;
+    Virtualization.prototype.onNgChange = function (newData, listElement, virtualThis) {
+        // compile given target element with template for new data
+        var templateCompiler = compile(virtualThis.listViewInstance.template);
+        var resultElement = templateCompiler(newData);
+        while (listElement.lastChild) {
+            listElement.removeChild(listElement.lastChild);
+        }
+        listElement.appendChild(resultElement[0]);
     };
@@ -893,0 +960,0 @@ Virtualization.prototype.getModuleName = function () {

No alert changes

Improved metrics

Total package byte prevSize

2166186

increased by1.94%

Lines of code

20742

increased by1.06%

Dependency changes

• Updated@syncfusion/ej2-base@~17.1.47

• Updated@syncfusion/ej2-buttons@~17.1.47

• Updated@syncfusion/ej2-data@~17.1.47