@syncfusion/ej2-lists 20.4.42 → 20.4.50

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

@@ -1436,7 +1436,7 @@ let ListView = class ListView extends Component {
         this.currentLiElements = [];
         this.isNestedList = false;
         this.selectedData = [];
-        this.selectedId = [];
+        this.selectedId = this.enablePersistence ? this.selectedId : [];
         this.LISTVIEW_TEMPLATE_ID = `${this.element.id}${LISTVIEW_TEMPLATE_PROPERTY}`;
         this.LISTVIEW_GROUPTEMPLATE_ID = `${this.element.id}${LISTVIEW_GROUPTEMPLATE_PROPERTY}`;
         this.LISTVIEW_HEADERTEMPLATE_ID = `${this.element.id}${LISTVIEW_HEADERTEMPLATE_PROPERTY}`;
@@ -1465,7 +1465,13 @@ let ListView = class ListView extends Component {
             args.item.firstElementChild.classList.add(classNames.checkbox);
             if (typeof this.dataSource[0] !== 'string' && typeof this.dataSource[0] !== 'number') {
                 fieldData = getFieldValues(args.curData, this.listBaseOption.fields);
-                if (fieldData[this.listBaseOption.fields.isChecked]) {
+                if (this.enablePersistence && !isNullOrUndefined(this.selectedId)) {
+                    let index = this.selectedId.findIndex(e => e == fieldData[this.listBaseOption.fields.id].toString());
+                    if (index != -1) {
+                        this.checkInternally(args, checkboxElement);
+                    }
+                }
+                else if (fieldData[this.listBaseOption.fields.isChecked]) {
                     this.checkInternally(args, checkboxElement);
                 }
             }
@@ -1530,6 +1536,7 @@ let ListView = class ListView extends Component {
                 checkboxIcon.parentElement.setAttribute('aria-checked', checked ? 'true' : 'false');
             }
             this.setSelectedItemData(liElement);
+            this.updateSelectedId();
         }
     }
     /**
@@ -1572,6 +1579,7 @@ let ListView = class ListView extends Component {
             if (this.enableVirtualization) {
                 this.virtualizationModule.checkedItem(checked);
             }
+            this.updateSelectedId();
         }
     }
     setCheckbox() {
@@ -1687,6 +1695,7 @@ let ListView = class ListView extends Component {
                 }
             }
         }
+        this.updateSelectedId();
     }
     removeElement(element) {
         return element && element.parentNode && element.parentNode.removeChild(element);
@@ -1875,6 +1884,7 @@ 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);
+            this.updateSelectedId();
         }
     }
     keyActionHandler(e) {
@@ -2338,7 +2348,7 @@ let ListView = class ListView extends Component {
         if (this.enableVirtualization) {
             if (Object.keys(this.dataSource).length) {
                 if ((this.template || this.groupTemplate) && !this.virtualizationModule.isNgTemplate()) {
-                    if (this.isReact) {
+                    if (this.isReact || this.isVue) {
                         if (typeof this.template == "string") {
                             this.listBaseOption.template = null;
                         }
@@ -2543,6 +2553,16 @@ let ListView = class ListView extends Component {
         }
         return parentId;
     }
+    updateSelectedId() {
+        this.selectedId = [];
+        const liCollection = this.curUL.getElementsByClassName(classNames.selected);
+        for (let i = 0; i < liCollection.length; i++) {
+            const tempData = this.getItemData(liCollection[i]);
+            if (tempData[this.listBaseOption.fields.id]) {
+                this.selectedId.push(tempData[this.listBaseOption.fields.id]);
+            }
+        }
+    }
     /**
      * Gets the details of the currently selected item from the list items.
      *
@@ -2972,7 +2992,7 @@ let ListView = class ListView extends Component {
     getPersistData() {
         return this.addOnPersist(['cssClass', 'enableRtl', 'htmlAttributes',
             'enable', 'fields', 'animation', 'headerTitle',
-            'sortOrder', 'showIcon', 'height', 'width', 'showCheckBox', 'checkBoxPosition']);
+            'sortOrder', 'showIcon', 'height', 'width', 'showCheckBox', 'checkBoxPosition', 'selectedId']);
     }
 };
 __decorate([
@@ -3066,6 +3086,14 @@ class Virtualization {
     isNgTemplate() {
         return !isNullOrUndefined(this.listViewInstance.templateRef) && typeof this.listViewInstance.templateRef !== 'string';
     }
+    /**
+     * Checks if the platform is a Vue and its template property is a function type.
+     *
+     * @returns {boolean} indicating the result of the check
+     */
+    isVueFunctionTemplate() {
+        return this.listViewInstance.isVue && typeof this.listViewInstance.template === 'function';
+    }
     /**
      * For internal use only.
      *
@@ -3851,10 +3879,14 @@ class Virtualization {
                     this.listViewInstance.template = div.innerHTML;
                 }
             }
+            if (this.isVueFunctionTemplate())
+                return;
             template.innerHTML = this.listViewInstance.template;
             this.listViewInstance.template = virtualTemplate;
         }
         else {
+            if (this.isVueFunctionTemplate())
+                return;
             template.innerHTML = this.listViewInstance.template || commonTemplate;
         }
         // eslint-disable-next-line
@@ -4125,7 +4157,7 @@ class Virtualization {
     }
     updateUI(element, index, targetElement) {
         // eslint-disable-next-line @typescript-eslint/ban-types
-        const onChange = this.isNgTemplate() ? this.onNgChange : this.onChange;
+        const onChange = this.isNgTemplate() ? this.onNgChange : (this.isVueFunctionTemplate()) ? this.onVuechange : this.onChange;
         if (this.listViewInstance.template || this.listViewInstance.groupTemplate) {
             const curViewDS = this.listViewInstance.curViewDS[index];
             // eslint-disable-next-line
@@ -4142,6 +4174,22 @@ class Virtualization {
             this.listViewInstance.ulElement.insertBefore(element, targetElement);
         }
     }
+    /**
+     * Handles the UI change in vue for the list view.
+     *
+     * @param {DataSource} newData - The new data source for the list view.
+     * @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, 
+        // eslint-disable-next-line
+        [newData], virtualThis.listViewInstance.listBaseOption, null, null, virtualThis.listViewInstance);
+        while (listElement.lastChild) {
+            listElement.removeChild(listElement.lastChild);
+        }
+        listElement.appendChild(liItem[0].firstChild);
+    }
     onNgChange(newData, listElement, virtualThis) {
         // compile given target element with template for new data
         // eslint-disable-next-line
@@ -4379,7 +4427,7 @@ let Sortable = Sortable_1 = class Sortable extends Base {
             this.target = null;
             this.curTarget = null;
             remove(e.helper);
-            getComponent(this.element, Draggable).intDestroy(e.event);
+            getComponent(this.element, 'draggable').intDestroy(e.event);
         };
         this.bind();
     }