@syncfusion/ej2-schedule 26.1.40 → 26.1.41-16103

package/src/schedule/actions/virtual-scroll.js

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { append, addClass, remove, isNullOrUndefined, setStyleAttribute, createElement, prepend } from '@syncfusion/ej2-base';
+import { append, addClass, remove, isNullOrUndefined, setStyleAttribute, createElement, prepend, removeClass } from '@syncfusion/ej2-base';
 import * as events from '../base/constant';
 import * as cls from '../base/css-constant';
 import * as util from '../base/util';
@@ -14,6 +14,8 @@ var VirtualScroll = /** @class */ (function () {
         this.renderedLength = 0;
         this.averageRowHeight = 0;
         this.startIndex = 0;
+        this.existingDataCollection = [];
+        this.enableTransition = true;
         this.parent = parent;
         this.addEventListener();
     }
@@ -86,10 +88,10 @@ var VirtualScroll = /** @class */ (function () {
     };
     VirtualScroll.prototype.setItemSize = function () {
         if (this.isHorizontalScroll) {
-            this.itemSize = util.getElementWidthFromClass(this.parent.activeView.element, cls.WORK_CELLS_CLASS) || this.itemSize;
+            this.itemSize = util.getElementWidthFromClass(this.parent.activeView.element, cls.WORK_CELLS_CLASS, this.parent.uiStateValues.isTransformed) || this.itemSize;
         }
         else {
-            this.itemSize = util.getElementHeightFromClass(this.parent.activeView.element, cls.WORK_CELLS_CLASS) || this.itemSize;
+            this.itemSize = this.parent.getElementHeightFromClass(this.parent.activeView.element, cls.WORK_CELLS_CLASS) || this.itemSize;
         }
     };
     VirtualScroll.prototype.refreshLayout = function () {
@@ -103,11 +105,16 @@ var VirtualScroll = /** @class */ (function () {
             var resWrap = this.parent.element.querySelector('.' + cls.RESOURCE_COLUMN_WRAP_CLASS);
             var conWrap = this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS);
             var eventWrap = this.parent.element.querySelector('.' + cls.EVENT_TABLE_CLASS);
+            if (!this.parent.rowAutoHeight) {
+                this.enableTransition = false;
+                removeClass([conWrap, resWrap], 'e-transition');
+            }
             var firstTDIndex = parseInt(resWrap.querySelector('tbody td').getAttribute('data-group-index'), 10);
             var endIndex = (firstTDIndex + this.renderedLength);
             firstTDIndex = (endIndex > this.parent.resourceBase.expandedResources.length) ?
                 (this.parent.resourceBase.expandedResources.length - this.renderedLength) : firstTDIndex;
             firstTDIndex = firstTDIndex < 0 ? 0 : firstTDIndex;
+            this.existingDataCollection = this.parent.resourceBase.renderedResources;
             this.parent.resourceBase.renderedResources = this.parent.resourceBase.expandedResources.slice(firstTDIndex, endIndex);
             if (this.parent.resourceBase.renderedResources.length > 0) {
                 this.updateContent(resWrap, conWrap, eventWrap, this.parent.resourceBase.renderedResources);
@@ -157,6 +164,7 @@ var VirtualScroll = /** @class */ (function () {
             var scrollHeight = this.parent.rowAutoHeight ?
                 (conTable.offsetHeight - conWrap.offsetHeight) : this.bufferCount * this.itemSize;
             var resCollection = [];
+            this.existingDataCollection = this.parent.resourceBase.renderedResources;
             if ((conWrap.scrollTop) - this.translateY < 0) {
                 resCollection = this.upScroll(conWrap, firstTDIndex);
             }
@@ -360,56 +368,133 @@ var VirtualScroll = /** @class */ (function () {
             this.parent.element.focus();
         }
         for (var i = 0; i < renderedLength; i++) {
-            remove(resWrap.querySelector('tbody tr'));
-            remove(conWrap.querySelector('tbody tr'));
             remove(eventWrap.querySelector('div'));
         }
         this.parent.resourceBase.renderedResources = resCollection;
+        var currentGroupIndices = this.parent.activeView.getGroupIndices(resCollection);
+        var previousGroupIndices = this.parent.activeView.getGroupIndices(this.existingDataCollection);
+        var newGroupIndices = currentGroupIndices.filter(function (index) { return previousGroupIndices.indexOf(index) < 0; });
+        var resWrapRows = Array.from(resWrap.querySelectorAll('tbody tr'));
+        var conWrapRows = Array.from(conWrap.querySelectorAll('tbody tr'));
+        var resWrapBody = resWrap.querySelector('tbody');
+        var conWrapBody = conWrap.querySelector('tbody');
+        this.removeObsoleteRows(resWrapRows, currentGroupIndices);
+        this.removeObsoleteRows(conWrapRows, currentGroupIndices);
         var resourceRows = this.parent.resourceBase.getContentRows(resCollection, true);
         var contentRows = this.parent.activeView.getContentRows();
         var eventRows = this.parent.activeView.getEventRows(resCollection.length);
-        append(resourceRows, resWrap.querySelector('tbody'));
-        append(contentRows, conWrap.querySelector('tbody'));
+        for (var i = 0; i < newGroupIndices.length; i++) {
+            var index = currentGroupIndices.indexOf(newGroupIndices[parseInt(i.toString(), 10)]);
+            if (index === 0) {
+                prepend([resourceRows[parseInt(i.toString(), 10)]], resWrapBody);
+                prepend([contentRows[parseInt(i.toString(), 10)]], conWrapBody);
+            }
+            else if (resWrapBody && conWrapBody && resWrapBody.children[parseInt(index.toString(), 10)] &&
+                conWrapBody.children[parseInt(index.toString(), 10)]) {
+                resWrapBody.insertBefore(resourceRows[parseInt(i.toString(), 10)], resWrapBody.children[parseInt(index.toString(), 10)]);
+                conWrapBody.insertBefore(contentRows[parseInt(i.toString(), 10)], conWrapBody.children[parseInt(index.toString(), 10)]);
+            }
+            else {
+                append([resourceRows[parseInt(i.toString(), 10)]], resWrapBody);
+                append([contentRows[parseInt(i.toString(), 10)]], conWrapBody);
+            }
+        }
         append(eventRows, eventWrap);
     };
+    VirtualScroll.prototype.removeObsoleteRows = function (elements, currentGroupIndices) {
+        elements.forEach(function (element) {
+            var groupIndex = parseInt(element.firstElementChild.getAttribute('data-group-index'), 10);
+            if (currentGroupIndices.indexOf(groupIndex) < 0) {
+                remove(element);
+            }
+        });
+    };
     VirtualScroll.prototype.updateHorizontalContent = function (conWrap, resCollection) {
+        this.existingDataCollection = this.parent.resourceBase.expandedResources;
         this.parent.resourceBase.expandedResources = resCollection;
         var selectedEle = this.parent.getSelectedCells();
         this.focusedEle = selectedEle[selectedEle.length - 1] || this.focusedEle;
-        var renderedLength = conWrap.querySelectorAll('tbody tr').length;
+        var tbody = conWrap.querySelector('tbody');
+        var renderedRows = Array.from(tbody.querySelectorAll('tr'));
+        if (this.parent.currentView === 'Month') {
+            this.updateMonthViewContent(conWrap, resCollection);
+        }
+        else {
+            this.updateOtherViewContent(conWrap, resCollection, renderedRows);
+        }
+    };
+    VirtualScroll.prototype.updateMonthViewContent = function (conWrap, resCollection) {
+        var renderedLength = conWrap.querySelectorAll(' tr').length;
         for (var i = 0; i < renderedLength; i++) {
             remove(conWrap.querySelector('tbody tr'));
         }
-        if (this.parent.currentView === 'Month') {
-            if (this.parent.activeViewOptions.group.byDate) {
-                this.parent.activeView.colLevels[0] = resCollection;
-            }
-            else {
-                this.parent.activeView.colLevels[this.parent.activeView.colLevels.length - 2] = resCollection;
-            }
-            var contentRows = this.parent.activeView.getContentRows();
-            append(contentRows, conWrap.querySelector('tbody'));
+        if (this.parent.activeViewOptions.group.byDate) {
+            this.parent.activeView.colLevels[0] = resCollection;
         }
         else {
-            var col = [].slice.call(conWrap.querySelector('colgroup').children);
-            for (var i = 0; i < col.length; i++) {
-                remove(col[parseInt(i.toString(), 10)]);
-            }
-            this.parent.activeView.colLevels[this.parent.activeView.colLevels.length - 1] = resCollection;
-            var contentRows = this.parent.activeView.getContentRows();
-            var table = conWrap.querySelector('table');
-            var thead = conWrap.querySelector('thead');
-            var colGroupEle_1 = conWrap.querySelector('colgroup');
-            resCollection.forEach(function () {
-                colGroupEle_1.appendChild(createElement('col'));
+            this.parent.activeView.colLevels[this.parent.activeView.colLevels.length - 2] = resCollection;
+        }
+        var contentRows = this.parent.activeView.getContentRows();
+        append(contentRows, conWrap.querySelector('tbody'));
+    };
+    VirtualScroll.prototype.updateOtherViewContent = function (conWrap, resCollection, renderedRows) {
+        var tbody = conWrap.querySelector('tbody');
+        var colGroup = conWrap.querySelector('colgroup');
+        var thead = conWrap.querySelector('thead');
+        var table = conWrap.querySelector('table');
+        this.parent.activeView.colLevels[this.parent.activeView.colLevels.length - 1] = resCollection;
+        var newGroupIndices = new Set(resCollection.map(function (data) { return data.groupIndex; }));
+        renderedRows.forEach(function (row) {
+            var tdElements = row.querySelectorAll('td');
+            tdElements.forEach(function (td) {
+                var groupIndex = parseInt(td.getAttribute('data-group-index'), 10);
+                if (!newGroupIndices.has(groupIndex)) {
+                    td.remove();
+                }
             });
-            thead.appendChild(this.parent.eventBase.createEventWrapper('', this.startIndex > 0 ? this.startIndex : 0));
-            if (this.parent.activeViewOptions.timeScale.enable) {
-                thead.appendChild(this.parent.eventBase.createEventWrapper('timeIndicator'));
-            }
-            prepend([thead], table);
-            append(contentRows, conWrap.querySelector('tbody'));
+        });
+        var col = [].slice.call(conWrap.querySelector('colgroup').children);
+        for (var i = 0; i < col.length; i++) {
+            remove(col[parseInt(i.toString(), 10)]);
+        }
+        resCollection.forEach(function () { return colGroup.appendChild(createElement('col')); });
+        var tHead = [].slice.call(conWrap.querySelector('thead').children);
+        for (var i = 0; i < tHead.length; i++) {
+            remove(tHead[parseInt(i.toString(), 10)]);
+        }
+        thead.appendChild(this.parent.eventBase.createEventWrapper('', this.startIndex > 0 ? this.startIndex : 0));
+        if (this.parent.activeViewOptions.timeScale.enable) {
+            thead.appendChild(this.parent.eventBase.createEventWrapper('timeIndicator'));
         }
+        prepend([thead], table);
+        var contentRows = this.parent.activeView.getContentRows();
+        this.mergeNewTdData(tbody, contentRows);
+    };
+    VirtualScroll.prototype.mergeNewTdData = function (tbody, contentRows) {
+        var existingRows = Array.from(tbody.querySelectorAll('tr'));
+        existingRows.forEach(function (existingRow, rowIndex) {
+            if (rowIndex < contentRows.length) {
+                var newRow = contentRows[parseInt(rowIndex.toString(), 10)];
+                var existingTds_1 = Array.from(existingRow.querySelectorAll('td'));
+                var newTds = Array.from(newRow.querySelectorAll('td'));
+                newTds.forEach(function (newTd) {
+                    var newGroupIndex = parseInt(newTd.getAttribute('data-group-index').toString(), 10);
+                    var inserted = false;
+                    for (var _i = 0, existingTds_2 = existingTds_1; _i < existingTds_2.length; _i++) {
+                        var existingTd = existingTds_2[_i];
+                        var existingGroupIndex = parseInt(existingTd.getAttribute('data-group-index').toString(), 10);
+                        if (newGroupIndex < existingGroupIndex) {
+                            existingRow.insertBefore(newTd, existingTd);
+                            inserted = true;
+                            break;
+                        }
+                    }
+                    if (!inserted) {
+                        existingRow.appendChild(newTd);
+                    }
+                });
+            }
+        });
     };
     VirtualScroll.prototype.getBufferCollection = function (startIndex, endIndex) {
         return this.parent.resourceBase.expandedResources.slice(startIndex, endIndex);

package/src/schedule/base/interface.d.ts

@@ -24,7 +24,7 @@ export interface ActionEventArgs extends ToolbarActionArgs {
     /** Returns the appropriate deleted data based on the action. */
     deletedRecords?: Record<string, any>[];
 }
-/** */
+/** @deprecated */
 export interface ToolbarActionArgs extends BaseEventArgs {
     /** Returns the request type of the current action. */
     requestType: string;
@@ -247,6 +247,8 @@ export interface DragEventArgs extends BaseEventArgs {
     scroll?: ScrollOptions;
     /** Defines the date range navigation action while dragging. */
     navigation?: NavigateOptions;
+    /** Allows to drag the events outside the currently rendered date range */
+    dragWithinRange?: boolean;
 }
 /** An interface that holds options of virtual scroll action. */
 export interface ScrollEventArgs extends BaseEventArgs {
@@ -447,6 +449,7 @@ export interface IRenderer {
     getAdjustedDate?(date: Date): Date;
     viewIndex: number;
     colLevels: TdData[][];
+    getGroupIndices(dataCollection?: TdData[]): number[];
 }
 /** @private */
 export interface EJ2Instance extends HTMLElement {
@@ -525,10 +528,11 @@ export interface UIStateArgs {
     scheduleHeight?: number;
     isTapHold?: boolean;
     isTouchScroll?: boolean;
+    isTransformed?: boolean;
 }
 /**
  *  @private
-
+ *  @deprecated
  */
 export interface TreeViewArgs {
     resourceChild?: TreeViewArgs[];

package/src/schedule/base/resource.js

@@ -96,7 +96,11 @@ var ResourceBase = /** @class */ (function () {
         var resColl = this.resourceCollection;
         var tr = createElement('tr');
         var td = createElement('td', { attrs: { tabindex: isVirtualScroll ? '-1' : '0' } });
+        var existingGroupIndices = this.parent.activeView.getGroupIndices();
         for (var i = 0; i < resData.length; i++) {
+            if (existingGroupIndices.length > 0 && existingGroupIndices.indexOf(resData[parseInt(i.toString(), 10)].groupIndex) > -1) {
+                continue;
+            }
             var ntd = td.cloneNode();
             rIndex = util.findIndexInData(resColl, 'name', resData[parseInt(i.toString(), 10)].resource.name);
             if (rIndex === resColl.length - 1) {
@@ -277,6 +281,7 @@ var ResourceBase = /** @class */ (function () {
         this.setExpandedResources();
         var resourceCount = this.parent.virtualScrollModule.getRenderedCount();
         var startIndex = this.expandedResources.indexOf(this.renderedResources[0]);
+        this.parent.virtualScrollModule.existingDataCollection = this.renderedResources;
         this.renderedResources = this.expandedResources.slice(startIndex, startIndex + resourceCount);
         if (this.renderedResources.length < resourceCount) {
             var sIndex = this.expandedResources.length - resourceCount;