@syncfusion/ej2-schedule 26.1.39 → 26.1.41

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

@@ -107,15 +107,16 @@ const MS_PER_MINUTE = 60000;
  *
  * @param {Element} container Accepts the DOM element
  * @param {string} elementClass Accepts the element class
+ * @param {boolean} isTransformed Accepts the boolean value that indicates the status of the transform style applied to the element
  * @returns {number} Returns the height of the element
  */
-function getElementHeightFromClass(container, elementClass) {
+function getElementHeightFromClass(container, elementClass, isTransformed) {
     let height = 0;
     const el = createElement('div', { className: elementClass }).cloneNode();
     el.style.visibility = 'hidden';
     el.style.position = 'absolute';
     container.appendChild(el);
-    height = getElementHeight(el);
+    height = getElementHeight(el, isTransformed);
     remove(el);
     return height;
 }
@@ -124,15 +125,16 @@ function getElementHeightFromClass(container, elementClass) {
  *
  * @param {Element} container Accepts the DOM element
  * @param {string} elementClass Accepts the element class
+ * @param {boolean} isTransformed Accepts the boolean value that indicates the status of the transform style applied to the element
  * @returns {number} Returns the width of the element
  */
-function getElementWidthFromClass(container, elementClass) {
+function getElementWidthFromClass(container, elementClass, isTransformed) {
     let width = 0;
     const el = createElement('div', { className: elementClass }).cloneNode();
     el.style.visibility = 'hidden';
     el.style.position = 'absolute';
     container.appendChild(el);
-    width = getElementWidth(el);
+    width = getElementWidth(el, isTransformed);
     remove(el);
     return width;
 }
@@ -523,28 +525,31 @@ function capitalizeFirstWord(inputString, type) {
  * Method to get element cell width
  *
  * @param {HTMLElement} element Accepts the DOM element
+ * @param {boolean} isTransformed Accepts the boolean value that indicates the status of the transform style applied to the element
  * @returns {number} Returns the width of the given element
  */
-function getElementWidth(element) {
-    return document.body.style.transform.includes('scale') ? element.offsetWidth : element.getBoundingClientRect().width;
+function getElementWidth(element, isTransformed) {
+    return isTransformed ? element.offsetWidth : element.getBoundingClientRect().width;
 }
 /**
  * Method to get element cell Height
  *
  * @param {HTMLElement} element Accepts the DOM element
+ * @param {boolean} isTransformed Accepts the boolean value that indicates the status of the transform style applied to the element
  * @returns {number} Returns the Height of the given element
  */
-function getElementHeight(element) {
-    return document.body.style.transform.includes('scale') ? element.offsetHeight : element.getBoundingClientRect().height;
+function getElementHeight(element, isTransformed) {
+    return isTransformed ? element.offsetHeight : element.getBoundingClientRect().height;
 }
 /**
  * Method to get element cell Top
  *
  * @param {HTMLElement} element Accepts the DOM element
+ * @param {boolean} isTransformed Accepts the boolean value that indicates the status of the transform style applied to the element
  * @returns {number} Returns the top value of the given element
  */
-function getElementTop(element) {
-    return document.body.style.transform.includes('scale') ? element.offsetTop : element.getBoundingClientRect().top;
+function getElementTop(element, isTransformed) {
+    return isTransformed ? element.offsetTop : element.getBoundingClientRect().top;
 }
 
 /**
@@ -1910,6 +1915,7 @@ class ScheduleTouch {
                 this.parent.selectedElements = [];
                 this.parent.eventBase.getSelectedEventElements(target);
                 if (this.parent.resizeModule && closest(e.originalEvent.target, '.' + EVENT_RESIZE_CLASS)) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     this.parent.resizeModule.resizeStart(e.originalEvent);
                 }
             }
@@ -6841,7 +6847,7 @@ class VerticalEvent extends EventBase {
             this.parent.crudModule.crudObj.isCrudAction = false;
         }
         this.parent.renderTemplates(() => {
-            if (this.parent.isReact && this.parent.activeViewOptions.eventTemplate) {
+            if (this.parent && this.parent.isReact && this.parent.activeViewOptions.eventTemplate) {
                 const wraps = [].slice.call(this.parent.element.querySelectorAll('.' + APPOINTMENT_WRAPPER_HIDDEN_CLASS));
                 removeClass(wraps, APPOINTMENT_WRAPPER_HIDDEN_CLASS);
             }
@@ -6855,7 +6861,7 @@ class VerticalEvent extends EventBase {
             this.resources = this.parent.resourceBase.renderedResources;
         }
         this.cellHeight =
-            parseFloat(getElementHeight(this.parent.element.querySelector('.e-content-wrap tbody tr')).toFixed(2));
+            parseFloat(this.parent.getElementHeight(this.parent.element.querySelector('.e-content-wrap tbody tr')).toFixed(2));
         this.dateRender[0] = this.parent.activeView.renderDates;
         if (this.parent.activeViewOptions.group.resources.length > 0) {
             for (let i = 0, len = this.resources.length; i < len; i++) {
@@ -6939,7 +6945,7 @@ class VerticalEvent extends EventBase {
         const resources = this.getResourceList();
         let dateCount = this.getStartCount();
         let isRender;
-        const appHeight = eventType === 'allDayEvents' ? getElementHeightFromClass(this.element.querySelector('.' + ALLDAY_APPOINTMENT_WRAPPER_CLASS), APPOINTMENT_CLASS) : 0;
+        const appHeight = eventType === 'allDayEvents' ? this.parent.getElementHeightFromClass(this.element.querySelector('.' + ALLDAY_APPOINTMENT_WRAPPER_CLASS), APPOINTMENT_CLASS) : 0;
         const allDayRowTop = eventType === 'allDayEvents' && this.allDayElement.length > 0 ? this.allDayElement[0].offsetTop : 0;
         for (const resource of resources) {
             isRender = true;
@@ -7652,7 +7658,7 @@ class MonthEvent extends EventBase {
             this.monthHeaderHeight = wrapper.offsetTop - cellTd.offsetTop;
             cellTd.removeChild(wrapper);
         }
-        this.eventHeight = getElementHeightFromClass(this.element, APPOINTMENT_CLASS);
+        this.eventHeight = this.parent.getElementHeightFromClass(this.element, APPOINTMENT_CLASS);
         const selector = '.' + CONTENT_TABLE_CLASS + ' tbody tr';
         this.addCellHeight(selector, this.eventHeight, (this.parent.currentView === 'Month' ? EVENT_GAP : 2), this.monthHeaderHeight, this.moreIndicatorHeight);
         const scrollTop = conWrap.scrollTop;
@@ -7731,8 +7737,8 @@ class MonthEvent extends EventBase {
             });
         }
         const cellDetail = this.workCells[this.parent.activeView.isTimelineView() ? 0 : this.workCells.length - 1];
-        this.cellWidth = getElementWidth(cellDetail);
-        this.cellHeight = getElementHeight(cellDetail);
+        this.cellWidth = this.parent.getElementWidth(cellDetail);
+        this.cellHeight = this.parent.getElementHeight(cellDetail);
         this.dateRender = dateRender;
         const filteredDates = this.getRenderedDates(dateRender);
         this.getSlotDates(workDays || this.parent.activeViewOptions.workDays);
@@ -8285,7 +8291,7 @@ class TimelineEvent extends MonthEvent {
             this.parent.activeViewOptions.headerRows.slice(-1)[0].option !== 'Hour') {
             this.renderType = 'day';
             const workCell = this.content.querySelector('.' + WORK_CELLS_CLASS);
-            this.cellWidth = getElementWidth(workCell) / +(workCell.getAttribute('colspan') || 1);
+            this.cellWidth = this.parent.getElementWidth(workCell) / +(workCell.getAttribute('colspan') || 1);
             this.slotsPerDay = 1;
         }
         else {
@@ -8448,14 +8454,14 @@ class TimelineEvent extends MonthEvent {
                 this.wireAppointmentEvents(appointmentElement, event);
                 if (this.parent.rowAutoHeight) {
                     const conWrap = this.parent.element.querySelector('.' + CONTENT_WRAP_CLASS);
-                    const conWidth = getElementWidth(conWrap);
+                    const conWidth = this.parent.getElementWidth(conWrap);
                     const isWithoutScroll = conWrap.offsetHeight === conWrap.clientHeight &&
                         conWrap.offsetWidth === conWrap.clientWidth;
                     this.renderEventElement(event, appointmentElement, cellTd);
                     const firstChild = this.getFirstChild(resIndex);
                     this.updateCellHeight(firstChild, height);
                     if (isWithoutScroll &&
-                        (conWrap.offsetWidth > conWrap.clientWidth || conWidth !== getElementWidth(conWrap))) {
+                        (conWrap.offsetWidth > conWrap.clientWidth || conWidth !== this.parent.getElementWidth(conWrap))) {
                         this.adjustAppointments(conWidth);
                     }
                 }
@@ -8573,7 +8579,7 @@ class TimelineEvent extends MonthEvent {
     }
     adjustAppointments(conWidth) {
         const tr = this.parent.element.querySelector('.' + CONTENT_TABLE_CLASS + ' tbody tr');
-        const actualCellWidth = getElementWidth(this.workCells[0]);
+        const actualCellWidth = this.parent.getElementWidth(this.workCells[0]);
         this.cellWidth = actualCellWidth / +(this.workCells[0].getAttribute('colspan') || 1);
         const currentPercentage = (actualCellWidth * tr.children.length) / (conWidth / 100);
         const apps = [].slice.call(this.parent.element.querySelectorAll('.' + APPOINTMENT_CLASS));
@@ -8933,11 +8939,11 @@ class InlineEdit {
             const allDayElements = [].slice.call(this.parent.element.querySelectorAll('.' + ALLDAY_APPOINTMENT_CLASS));
             let allDayLevel = 0;
             if (allDayElements.length > 0) {
-                allDayLevel = Math.floor(getElementHeight(this.parent.element.querySelector('.' + ALLDAY_ROW_CLASS)) /
+                allDayLevel = Math.floor(this.parent.getElementHeight(this.parent.element.querySelector('.' + ALLDAY_ROW_CLASS)) /
                     allDayElements[0].offsetHeight) - 1;
             }
             verticalEvent.allDayLevel = allDayLevel;
-            const appHeight = getElementHeightFromClass(this.parent.element.querySelector('.' + ALLDAY_APPOINTMENT_WRAPPER_CLASS), APPOINTMENT_CLASS);
+            const appHeight = this.parent.getElementHeightFromClass(this.parent.element.querySelector('.' + ALLDAY_APPOINTMENT_WRAPPER_CLASS), APPOINTMENT_CLASS);
             const cellTop = verticalEvent.allDayElement.length > 0 ? verticalEvent.allDayElement[0].offsetTop : 0;
             verticalEvent.renderAllDayEvents(saveObj, index, resIndex, daysCount, this.parent.allowInline, cellTop, appHeight);
         }
@@ -8965,7 +8971,7 @@ class InlineEdit {
         monthEvent.cellWidth = monthEvent.workCells[0].offsetWidth;
         monthEvent.cellHeight = monthEvent.workCells[0].offsetHeight;
         monthEvent.eventHeight =
-            getElementHeightFromClass(this.parent.monthModule.element || monthEvent.element, APPOINTMENT_CLASS);
+            this.parent.getElementHeightFromClass(this.parent.monthModule.element || monthEvent.element, APPOINTMENT_CLASS);
         monthEvent.getSlotDates(workDays);
         const filteredDates = monthEvent.getRenderedDates(renderDates);
         const spannedEvents = monthEvent.splitEvent(saveObject, filteredDates || renderDates);
@@ -8988,7 +8994,7 @@ class InlineEdit {
         const dayLength = this.parent.element.querySelectorAll('.' + CONTENT_TABLE_CLASS + ' tbody tr').length === 0 ?
             0 : this.parent.element.querySelectorAll('.' + CONTENT_TABLE_CLASS + ' tbody tr')[0].children.length;
         timelineView.slotsPerDay = dayLength / timelineView.dateRender.length;
-        timelineView.eventHeight = getElementHeightFromClass(timelineView.element, APPOINTMENT_CLASS);
+        timelineView.eventHeight = this.parent.getElementHeightFromClass(timelineView.element, APPOINTMENT_CLASS);
         timelineView.renderEvents(saveObject, resIndex);
     }
     getEventDaysCount(saveObj) {
@@ -12170,11 +12176,14 @@ class EventWindow {
                     this.recurrenceEditor = null;
                 }
                 this.destroyComponents();
-                const formElements = [].slice.call(form.children);
-                for (const element of formElements) {
-                    remove(element);
-                }
                 this.parent.resetTemplates(['editorTemplate']);
+                EventHandler.clearEvents(form);
+                if (!this.parent.isReact) {
+                    const formElements = [].slice.call(form.children);
+                    for (const element of formElements) {
+                        remove(element);
+                    }
+                }
             }
             const templateId = this.parent.element.id + '_editorTemplate';
             const tempEle = [].slice.call(this.parent.getEditorTemplate()(args || {}, this.parent, 'editorTemplate', templateId, false));
@@ -12768,6 +12777,10 @@ class EventWindow {
         if (!isNullOrUndefined(descriptionRule)) {
             rules[this.parent.eventSettings.fields.description.name] = descriptionRule;
         }
+        if (this.fieldValidator) {
+            this.fieldValidator.destroy();
+            this.fieldValidator = null;
+        }
         this.fieldValidator = new FieldValidator();
         this.fieldValidator.renderFormValidator(form, rules, this.element, this.parent.locale);
     }
@@ -13782,6 +13795,7 @@ class VirtualScroll {
         this.renderedLength = 0;
         this.averageRowHeight = 0;
         this.startIndex = 0;
+        this.existingDataCollection = [];
         this.parent = parent;
         this.addEventListener();
     }
@@ -13854,10 +13868,10 @@ class VirtualScroll {
     }
     setItemSize() {
         if (this.isHorizontalScroll) {
-            this.itemSize = getElementWidthFromClass(this.parent.activeView.element, WORK_CELLS_CLASS) || this.itemSize;
+            this.itemSize = getElementWidthFromClass(this.parent.activeView.element, WORK_CELLS_CLASS, this.parent.uiStateValues.isTransformed) || this.itemSize;
         }
         else {
-            this.itemSize = getElementHeightFromClass(this.parent.activeView.element, WORK_CELLS_CLASS) || this.itemSize;
+            this.itemSize = this.parent.getElementHeightFromClass(this.parent.activeView.element, WORK_CELLS_CLASS) || this.itemSize;
         }
     }
     refreshLayout() {
@@ -14134,43 +14148,90 @@ class VirtualScroll {
         append(eventRows, eventWrap);
     }
     updateHorizontalContent(conWrap, resCollection) {
+        this.existingDataCollection = this.parent.resourceBase.expandedResources;
         this.parent.resourceBase.expandedResources = resCollection;
         const selectedEle = this.parent.getSelectedCells();
         this.focusedEle = selectedEle[selectedEle.length - 1] || this.focusedEle;
-        const renderedLength = conWrap.querySelectorAll('tbody tr').length;
+        const tbody = conWrap.querySelector('tbody');
+        const renderedRows = Array.from(tbody.querySelectorAll('tr'));
+        if (this.parent.currentView === 'Month') {
+            this.updateMonthViewContent(conWrap, resCollection);
+        }
+        else {
+            this.updateOtherViewContent(conWrap, resCollection, renderedRows);
+        }
+    }
+    updateMonthViewContent(conWrap, resCollection) {
+        const renderedLength = conWrap.querySelectorAll(' tr').length;
         for (let 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;
-            }
-            const contentRows = this.parent.activeView.getContentRows();
-            append(contentRows, conWrap.querySelector('tbody'));
+        if (this.parent.activeViewOptions.group.byDate) {
+            this.parent.activeView.colLevels[0] = resCollection;
         }
         else {
-            const col = [].slice.call(conWrap.querySelector('colgroup').children);
-            for (let i = 0; i < col.length; i++) {
-                remove(col[parseInt(i.toString(), 10)]);
-            }
-            this.parent.activeView.colLevels[this.parent.activeView.colLevels.length - 1] = resCollection;
-            const contentRows = this.parent.activeView.getContentRows();
-            const table = conWrap.querySelector('table');
-            const thead = conWrap.querySelector('thead');
-            const colGroupEle = conWrap.querySelector('colgroup');
-            resCollection.forEach(() => {
-                colGroupEle.appendChild(createElement('col'));
+            this.parent.activeView.colLevels[this.parent.activeView.colLevels.length - 2] = resCollection;
+        }
+        const contentRows = this.parent.activeView.getContentRows();
+        append(contentRows, conWrap.querySelector('tbody'));
+    }
+    updateOtherViewContent(conWrap, resCollection, renderedRows) {
+        const tbody = conWrap.querySelector('tbody');
+        const colGroup = conWrap.querySelector('colgroup');
+        const thead = conWrap.querySelector('thead');
+        const table = conWrap.querySelector('table');
+        this.parent.activeView.colLevels[this.parent.activeView.colLevels.length - 1] = resCollection;
+        const newGroupIndices = new Set(resCollection.map((data) => data.groupIndex));
+        renderedRows.forEach((row) => {
+            const tdElements = row.querySelectorAll('td');
+            tdElements.forEach((td) => {
+                const 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'));
+        });
+        const col = [].slice.call(conWrap.querySelector('colgroup').children);
+        for (let i = 0; i < col.length; i++) {
+            remove(col[parseInt(i.toString(), 10)]);
+        }
+        resCollection.forEach(() => colGroup.appendChild(createElement('col')));
+        const tHead = [].slice.call(conWrap.querySelector('thead').children);
+        for (let 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);
+        const contentRows = this.parent.activeView.getContentRows();
+        this.mergeNewTdData(tbody, contentRows);
+    }
+    mergeNewTdData(tbody, contentRows) {
+        const existingRows = Array.from(tbody.querySelectorAll('tr'));
+        existingRows.forEach((existingRow, rowIndex) => {
+            if (rowIndex < contentRows.length) {
+                const newRow = contentRows[parseInt(rowIndex.toString(), 10)];
+                const existingTds = Array.from(existingRow.querySelectorAll('td'));
+                const newTds = Array.from(newRow.querySelectorAll('td'));
+                newTds.forEach((newTd) => {
+                    const newGroupIndex = parseInt(newTd.getAttribute('data-group-index').toString(), 10);
+                    let inserted = false;
+                    for (const existingTd of existingTds) {
+                        const existingGroupIndex = parseInt(existingTd.getAttribute('data-group-index').toString(), 10);
+                        if (newGroupIndex < existingGroupIndex) {
+                            existingRow.insertBefore(newTd, existingTd);
+                            inserted = true;
+                            break;
+                        }
+                    }
+                    if (!inserted) {
+                        existingRow.appendChild(newTd);
+                    }
+                });
+            }
+        });
     }
     getBufferCollection(startIndex, endIndex) {
         return this.parent.resourceBase.expandedResources.slice(startIndex, endIndex);
@@ -16747,6 +16808,37 @@ let Schedule = class Schedule extends Component {
         }
         return templateName;
     }
+    /**
+     * Method to get element width
+     *
+     * @param {HTMLElement} element Accepts the DOM element
+     * @returns {number} Returns the width of the given element
+     * @private
+     */
+    getElementWidth(element) {
+        return getElementWidth(element, this.uiStateValues.isTransformed);
+    }
+    /**
+     * Method to get element height
+     *
+     * @param {HTMLElement} element Accepts the DOM element
+     * @returns {number} Returns the Height of the given element
+     * @private
+     */
+    getElementHeight(element) {
+        return getElementHeight(element, this.uiStateValues.isTransformed);
+    }
+    /**
+     * Method to get height from element
+     *
+     * @param {Element} element Accepts the DOM element
+     * @param {string} elementClass Accepts the element class
+     * @returns {number} Returns the height of the element
+     * @private
+     */
+    getElementHeightFromClass(element, elementClass) {
+        return getElementHeightFromClass(element, elementClass, this.uiStateValues.isTransformed);
+    }
     /**
      * Method to render react templates
      *
@@ -16826,6 +16918,7 @@ let Schedule = class Schedule extends Component {
             this.headerModule = new HeaderRenderer(this);
         }
         this.renderTableContainer();
+        this.uiStateValues.isTransformed = Math.round(this.element.getBoundingClientRect().width) !== this.element.offsetWidth;
         if (Browser.isDevice || Browser.isTouch) {
             this.scheduleTouchModule = new ScheduleTouch(this);
         }
@@ -17320,7 +17413,7 @@ let Schedule = class Schedule extends Component {
             this.uiStateValues = {
                 expand: false, isInitial: true, left: 0, top: 0, isGroupAdaptive: false,
                 isIgnoreOccurrence: false, groupIndex: this.adaptiveGroupIndex, action: false,
-                isBlock: false, isCustomMonth: true, isPreventTimezone: false
+                isBlock: false, isCustomMonth: true, isPreventTimezone: false, isTransformed: false
             };
         }
         this.currentTimezoneDate = this.getCurrentTime();
@@ -18705,6 +18798,9 @@ let Schedule = class Schedule extends Component {
      * @returns {void}
      */
     scrollTo(hour, scrollDate) {
+        if (this.currentView.indexOf('Agenda') < 0 && isNullOrUndefined(this.element.querySelector('.e-work-cells'))) {
+            return;
+        }
         if (this.activeView.scrollToDate && isNullOrUndefined(hour) && scrollDate) {
             this.activeView.scrollToDate(scrollDate);
         }
@@ -20180,8 +20276,8 @@ class Resize extends ActionBase {
             };
             this.actionObj.groupIndex = this.parent.uiStateValues.isGroupAdaptive ? this.parent.uiStateValues.groupIndex : 0;
             const workCell = this.parent.element.querySelector('.' + WORK_CELLS_CLASS);
-            this.actionObj.cellWidth = getElementWidth(workCell);
-            this.actionObj.cellHeight = getElementHeight(workCell);
+            this.actionObj.cellWidth = this.parent.getElementWidth(workCell);
+            this.actionObj.cellHeight = this.parent.getElementHeight(workCell);
             const hRows = this.parent.activeViewOptions.headerRows.map((row) => row.option);
             if (this.parent.activeView.isTimelineView() && hRows.length > 0 && ['Date', 'Hour'].indexOf(hRows.slice(-1)[0]) < 0) {
                 const tr = this.parent.getContentTable().querySelector('tr');
@@ -20483,9 +20579,10 @@ class Resize extends ActionBase {
                     parseInt(this.actionObj.clone.style.left, 10);
                 offsetValue = Math.round(offsetValue / this.actionObj.cellWidth) * this.actionObj.cellWidth;
                 if (!isLeft) {
-                    offsetValue += (getElementWidth(this.actionObj.clone) - this.actionObj.cellWidth);
+                    offsetValue += (this.parent.getElementWidth(this.actionObj.clone) - this.actionObj.cellWidth);
                 }
-                cellIndex = Math.floor(offsetValue / Math.floor(getElementWidth(tr) / noOfDays));
+                cellIndex = !isTimelineMonth ? Math.round(offsetValue / (this.parent.getElementWidth(tr) / noOfDays)) :
+                    Math.floor(offsetValue / Math.floor(this.parent.getElementWidth(tr) / noOfDays));
                 isDateHeader = isTimeViews && headerName === 'Date';
                 cellIndex = isLeft ? cellIndex : isTimelineMonth ? cellIndex + 1 : cellIndex;
                 isLastCell = cellIndex === tdCollections.length;
@@ -20494,7 +20591,7 @@ class Resize extends ActionBase {
             else {
                 const cellWidth = this.actionObj.cellWidth;
                 cellIndex = isLeft ? Math.floor(offset / this.actionObj.cellWidth) :
-                    Math.ceil((offset + (getElementWidth(this.actionObj.clone) - cellWidth)) / this.actionObj.cellWidth);
+                    Math.ceil((offset + (this.parent.getElementWidth(this.actionObj.clone) - cellWidth)) / this.actionObj.cellWidth);
                 if (this.parent.enableRtl) {
                     let cellOffsetWidth = 0;
                     if (headerName === 'TimelineMonth' || (!this.parent.activeViewOptions.timeScale.enable &&
@@ -20502,7 +20599,7 @@ class Resize extends ActionBase {
                         cellOffsetWidth = this.actionObj.cellWidth;
                     }
                     const offsetWidth = (Math.floor(offset / this.actionObj.cellWidth) *
-                        this.actionObj.cellWidth) + (isLeft ? 0 : getElementWidth(this.actionObj.clone) - cellOffsetWidth);
+                        this.actionObj.cellWidth) + (isLeft ? 0 : this.parent.getElementWidth(this.actionObj.clone) - cellOffsetWidth);
                     cellIndex = Math.floor(offsetWidth / this.actionObj.cellWidth);
                 }
                 isLastCell = cellIndex === tdCollections.length;
@@ -20521,7 +20618,7 @@ class Resize extends ActionBase {
             }
             else {
                 if (!isLeft) {
-                    offset += getElementWidth(this.actionObj.clone);
+                    offset += this.parent.getElementWidth(this.actionObj.clone);
                 }
                 let spanMinutes = Math.ceil((this.actionObj.slotInterval / this.actionObj.cellWidth) *
                     (offset - Math.floor(offset / this.actionObj.cellWidth) * this.actionObj.cellWidth));
@@ -20533,9 +20630,9 @@ class Resize extends ActionBase {
         }
         else {
             const cloneIndex = closest(this.actionObj.clone, 'td').cellIndex;
-            const originalWidth = Math.ceil((isLeft ? getElementWidth(this.actionObj.element) : 0) /
+            const originalWidth = Math.ceil((isLeft ? this.parent.getElementWidth(this.actionObj.element) : 0) /
                 this.actionObj.cellWidth) * this.actionObj.cellWidth;
-            const noOfDays = Math.ceil((getElementWidth(this.actionObj.clone) - originalWidth) /
+            const noOfDays = Math.ceil((this.parent.getElementWidth(this.actionObj.clone) - originalWidth) /
                 this.actionObj.cellWidth);
             const tr = closest(this.actionObj.clone, 'tr');
             let dayIndex = isLeft ? cloneIndex - noOfDays : cloneIndex + noOfDays - 1;
@@ -20598,9 +20695,9 @@ class Resize extends ActionBase {
         const slotInterval = (this.actionObj.cellWidth / this.actionObj.slotInterval) * this.actionObj.interval;
         const pageWidth = isLeft ? (this.actionObj.X - this.actionObj.pageX) : (this.actionObj.pageX - this.actionObj.X);
         const targetWidth = isTimelineView ?
-            (getElementWidth(this.actionObj.element) / this.actionObj.cellWidth) * this.actionObj.cellWidth :
-            this.parent.currentView === 'Month' ? getElementWidth(this.actionObj.element) :
-                Math.ceil(getElementWidth(this.actionObj.element) / this.actionObj.cellWidth) * this.actionObj.cellWidth;
+            (this.parent.getElementWidth(this.actionObj.element) / this.actionObj.cellWidth) * this.actionObj.cellWidth :
+            this.parent.currentView === 'Month' ? this.parent.getElementWidth(this.actionObj.element) :
+                Math.ceil(this.parent.getElementWidth(this.actionObj.element) / this.actionObj.cellWidth) * this.actionObj.cellWidth;
         let offsetWidth = targetWidth + (Math.ceil(pageWidth / this.actionObj.cellWidth) * this.actionObj.cellWidth);
         const left = (this.parent.enableRtl) ? parseInt(this.actionObj.element.style.right, 10) : this.actionObj.clone.offsetLeft;
         if (isTimeViews) {
@@ -20615,7 +20712,7 @@ class Resize extends ActionBase {
             this.actionObj.event[this.parent.eventFields.isAllDay] = false;
         }
         let width = !isLeft && ((offsetWidth + this.actionObj.clone.offsetLeft > this.scrollArgs.width)) ?
-            getElementWidth(this.actionObj.clone) : (offsetWidth < this.actionObj.cellWidth) ? offsetWidth : offsetWidth;
+            this.parent.getElementWidth(this.actionObj.clone) : (offsetWidth < this.actionObj.cellWidth) ? offsetWidth : offsetWidth;
         if (this.parent.enableRtl) {
             let rightValue = isTimelineView ? parseInt(this.actionObj.element.style.right, 10) :
                 -(offsetWidth - this.actionObj.cellWidth);
@@ -20629,7 +20726,7 @@ class Resize extends ActionBase {
             }
             rightValue = rightValue >= this.scrollArgs.width ? this.scrollArgs.width - this.actionObj.cellWidth : rightValue;
             styles.right = formatUnit(rightValue);
-            width = width + rightValue > this.scrollArgs.width ? getElementWidth(this.actionObj.clone) : width;
+            width = width + rightValue > this.scrollArgs.width ? this.parent.getElementWidth(this.actionObj.clone) : width;
         }
         else {
             let offsetLeft = isLeft ? this.actionObj.element.offsetLeft - (this.actionObj.X - this.actionObj.pageX) :
@@ -20637,12 +20734,12 @@ class Resize extends ActionBase {
             if (isTimelineView) {
                 offsetLeft = isLeft ? offsetLeft : parseInt(this.actionObj.clone.style.left, 10);
                 if (this.parent.enableRtl) {
-                    offsetLeft = !isLeft ? (this.actionObj.pageX < this.actionObj.X - getElementWidth(this.actionObj.clone))
+                    offsetLeft = !isLeft ? (this.actionObj.pageX < this.actionObj.X - this.parent.getElementWidth(this.actionObj.clone))
                         ? parseInt(this.actionObj.clone.style.right, 10) : offsetLeft : offsetLeft;
                 }
                 else {
-                    offsetLeft = isLeft ? (this.actionObj.pageX > this.actionObj.X + getElementWidth(this.actionObj.clone) &&
-                        getElementWidth(this.actionObj.clone) === this.actionObj.cellWidth) ?
+                    offsetLeft = isLeft ? (this.actionObj.pageX > this.actionObj.X + this.parent.getElementWidth(this.actionObj.clone) &&
+                        this.parent.getElementWidth(this.actionObj.clone) === this.actionObj.cellWidth) ?
                         parseInt(this.actionObj.clone.style.left, 10) : offsetLeft : offsetLeft;
                 }
             }
@@ -20658,10 +20755,10 @@ class Resize extends ActionBase {
                 }
                 else {
                     offsetLeft = 0;
-                    width = getElementWidth(this.actionObj.clone);
+                    width = this.parent.getElementWidth(this.actionObj.clone);
                 }
             }
-            const cloneWidth = Math.ceil(getElementWidth(this.actionObj.clone) / this.actionObj.cellWidth) *
+            const cloneWidth = Math.ceil(this.parent.getElementWidth(this.actionObj.clone) / this.actionObj.cellWidth) *
                 this.actionObj.cellWidth;
             if (isLeft) {
                 styles.left = formatUnit(isTimelineView ? offsetLeft : isLeft ? leftValue < 0 ? -offsetLeft :
@@ -20774,10 +20871,10 @@ class YearEvent extends TimelineEvent {
     }
     timelineYearViewEvents() {
         const workCell = this.parent.element.querySelector('.' + WORK_CELLS_CLASS + ':not(.' + OTHERMONTH_CLASS + ')');
-        this.cellWidth = getElementWidth(workCell);
+        this.cellWidth = this.parent.getElementWidth(workCell);
         this.cellHeader = getOuterHeight(workCell.querySelector('.' + DATE_HEADER_CLASS));
         const eventTable = this.parent.element.querySelector('.' + EVENT_TABLE_CLASS);
-        this.eventHeight = getElementHeightFromClass(eventTable, APPOINTMENT_CLASS);
+        this.eventHeight = this.parent.getElementHeightFromClass(eventTable, APPOINTMENT_CLASS);
         const selector = `.${MONTH_HEADER_WRAPPER} tbody tr,.${RESOURCE_COLUMN_TABLE_CLASS} tbody tr,.${CONTENT_TABLE_CLASS} tbody tr`;
         this.addCellHeight(selector, this.eventHeight, EVENT_GAP$2, this.cellHeader, this.moreIndicatorHeight);
         const wrapperCollection = [].slice.call(this.parent.element.querySelectorAll('.' + APPOINTMENT_CONTAINER_CLASS));
@@ -20924,10 +21021,10 @@ class YearEvent extends TimelineEvent {
         const contentTable = this.parent.element.querySelector('.' + CONTENT_WRAP_CLASS);
         const isVerticalScrollbarAvail = contentTable.offsetWidth > contentTable.clientWidth;
         const workCell = this.parent.element.querySelector('.' + WORK_CELLS_CLASS);
-        this.cellWidth = getElementWidth(workCell);
+        this.cellWidth = this.parent.getElementWidth(workCell);
         this.cellHeader = 0;
         const eventTable = this.parent.element.querySelector('.' + EVENT_TABLE_CLASS);
-        this.eventHeight = getElementHeightFromClass(eventTable, APPOINTMENT_CLASS);
+        this.eventHeight = this.parent.getElementHeightFromClass(eventTable, APPOINTMENT_CLASS);
         const selector = `.${MONTH_HEADER_WRAPPER} tbody tr,.${RESOURCE_COLUMN_TABLE_CLASS} tbody tr,.${CONTENT_TABLE_CLASS} tbody tr`;
         this.addCellHeight(selector, this.eventHeight, EVENT_GAP$2, this.cellHeader, this.moreIndicatorHeight);
         const wrapperCollection = [].slice.call(this.parent.element.querySelectorAll('.' + APPOINTMENT_CONTAINER_CLASS));
@@ -20969,7 +21066,7 @@ class YearEvent extends TimelineEvent {
                 appWrapper.forEach((appWrap, cellIndex) => {
                     const td = row.querySelector(`td:nth-child(${cellIndex + 1})`);
                     const app = [].slice.call(appWrap.children);
-                    const width = getElementWidth(td);
+                    const width = this.parent.getElementWidth(td);
                     const left = td.offsetLeft;
                     if (this.parent.enableRtl) {
                         const right = conTable.offsetWidth - left - td.offsetWidth;
@@ -21312,6 +21409,8 @@ class DragAndDrop extends ActionBase {
         this.isAllDayTarget = false;
         this.targetTd = null;
         this.isCursorAhead = false;
+        this.enableCurrentViewDrag = false;
+        this.isPreventMultiDrag = false;
     }
     wireDragEvent(element) {
         new Draggable(element, {
@@ -21425,6 +21524,9 @@ class DragAndDrop extends ActionBase {
             if (cloneBottom > scrollHeight) {
                 topValue = (parseInt(topValue, 10) - (cloneBottom - scrollHeight)) + 'px';
             }
+            if (this.isPreventMultiDrag) {
+                topValue = formatUnit(this.actionObj.clone.offsetTop);
+            }
         }
         return { left: leftValue, top: topValue };
     }
@@ -21475,6 +21577,7 @@ class DragAndDrop extends ActionBase {
             this.actionObj.interval = dragEventArgs.interval;
             this.actionObj.navigation = dragEventArgs.navigation;
             this.actionObj.scroll = dragEventArgs.scroll;
+            this.enableCurrentViewDrag = dragArgs.dragWithinRange && !dragArgs.navigation.enable && this.parent.allowMultiDrag;
             this.actionObj.excludeSelectors = dragEventArgs.excludeSelectors;
             const viewElement = this.parent.element.querySelector('.' + CONTENT_WRAP_CLASS);
             this.scrollArgs = { element: viewElement, width: viewElement.scrollWidth, height: viewElement.scrollHeight };
@@ -21633,6 +21736,7 @@ class DragAndDrop extends ActionBase {
     }
     dragStop(e) {
         this.isCursorAhead = false;
+        this.isPreventMultiDrag = false;
         this.removeCloneElementClasses();
         this.removeCloneElement();
         clearInterval(this.actionObj.navigationInterval);
@@ -21700,7 +21804,7 @@ class DragAndDrop extends ActionBase {
             this.timelineEventModule.cellWidth = this.actionObj.cellWidth;
             this.timelineEventModule.getSlotDates();
             this.actionObj.cellWidth = this.isHeaderRows ? this.timelineEventModule.cellWidth :
-                getElementWidth(this.parent.element.querySelector('.' + WORK_CELLS_CLASS));
+                this.parent.getElementWidth(this.parent.element.querySelector('.' + WORK_CELLS_CLASS));
             this.calculateTimelineTime(e);
         }
         else {
@@ -21875,7 +21979,9 @@ class DragAndDrop extends ActionBase {
         let dragStart;
         let dragEnd;
         if (this.parent.activeViewOptions.timeScale.enable && !this.isAllDayDrag) {
-            this.appendCloneElement(this.getEventWrapper(colIndex));
+            if (!this.enableCurrentViewDrag || this.multiData.length === 0) {
+                this.appendCloneElement(this.getEventWrapper(colIndex));
+            }
             dragStart = this.parent.getDateFromElement(td);
             dragStart.setMinutes(dragStart.getMinutes() + (diffInMinutes / heightPerMinute));
             dragEnd = new Date(dragStart.getTime());
@@ -21931,18 +22037,34 @@ class DragAndDrop extends ActionBase {
                 this.startTime = eventObj[this.parent.eventFields.startTime].getTime();
             }
             const startTimeDiff = event[this.parent.eventFields.startTime].getTime() - this.startTime;
-            for (let index = 0; index < this.multiData.length; index++) {
-                this.updatedData[parseInt(index.toString(), 10)] =
-                    this.updateMultipleData(this.multiData[parseInt(index.toString(), 10)], startTimeDiff);
-                const dayIndex = this.getDayIndex(this.updatedData[parseInt(index.toString(), 10)]);
-                if (dayIndex >= 0) {
-                    const wrapper = this.getEventWrapper(dayIndex, this.updatedData[parseInt(index.toString(), 10)][this.parent.eventFields.isAllDay]);
-                    this.appendCloneElement(wrapper, this.actionObj.cloneElement[parseInt(index.toString(), 10)]);
-                    this.updateEventHeight(this.updatedData[parseInt(index.toString(), 10)], index, dayIndex);
-                }
-                else {
-                    if (!isNullOrUndefined(this.actionObj.cloneElement[parseInt(index.toString(), 10)].parentNode)) {
-                        remove(this.actionObj.cloneElement[parseInt(index.toString(), 10)]);
+            if (this.enableCurrentViewDrag) {
+                const renderDates = this.getRenderedDates();
+                for (let i = 0; i < this.multiData.length; i++) {
+                    const eventObj = extend({}, this.multiData[parseInt(i.toString(), 10)], null, true);
+                    const startTime = new Date(eventObj[this.parent.eventFields.startTime].getTime() + startTimeDiff);
+                    const dayIndex = this.parent.getIndexOfDate(renderDates, resetTime(startTime));
+                    if (dayIndex < 0) {
+                        this.isPreventMultiDrag = true;
+                        break;
+                    }
+                    this.isPreventMultiDrag = false;
+                }
+            }
+            if (!this.isPreventMultiDrag) {
+                for (let index = 0; index < this.multiData.length; index++) {
+                    this.updatedData[parseInt(index.toString(), 10)] =
+                        this.updateMultipleData(this.multiData[parseInt(index.toString(), 10)], startTimeDiff);
+                    const dayIndex = this.getDayIndex(this.updatedData[parseInt(index.toString(), 10)]);
+                    if (dayIndex >= 0) {
+                        const isAllDay = this.updatedData[parseInt(index.toString(), 10)][this.parent.eventFields.isAllDay];
+                        const wrapper = this.getEventWrapper(dayIndex, isAllDay);
+                        this.appendCloneElement(wrapper, this.actionObj.cloneElement[parseInt(index.toString(), 10)]);
+                        this.updateEventHeight(this.updatedData[parseInt(index.toString(), 10)], index, dayIndex);
+                    }
+                    else {
+                        if (!isNullOrUndefined(this.actionObj.cloneElement[parseInt(index.toString(), 10)].parentNode)) {
+                            remove(this.actionObj.cloneElement[parseInt(index.toString(), 10)]);
+                        }
                     }
                 }
             }
@@ -22158,6 +22280,9 @@ class DragAndDrop extends ActionBase {
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     swapDragging(e) {
+        if (this.isPreventMultiDrag) {
+            return;
+        }
         const colIndex = !isNullOrUndefined(closest(this.actionObj.target, 'td')) && closest(this.actionObj.target, 'td').cellIndex;
         if (closest(this.actionObj.target, '.' + DATE_HEADER_WRAP_CLASS) &&
             !closest(this.actionObj.clone, '.' + ALLDAY_APPOINTMENT_WRAPPER_CLASS)) {
@@ -22512,7 +22637,7 @@ class DragAndDrop extends ActionBase {
             ~~(dragArea.querySelector('table').offsetHeight / trCollection.length) : this.actionObj.cellHeight;
         let rowIndex = Math.floor(Math.floor((this.actionObj.Y +
             (dragArea.scrollTop - translateY - (window.scrollY || window.pageYOffset))) -
-            getElementTop(dragArea)) / rowHeight);
+            getElementTop(dragArea, this.parent.uiStateValues.isTransformed)) / rowHeight);
         rowIndex = (rowIndex < 0) ? 0 : (rowIndex > trCollection.length - 1) ? trCollection.length - 1 : rowIndex;
         this.actionObj.index = rowIndex;
         const eventContainer = this.parent.element.querySelectorAll('.e-appointment-container:not(.e-hidden)').item(rowIndex);
@@ -22528,7 +22653,7 @@ class DragAndDrop extends ActionBase {
         if (!isNullOrUndefined(this.parent.eventDragArea)) {
             return;
         }
-        let top = getElementHeight(trCollection[parseInt(rowIndex.toString(), 10)]) * rowIndex;
+        let top = this.parent.getElementHeight(trCollection[parseInt(rowIndex.toString(), 10)]) * rowIndex;
         if (this.parent.rowAutoHeight) {
             const cursorElement = this.getCursorElement(e);
             if (cursorElement) {
@@ -23085,7 +23210,7 @@ class ViewBase {
         if (this.isTimelineView()) {
             const colElements = this.getColElements();
             const contentBody = this.element.querySelector('.' + CONTENT_TABLE_CLASS + ' tbody');
-            const colWidth = (getElementWidth(contentBody) / (colElements.length / 2));
+            const colWidth = (this.parent.getElementWidth(contentBody) / (colElements.length / 2));
             if (content.offsetHeight !== content.clientHeight) {
                 const resourceColumn = this.parent.element.querySelector('.' + RESOURCE_COLUMN_WRAP_CLASS);
                 if (!isNullOrUndefined(resourceColumn) && resourceColumn.offsetHeight !== content.clientHeight) {
@@ -23445,11 +23570,8 @@ class VerticalView extends ViewBase {
         const currentDate = this.parent.getCurrentTime();
         if (this.parent.showTimeIndicator && this.isWorkHourRange(currentDate)) {
             const currentDateIndex = this.getCurrentTimeIndicatorIndex();
-            if (currentDateIndex.length > 0) {
-                const workCells = [].slice.call(this.element.querySelectorAll('.' + WORK_CELLS_CLASS));
-                if (workCells.length > 0) {
-                    this.changeCurrentTimePosition();
-                }
+            if (currentDateIndex.length > 0 && !isNullOrUndefined(this.element.querySelector('.' + WORK_CELLS_CLASS))) {
+                this.changeCurrentTimePosition();
                 if (isNullOrUndefined(this.currentTimeIndicatorTimer)) {
                     const interval = MS_PER_MINUTE - ((currentDate.getSeconds() * 1000) + currentDate.getMilliseconds());
                     if (interval <= (MS_PER_MINUTE - 1000)) {
@@ -23569,7 +23691,7 @@ class VerticalView extends ViewBase {
             this.parent.activeViewOptions.timeScale.interval;
     }
     getWorkCellHeight() {
-        return parseFloat(getElementHeight(this.element.querySelector('.' + WORK_CELLS_CLASS)).toFixed(2));
+        return parseFloat(this.parent.getElementHeight(this.element.querySelector('.' + WORK_CELLS_CLASS)).toFixed(2));
     }
     getTdContent(date, type, groupIndex) {
         let cntEle;
@@ -23870,11 +23992,24 @@ class VerticalView extends ViewBase {
         const rows = [];
         const tr = createElement('tr');
         const td = createElement('td', { attrs: { 'aria-selected': 'false' } });
+        let existingGroupIndices = new Set();
+        if (this.parent.virtualScrollModule && this.parent.activeViewOptions.group.resources.length > 0 &&
+            this.parent.virtualScrollModule.existingDataCollection.length > 0) {
+            existingGroupIndices = new Set(this.parent.virtualScrollModule.existingDataCollection.map((data) => data.groupIndex));
+        }
         const handler = (r) => {
             const ntr = tr.cloneNode();
             for (const tdData of this.colLevels[this.colLevels.length - 1]) {
-                const ntd = this.createContentTd(tdData, r, td);
-                ntr.appendChild(ntd);
+                let isAllowTdCreation = true;
+                if (this.parent.virtualScrollModule && this.parent.activeViewOptions.group.resources.length > 0) {
+                    if (existingGroupIndices.has(tdData.groupIndex)) {
+                        isAllowTdCreation = false;
+                    }
+                }
+                if (isAllowTdCreation) {
+                    const ntd = this.createContentTd(tdData, r, td);
+                    ntr.appendChild(ntd);
+                }
             }
             rows.push(ntr);
             return r;
@@ -25302,7 +25437,8 @@ class AgendaBase extends ViewBase {
                     const scheduleId = this.parent.element.id + '_';
                     const viewName = this.parent.activeViewOptions.eventTemplateName;
                     const templateId = scheduleId + viewName + 'eventTemplate';
-                    templateEle = this.parent.getAppointmentTemplate()(listData[parseInt(li.toString(), 10)], this.parent, 'eventTemplate', templateId, false, undefined, undefined, this.parent.root);
+                    templateEle =
+                        this.parent.getAppointmentTemplate()(listData[parseInt(li.toString(), 10)], this.parent, 'eventTemplate', templateId, false, undefined, undefined, this.parent.root);
                     if (!isNullOrUndefined(listData[parseInt(li.toString(), 10)][fieldMapping.recurrenceRule])) {
                         const iconClass = (listData[parseInt(li.toString(), 10)][fieldMapping.id] ===
                             listData[parseInt(li.toString(), 10)][fieldMapping.recurrenceID]) ?
@@ -26443,7 +26579,7 @@ class TimelineViews extends VerticalView {
         }
         let scrollLeft;
         if (isNullOrUndefined(hour) || !this.parent.activeViewOptions.timeScale.enable) {
-            scrollLeft = index * getElementWidth(this.element.querySelector('.e-work-cells'));
+            scrollLeft = index * this.parent.getElementWidth(this.element.querySelector('.e-work-cells'));
         }
         else {
             scrollLeft = isNullOrUndefined(scrollDate) ? this.getLeftFromDateTime(null, date) :
@@ -26527,7 +26663,7 @@ class TimelineViews extends VerticalView {
                 if (this.parent.activeView.colLevels[parseInt(index.toString(), 10)] &&
                     this.parent.activeView.colLevels[parseInt(index.toString(), 10)][0].colSpan) {
                     diffInDates = currentDateIndex[0] * this.parent.activeView.colLevels[parseInt(index.toString(), 10)][0].colSpan *
-                        getElementWidth(this.element.querySelector('.e-work-cells'));
+                        this.parent.getElementWidth(this.element.querySelector('.e-work-cells'));
                 }
                 else {
                     const endHour = this.getEndHour();
@@ -26537,8 +26673,8 @@ class TimelineViews extends VerticalView {
                 }
             }
         }
-        return diffInDates + ((diffInMinutes * getElementWidth(this.element.querySelector('.e-work-cells')) * this.parent.activeViewOptions.timeScale.slotCount) /
-            this.parent.activeViewOptions.timeScale.interval);
+        return diffInDates + ((diffInMinutes * this.parent.getElementWidth(this.element.querySelector('.e-work-cells'))
+            * this.parent.activeViewOptions.timeScale.slotCount) / this.parent.activeViewOptions.timeScale.interval);
     }
     renderHeader() {
         const tr = createElement('tr');