@syncfusion/ej2-lists 26.2.10 → 26.2.14

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

@@ -1303,6 +1303,7 @@ let ListView = class ListView extends Component {
                     }
                     break;
                 case 'dataSource':
+                    this.previousScrollTop = this.element.scrollTop;
                     if (this.enableVirtualization) {
                         this.virtualizationModule.reRenderUiVirtualization();
                     }
@@ -1697,6 +1698,28 @@ let ListView = class ListView extends Component {
             this.virtualizationModule.refreshItemHeight();
         }
     }
+    handleCheckboxState(li, checkIcon, checkboxElement, isCheckedBefore, isFocusedBefore, eventArgs, isSetCheckboxLI, textAreaFocus) {
+        this.trigger('select', eventArgs, (observedArgs) => {
+            if (observedArgs.cancel) {
+                if (isSetCheckboxLI ? isCheckedBefore : !isCheckedBefore) {
+                    checkIcon.classList.add(classNames.checked);
+                    li.classList.add(classNames.selected);
+                }
+                else {
+                    checkIcon.classList.remove(classNames.checked);
+                    li.classList.remove(classNames.selected);
+                }
+                checkboxElement.setAttribute('aria-checked', isSetCheckboxLI ? (isCheckedBefore ? 'true' : 'false') : (isCheckedBefore ? 'false' : 'true'));
+                merge(eventArgs, { isChecked: checkIcon.classList.contains(classNames.checked) });
+                if (isFocusedBefore) {
+                    li.classList.remove(classNames.focused);
+                    if (textAreaFocus) {
+                        textAreaFocus.classList.remove('e-focused');
+                    }
+                }
+            }
+        });
+    }
     clickHandler(e) {
         if (Array.isArray(this.dataSource) && this.dataSource.length === 0) {
             return;
@@ -1738,7 +1761,10 @@ let ListView = class ListView extends Component {
                         const eventArgs = this.selectEventData(li, e);
                         const checkIcon = li.querySelector('.' + classNames.checkboxIcon);
                         merge(eventArgs, { isChecked: checkIcon.classList.contains(classNames.checked) });
-                        this.trigger('select', eventArgs);
+                        const checkboxElement = li.querySelector('.' + classNames.checkboxWrapper);
+                        const isCheckedBefore = checkIcon.classList.contains(classNames.checked);
+                        const isFocusedBefore = li.classList.contains(classNames.focused);
+                        this.handleCheckboxState(li, checkIcon, checkboxElement, isCheckedBefore, isFocusedBefore, eventArgs, false);
                     }
                 }
                 else if (li.classList.contains(classNames.hasChild)) {
@@ -1958,7 +1984,13 @@ let ListView = class ListView extends Component {
             }
             const eventArgs = this.selectEventData(li, e);
             merge(eventArgs, { isChecked: checkIcon ? checkIcon.classList.contains(classNames.checked) : false });
-            this.trigger('select', eventArgs);
+            if (!isNullOrUndefined(li)) {
+                const cbElement = li.querySelector('.' + classNames.checkboxWrapper);
+                const checkboxIcon = li.querySelector('.' + classNames.checkboxIcon);
+                const isCheckedBefore = checkboxIcon.classList.contains(classNames.checked);
+                const isFocusedBefore = li.classList.contains(classNames.focused);
+                this.handleCheckboxState(li, checkboxIcon, cbElement, isCheckedBefore, isFocusedBefore, eventArgs, false);
+            }
             this.updateSelectedId();
         }
     }
@@ -2033,8 +2065,9 @@ let ListView = class ListView extends Component {
         if (!isNullOrUndefined(this.scroll)) {
             EventHandler.remove(this.element, 'scroll', this.onListScroll);
         }
-        if (this.touchModule)
+        if (this.touchModule) {
             this.touchModule.destroy();
+        }
         this.touchModule = null;
     }
     removeFocus() {
@@ -2085,7 +2118,9 @@ let ListView = class ListView extends Component {
             const checkboxElement = li.querySelector('.' + classNames.checkboxWrapper);
             const checkIcon = checkboxElement.querySelector('.' + classNames.checkboxIcon + '.' + classNames.icon);
             this.removeHover();
-            if (!checkIcon.classList.contains(classNames.checked)) {
+            const isCheckedBefore = checkIcon.classList.contains(classNames.checked);
+            const isFocusedBefore = li.classList.contains(classNames.focused);
+            if (!isCheckedBefore) {
                 checkIcon.classList.add(classNames.checked);
                 li.classList.add(classNames.selected);
             }
@@ -2100,7 +2135,7 @@ let ListView = class ListView extends Component {
             if (this.enableVirtualization) {
                 this.virtualizationModule.setCheckboxLI(li, e);
             }
-            this.trigger('select', eventArgs);
+            this.handleCheckboxState(li, checkIcon, checkboxElement, isCheckedBefore, isFocusedBefore, eventArgs, true, textAreaFocus);
             this.setSelectedItemData(li);
             this.renderSubList(li);
         }
@@ -2168,6 +2203,10 @@ let ListView = class ListView extends Component {
                     this.selectedLI = li;
                     this.renderSubList(li);
                 }
+                else {
+                    li.classList.remove(classNames.selected);
+                    this.selectedLI = li;
+                }
             });
         }
     }
@@ -2381,6 +2420,9 @@ let ListView = class ListView extends Component {
             let ele = this.element.querySelector('[pid=\'' + uID + '\']');
             this.curDSLevel.push(uID);
             this.setViewDataSource(this.getSubDS());
+            if (this.enableVirtualization) {
+                this.virtualizationModule.updateDOMItemCount();
+            }
             if (!ele) {
                 const data = this.curViewDS;
                 ele = ListBase.createListFromJson(this.createElement, data, this.listBaseOption, this.curDSLevel.length, null, this);
@@ -2489,6 +2531,9 @@ let ListView = class ListView extends Component {
         }
         this.curDSLevel.pop();
         this.setViewDataSource(this.getSubDS());
+        if (this.enableVirtualization) {
+            this.virtualizationModule.updateDOMItemCount();
+        }
         let toUL = this.element.querySelector('[data-uid=\'' + pID + '\']');
         const fromUL = this.curUL;
         if (!toUL) {
@@ -3182,18 +3227,21 @@ class Virtualization {
      */
     uiVirtualization() {
         this.wireScrollEvent(false);
+        const isRendered = this.listViewInstance.isRendered;
+        const firstIndex = isRendered && !isNullOrUndefined(this.uiFirstIndex) ? this.uiFirstIndex : 0;
         const curViewDS = this.listViewInstance.curViewDS;
-        const firstDs = curViewDS.slice(0, 1);
+        const firstDs = curViewDS.slice(firstIndex, firstIndex + 1);
         this.listViewInstance.ulElement = this.listViewInstance.curUL = ListBase.createList(this.listViewInstance.createElement, firstDs, this.listViewInstance.listBaseOption, null, this.listViewInstance);
         this.listViewInstance.contentContainer = this.listViewInstance.createElement('div', { className: classNames.container });
         this.listViewInstance.element.appendChild(this.listViewInstance.contentContainer);
         this.listViewInstance.contentContainer.appendChild(this.listViewInstance.ulElement);
         this.listItemHeight = this.listViewInstance.ulElement.firstElementChild.getBoundingClientRect().height;
         this.expectedDomItemCount = this.ValidateItemCount(10000);
-        this.domItemCount = this.ValidateItemCount(Object.keys(this.listViewInstance.curViewDS).length);
-        this.uiFirstIndex = 0;
-        this.uiLastIndex = this.domItemCount - 1;
-        const otherDs = curViewDS.slice(1, this.domItemCount);
+        this.updateDOMItemCount();
+        const lastIndex = isRendered && !isNullOrUndefined(this.uiLastIndex) ? this.uiLastIndex : this.domItemCount - 1;
+        this.uiFirstIndex = firstIndex;
+        this.uiLastIndex = lastIndex;
+        const otherDs = curViewDS.slice(firstIndex + 1, lastIndex + 1);
         const listItems = ListBase.createListItemFromJson(this.listViewInstance.createElement, otherDs, this.listViewInstance.listBaseOption, null, null, this.listViewInstance);
         append(listItems, this.listViewInstance.ulElement);
         this.listViewInstance.liCollection = this.listViewInstance.curUL.querySelectorAll('li');
@@ -3202,11 +3250,14 @@ class Virtualization {
         this.bottomElement = this.listViewInstance.createElement('div');
         this.listViewInstance.ulElement.insertBefore(this.bottomElement, null);
         this.totalHeight = (Object.keys(curViewDS).length * this.listItemHeight) - (this.domItemCount * this.listItemHeight);
-        this.topElement.style.height = 0 + 'px';
-        this.bottomElement.style.height = this.totalHeight + 'px';
-        this.topElementHeight = 0;
-        this.bottomElementHeight = this.totalHeight;
-        this.listDiff = 0;
+        this.topElement.style.height = isRendered ? this.topElementHeight + 'px' : '0px';
+        this.bottomElement.style.height = isRendered ? (this.totalHeight - this.topElementHeight) + 'px' : this.totalHeight + 'px';
+        this.topElementHeight = isRendered ? this.topElementHeight : 0;
+        this.bottomElementHeight = isRendered ? (this.totalHeight - this.topElementHeight) : this.totalHeight;
+        this.listDiff = isRendered ? this.listDiff : 0;
+        if (isRendered) {
+            this.listViewInstance.element.scrollTop = this.listViewInstance.previousScrollTop;
+        }
         this.uiIndicesInitialization();
     }
     wireScrollEvent(destroy) {
@@ -3248,6 +3299,9 @@ class Virtualization {
         }
         return itemCount;
     }
+    updateDOMItemCount() {
+        this.domItemCount = this.ValidateItemCount(Object.keys(this.listViewInstance.curViewDS).length);
+    }
     uiIndicesInitialization() {
         this.uiIndices = { 'activeIndices': [], 'disabledItemIndices': [], 'hiddenItemIndices': [] };
         const data = this.listViewInstance.curViewDS;
@@ -3585,12 +3639,26 @@ class Virtualization {
                     };
                 }
                 if (this.listViewInstance.showCheckBox) {
-                    eventArgs.isChecked = isChecked;
-                    this.listViewInstance.trigger('select', eventArgs);
+                    this.listViewInstance.trigger('select', eventArgs, (observedArgs) => {
+                        if (observedArgs.cancel) {
+                            if (!isChecked) {
+                                eventArgs.isChecked = isChecked;
+                                this.uiIndices.activeIndices.push(resutJSON.index);
+                            }
+                            else {
+                                eventArgs.isChecked = !isChecked;
+                                this.uiIndices.activeIndices.splice(this.uiIndices.activeIndices.indexOf(resutJSON.index), 1);
+                            }
+                        }
+                    });
                 }
                 else if (!isSelected) {
                     this.listViewInstance.removeSelect();
-                    this.listViewInstance.trigger('select', eventArgs);
+                    this.listViewInstance.trigger('select', eventArgs, (observedArgs) => {
+                        if (observedArgs.cancel) {
+                            this.activeIndex = undefined;
+                        }
+                    });
                 }
             }
         }