@syncfusion/ej2-schedule 20.4.42 → 20.4.44

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.4.42
+*  version : 20.4.44
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-schedule@*",
-  "_id": "@syncfusion/ej2-schedule@20.4.40",
+  "_id": "@syncfusion/ej2-schedule@20.4.43",
   "_inBundle": false,
-  "_integrity": "sha512-9rsvmSZiEnAoFmsqayqrhXwZQK3ISXuH9kztAub0i6kH7cph8UafC2VkbpClrP3xLbzm835csRxsj0X0zhekNg==",
+  "_integrity": "sha512-jL9idJQb54yB1L7lWEXeWZ6Dzpog5IPX6OOv4Pratf4S+WWObKIEM9obFKE3czX2qjmukBWuBSzpmSL8RZdOmg==",
   "_location": "/@syncfusion/ej2-schedule",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-schedule",
     "/@syncfusion/ej2-vue-schedule"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-schedule/-/ej2-schedule-20.4.40.tgz",
-  "_shasum": "dce137821e239cbe7a7c49223badbe8bbbf9414f",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-schedule/-/ej2-schedule-20.4.43.tgz",
+  "_shasum": "caeedb206a05f648deba6c92fb59c4f6decfe438",
   "_spec": "@syncfusion/ej2-schedule@*",
   "_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
   "author": {
@@ -35,16 +35,16 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.4.42",
-    "@syncfusion/ej2-buttons": "~20.4.42",
-    "@syncfusion/ej2-calendars": "~20.4.42",
-    "@syncfusion/ej2-data": "~20.4.42",
-    "@syncfusion/ej2-dropdowns": "~20.4.42",
+    "@syncfusion/ej2-base": "~20.4.44",
+    "@syncfusion/ej2-buttons": "~20.4.44",
+    "@syncfusion/ej2-calendars": "~20.4.44",
+    "@syncfusion/ej2-data": "~20.4.44",
+    "@syncfusion/ej2-dropdowns": "~20.4.43",
     "@syncfusion/ej2-excel-export": "~20.4.42",
     "@syncfusion/ej2-inputs": "~20.4.42",
     "@syncfusion/ej2-lists": "~20.4.42",
-    "@syncfusion/ej2-navigations": "~20.4.42",
-    "@syncfusion/ej2-popups": "~20.4.42"
+    "@syncfusion/ej2-navigations": "~20.4.44",
+    "@syncfusion/ej2-popups": "~20.4.44"
   },
   "deprecated": false,
   "description": "Flexible scheduling library with more built-in features and enhanced customization options similar to outlook and google calendar, allowing the users to plan and manage their appointments with efficient data-binding support.",
@@ -73,6 +73,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "20.4.42",
+  "version": "20.4.44",
   "sideEffects": false
 }

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

@@ -890,10 +890,11 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
     /**
      * Method to render react templates
      *
+     * @param {Function} callBack - specifies the callBack method
      * @returns {void}
      * @private
      */
-    renderTemplates(): void;
+    renderTemplates(callback?: Function): void;
     /**
      * Method to reset react templates
      *

package/src/schedule/base/schedule.js

@@ -135,12 +135,16 @@ var Schedule = /** @class */ (function (_super) {
     /**
      * Method to render react templates
      *
+     * @param {Function} callBack - specifies the callBack method
      * @returns {void}
      * @private
      */
-    Schedule.prototype.renderTemplates = function () {
+    Schedule.prototype.renderTemplates = function (callback) {
         if (this.isReact) {
-            this.renderReactTemplates();
+            this.renderReactTemplates(callback);
+        }
+        else if (callback) {
+            callback();
         }
     };
     /**

package/src/schedule/event-renderer/agenda-base.js

@@ -55,7 +55,6 @@ var AgendaBase = /** @class */ (function (_super) {
                         'role': 'button',
                         'tabindex': '0',
                         'aria-disabled': _this.parent.eventBase.getReadonlyAttribute(listData[parseInt(li.toString(), 10)]),
-                        'aria-pressed': 'false',
                         'aria-label': _this.parent.getAnnouncementString(listData[parseInt(li.toString(), 10)])
                     }
                 });

package/src/schedule/event-renderer/event-base.js

@@ -520,20 +520,12 @@ var EventBase = /** @class */ (function () {
     };
     EventBase.prototype.removeSelectedAppointmentClass = function () {
         var selectedAppointments = this.getSelectedAppointments();
-        for (var _i = 0, selectedAppointments_1 = selectedAppointments; _i < selectedAppointments_1.length; _i++) {
-            var appointment = selectedAppointments_1[_i];
-            appointment.setAttribute('aria-pressed', 'false');
-        }
         removeClass(selectedAppointments, cls.APPOINTMENT_BORDER);
         if (this.parent.currentView === 'Agenda' || this.parent.currentView === 'MonthAgenda') {
             removeClass(selectedAppointments, cls.AGENDA_SELECTED_CELL);
         }
     };
     EventBase.prototype.addSelectedAppointments = function (cells) {
-        for (var _i = 0, cells_1 = cells; _i < cells_1.length; _i++) {
-            var cell = cells_1[_i];
-            cell.setAttribute('aria-pressed', 'true');
-        }
         if (this.parent.currentView !== 'MonthAgenda') {
             this.parent.removeSelectedClass();
         }
@@ -1097,7 +1089,7 @@ var EventBase = /** @class */ (function () {
             className: cls.BLOCK_APPOINTMENT_CLASS,
             attrs: {
                 'data-id': 'Appointment_' + record[this.parent.eventFields.id],
-                'aria-disabled': 'true', 'aria-pressed': 'false'
+                'aria-disabled': 'true'
             }
         });
         var templateElement;

package/src/schedule/event-renderer/month.js

@@ -379,7 +379,7 @@ var MonthEvent = /** @class */ (function (_super) {
         var attrs = {
             'data-id': 'Appointment_' + record[this.fields.id],
             'role': 'button', 'tabindex': '0',
-            'aria-disabled': this.parent.eventBase.getReadonlyAttribute(record), 'aria-pressed': 'false',
+            'aria-disabled': this.parent.eventBase.getReadonlyAttribute(record),
             'aria-label': this.parent.getAnnouncementString(newRecord, eventSubject)
         };
         if (!isCloneElement) {

package/src/schedule/event-renderer/vertical-view.js

@@ -321,7 +321,6 @@ var VerticalEvent = /** @class */ (function (_super) {
                 'role': 'button',
                 'tabindex': '0',
                 'aria-disabled': this.parent.eventBase.getReadonlyAttribute(record),
-                'aria-pressed': 'false',
                 'aria-label': this.parent.getAnnouncementString(record)
             }
         });

package/src/schedule/event-renderer/year.js

@@ -377,7 +377,7 @@ var YearEvent = /** @class */ (function (_super) {
                 'data-id': 'Appointment_' + record[this.fields.id],
                 'data-guid': record.Guid,
                 'role': 'button', 'tabindex': '0',
-                'aria-disabled': this.parent.eventBase.getReadonlyAttribute(record), 'aria-pressed': 'false',
+                'aria-disabled': this.parent.eventBase.getReadonlyAttribute(record),
                 'aria-label': this.parent.getAnnouncementString(record)
             }
         });

package/src/schedule/popups/event-tooltip.js

@@ -99,13 +99,8 @@ var EventTooltip = /** @class */ (function () {
             startMonthDate = util.capitalizeFirstWord(startMonthDate, 'single');
             startMonthYearDate = util.capitalizeFirstWord(startMonthYearDate, 'single');
             endMonthYearDate = util.capitalizeFirstWord(endMonthYearDate, 'single');
-            var skeleton = 'short';
-            var startTime = globalize.formatDate(eventStart, {
-                type: 'time', skeleton: skeleton, calendar: this.parent.getCalendarMode()
-            });
-            var endTime = globalize.formatDate(eventEnd, {
-                type: 'time', skeleton: skeleton, calendar: this.parent.getCalendarMode()
-            });
+            var startTime = this.parent.getTimeString(eventStart);
+            var endTime = this.parent.getTimeString(eventEnd);
             var tooltipDetails = void 0;
             if (startDate.getTime() === endDate.getTime()) {
                 tooltipDetails =

package/src/schedule/popups/event-window.js

@@ -244,6 +244,7 @@ var EventWindow = /** @class */ (function () {
         return container;
     };
     EventWindow.prototype.renderFormElements = function (form, args) {
+        var _this = this;
         if (!isNullOrUndefined(this.parent.editorTemplate)) {
             if (args) {
                 if (this.recurrenceEditor) {
@@ -260,8 +261,9 @@ var EventWindow = /** @class */ (function () {
             var templateId = this.parent.element.id + '_editorTemplate';
             var tempEle = [].slice.call(this.parent.getEditorTemplate()(args || {}, this.parent, 'editorTemplate', templateId, false));
             append(tempEle, form);
-            this.parent.renderTemplates();
-            this.applyFormValidation();
+            this.parent.renderTemplates(function () {
+                _this.applyFormValidation();
+            });
         }
         else {
             form.appendChild(this.getDefaultEventWindowContent());
@@ -1207,7 +1209,9 @@ var EventWindow = /** @class */ (function () {
             }
         }
         if (this.recurrenceEditor && this.recurrenceEditor.value && this.recurrenceEditor.value !== '') {
-            alertType = this.recurrenceValidation(eventObj[this.fields.startTime], eventObj[this.fields.endTime], alert);
+            if (this.parent.currentAction !== 'EditOccurrence') {
+                alertType = this.recurrenceValidation(eventObj[this.fields.startTime], eventObj[this.fields.endTime], alert);
+            }
             var isShowAlert = true;
             if (alertType === 'seriesChangeAlert' && this.parent.uiStateValues.isIgnoreOccurrence) {
                 isShowAlert = false;
@@ -1440,53 +1444,58 @@ var EventWindow = /** @class */ (function () {
         if (isNullOrUndefined(index)) {
             return false;
         }
+        var currentStartTime = new Date(+currentData[this.fields.startTime]);
+        var currentEndTime = new Date(+currentData[this.fields.endTime]);
+        if (index !== recurColl.length - 1) {
+            var nextStartTime = new Date(+recurColl[index + 1][this.fields.startTime]);
+            var nextEndTime = new Date(+recurColl[index + 1][this.fields.endTime]);
+        }
+        var lastEndTime = new Date(+recurColl[recurColl.length - 1][this.fields.endTime]);
         if (index === 0) {
             if (!isNullOrUndefined(recurColl[index + 1])) {
-                if (!(util.resetTime(new Date(+recurColl[index + 1][this.fields.startTime])).getTime() >
-                    util.resetTime(new Date(+currentData[this.fields.endTime])).getTime()) &&
-                    (util.resetTime(new Date(+recurColl[recurColl.length - 1][this.fields.endTime])).getTime() >=
-                        util.resetTime(new Date(+currentData[this.fields.startTime])).getTime())) {
-                    this.parent.quickPopup.openRecurrenceValidationAlert('sameDayAlert');
+                if (!(nextStartTime.getTime() >= currentEndTime.getTime()) &&
+                    (util.resetTime(lastEndTime).getTime() >=
+                        util.resetTime(currentStartTime).getTime()) ||
+                    util.resetTime(lastEndTime).getTime() < util.resetTime(currentStartTime).getTime()) {
+                    this.parent.quickPopup.openRecurrenceValidationAlert('occurrenceAlert');
                     return true;
                 }
-                else if (util.resetTime(new Date(+recurColl[recurColl.length - 1][this.fields.endTime])).getTime() <
-                    util.resetTime(new Date(+currentData[this.fields.startTime])).getTime()) {
-                    this.parent.quickPopup.openRecurrenceValidationAlert('occurrenceAlert');
+                else if (!(util.resetTime(currentStartTime).getTime() <
+                    util.resetTime(nextStartTime).getTime())) {
+                    this.parent.quickPopup.openRecurrenceValidationAlert('sameDayAlert');
                     return true;
                 }
             }
             return false;
         }
         else {
+            var previousStartTime = new Date(+recurColl[index - 1][this.fields.startTime]);
+            var previousEndTime = new Date(+recurColl[index - 1][this.fields.endTime]);
             if (index === recurColl.length - 1) {
-                if (!(util.resetTime(new Date(+recurColl[index - 1][this.fields.endTime])).getTime() <
-                    util.resetTime(new Date(+currentData[this.fields.startTime])).getTime()) &&
-                    (util.resetTime(new Date(+recurColl[(recurColl.length - 1) - index][this.fields.startTime])).getTime() <=
-                        util.resetTime(new Date(+currentData[this.fields.endTime])).getTime())) {
-                    this.parent.quickPopup.openRecurrenceValidationAlert('sameDayAlert');
+                if (util.resetTime(new Date(+recurColl[(recurColl.length - 1) - index][this.fields.startTime])).getTime() >
+                    util.resetTime(currentStartTime).getTime()) {
+                    this.parent.quickPopup.openRecurrenceValidationAlert('occurrenceAlert');
                     return true;
                 }
-                else if (util.resetTime(new Date(+recurColl[(recurColl.length - 1) - index][this.fields.endTime])).getTime() >
-                    util.resetTime(new Date(+currentData[this.fields.startTime])).getTime()) {
-                    this.parent.quickPopup.openRecurrenceValidationAlert('occurrenceAlert');
+                else if (!((previousEndTime.getTime() <= currentStartTime.getTime()) &&
+                    (util.resetTime(currentStartTime).getTime() > util.resetTime(previousStartTime).getTime()))) {
+                    this.parent.quickPopup.openRecurrenceValidationAlert('sameDayAlert');
                     return true;
                 }
             }
-            else if (!(((util.resetTime(new Date(+recurColl[index - 1][this.fields.endTime])).getTime() <
-                util.resetTime(new Date(+currentData[this.fields.startTime])).getTime()) ||
-                (util.resetTime(new Date(+recurColl[0][this.fields.startTime])).getTime() >
-                    util.resetTime(new Date(+currentData[this.fields.startTime])).getTime())) &&
-                ((util.resetTime(new Date(+recurColl[index + 1][this.fields.startTime])).getTime() >
-                    util.resetTime(new Date(+currentData[this.fields.endTime])).getTime()) ||
-                    (util.resetTime(new Date(+recurColl[recurColl.length - 1][this.fields.endTime])).getTime() <
-                        util.resetTime(new Date(+currentData[this.fields.startTime])).getTime())))) {
+            else if (!(((util.resetTime(previousStartTime).getTime() < util.resetTime(currentStartTime).getTime()) ||
+                util.resetTime(new Date(+recurColl[0][this.fields.startTime])).getTime() >
+                    util.resetTime(currentStartTime).getTime()) &&
+                ((util.resetTime(nextStartTime).getTime() > util.resetTime(currentStartTime).getTime()) ||
+                    (lastEndTime.getTime() < currentStartTime.getTime())))) {
                 this.parent.quickPopup.openRecurrenceValidationAlert('sameDayAlert');
                 return true;
             }
-            else if ((util.resetTime(new Date(+recurColl[index + 1][this.fields.endTime])).getTime() <
-                util.resetTime(new Date(+currentData[this.fields.startTime])).getTime()) ||
-                (util.resetTime(new Date(+recurColl[index - 1][this.fields.startTime])).getTime() >
-                    util.resetTime(new Date(+currentData[this.fields.endTime])).getTime())) {
+            else if (!(previousEndTime.getTime() <= currentStartTime.getTime() && nextStartTime.getTime() >
+                currentEndTime.getTime()) || (util.resetTime(nextEndTime).getTime() <
+                util.resetTime(currentStartTime).getTime()) ||
+                (util.resetTime(previousStartTime).getTime() > util.resetTime(currentEndTime).getTime()) ||
+                !(util.resetTime(currentStartTime).getTime() < util.resetTime(nextStartTime).getTime())) {
                 this.parent.quickPopup.openRecurrenceValidationAlert('occurrenceAlert');
                 return true;
             }

package/src/schedule/popups/quick-popups.js

@@ -319,7 +319,7 @@ var QuickPopups = /** @class */ (function () {
                         'data-id': '' + eventData[fields.id],
                         'data-guid': eventData.Guid, 'role': 'button', 'tabindex': '0',
                         'aria-disabled': this_1.parent.eventBase.getReadonlyAttribute(eventData),
-                        'aria-pressed': 'false', 'aria-label': this_1.parent.getAnnouncementString(eventData)
+                        'aria-label': this_1.parent.getAnnouncementString(eventData)
                     }
                 });
                 var templateElement = void 0;
@@ -393,7 +393,7 @@ var QuickPopups = /** @class */ (function () {
         if (deleteIcon) {
             this.renderButton('e-flat e-round e-small', cls.ICON + ' ' + cls.DELETE_ICON_CLASS, deleteAction, deleteIcon, this.deleteClick);
         }
-        this.beforeQuickPopupOpen(target);
+        this.beforeQuickPopupOpen(target, e);
     };
     QuickPopups.prototype.isCellBlocked = function (args) {
         var tempObj = {};
@@ -480,7 +480,7 @@ var QuickPopups = /** @class */ (function () {
         this.quickPopup.content = quickCellPopup;
         this.quickPopup.relateTo = target;
         this.quickPopup.dataBind();
-        this.beforeQuickPopupOpen(target);
+        this.beforeQuickPopupOpen(target, args.event);
     };
     QuickPopups.prototype.isSameEventClick = function (events) {
         var isSameTarget = this.quickPopup.relateTo === closest(events.element, '.' + cls.APPOINTMENT_CLASS);
@@ -557,7 +557,7 @@ var QuickPopups = /** @class */ (function () {
             this.quickPopup.relateTo = this.parent.isAdaptive ? document.body :
                 closest(events.element, '.' + cls.APPOINTMENT_CLASS);
             this.quickPopup.dataBind();
-            this.beforeQuickPopupOpen(events.element);
+            this.beforeQuickPopupOpen(events.element, events.originalEvent);
         }
     };
     QuickPopups.prototype.getPopupHeader = function (headerType, headerData) {
@@ -838,15 +838,16 @@ var QuickPopups = /** @class */ (function () {
                 this.morePopup.relateTo = closest(target, '.' + cls.WORK_CELLS_CLASS);
             }
         }
-        this.parent.renderTemplates();
-        var eventProp = {
-            type: 'EventContainer', cancel: false,
-            element: this.morePopup.element, data: data
-        };
-        this.parent.trigger(event.popupOpen, eventProp, function (popupArgs) {
-            if (!popupArgs.cancel) {
-                _this.morePopup.show();
-            }
+        this.parent.renderTemplates(function () {
+            var eventProp = {
+                type: 'EventContainer', cancel: false,
+                element: _this.morePopup.element, data: data
+            };
+            _this.parent.trigger(event.popupOpen, eventProp, function (popupArgs) {
+                if (!popupArgs.cancel) {
+                    _this.morePopup.show();
+                }
+            });
         });
     };
     QuickPopups.prototype.saveClick = function (event) {
@@ -1037,71 +1038,95 @@ var QuickPopups = /** @class */ (function () {
             }
         });
     };
-    QuickPopups.prototype.beforeQuickPopupOpen = function (target) {
+    QuickPopups.prototype.beforeQuickPopupOpen = function (target, originalEvent) {
         var _this = this;
-        this.parent.renderTemplates();
-        var isEventPopup = this.quickPopup.element.querySelector('.' + cls.EVENT_POPUP_CLASS);
-        var popupType = this.parent.isAdaptive ? isEventPopup ? 'ViewEventInfo' : 'EditEventInfo' : 'QuickInfo';
-        var eventProp = {
-            type: popupType, cancel: false, data: extend({}, this.getDataFromTarget(target), null, true),
-            target: target, element: this.quickPopup.element
-        };
-        this.parent.trigger(event.popupOpen, eventProp, function (popupArgs) {
-            if (popupArgs.cancel) {
-                _this.quickPopupHide();
-                _this.destroyPopupButtons('quickPopup');
-                if (popupArgs.element.classList.contains(cls.POPUP_OPEN)) {
-                    _this.quickPopupClose();
-                }
-                util.removeChildren(_this.quickPopup.element);
-                _this.isMultipleEventSelect = false;
-            }
-            else {
-                var display = _this.quickPopup.element.style.display;
-                _this.quickPopup.element.style.display = 'block';
-                if (_this.parent.isAdaptive) {
-                    _this.quickPopup.element.removeAttribute('style');
-                    _this.quickPopup.element.style.display = 'block';
-                    _this.quickPopup.element.style.height = formatUnit((popupType === 'EditEventInfo') ? 65 : window.innerHeight);
+        this.parent.renderTemplates(function () {
+            var isEventPopup = _this.quickPopup.element.querySelector('.' + cls.EVENT_POPUP_CLASS);
+            var popupType = _this.parent.isAdaptive ? isEventPopup ? 'ViewEventInfo' : 'EditEventInfo' : 'QuickInfo';
+            var eventProp = {
+                type: popupType, cancel: false, data: extend({}, _this.getDataFromTarget(target), null, true),
+                target: target, element: _this.quickPopup.element
+            };
+            _this.parent.trigger(event.popupOpen, eventProp, function (popupArgs) {
+                if (popupArgs.cancel) {
+                    _this.quickPopupHide();
+                    _this.destroyPopupButtons('quickPopup');
+                    if (popupArgs.element.classList.contains(cls.POPUP_OPEN)) {
+                        _this.quickPopupClose();
+                    }
+                    util.removeChildren(_this.quickPopup.element);
+                    _this.isMultipleEventSelect = false;
                 }
                 else {
-                    var isVirtualScroll = _this.parent.virtualScrollModule && _this.parent.virtualScrollModule.isHorizontalScroll
-                        && !isNullOrUndefined(closest(target, '.' + cls.CONTENT_TABLE_CLASS));
-                    var conTable = _this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS + ' table');
-                    _this.quickPopup.offsetX = isVirtualScroll && !_this.parent.enableRtl ? (util.getTranslateX(conTable) + 10) : 10;
-                    _this.quickPopup.collision = { X: _this.parent.enableRtl ? 'flip' : 'none', Y: 'fit' };
-                    _this.quickPopup.position = { X: _this.parent.enableRtl ? 'left' : 'right', Y: _this.parent.enableRtl ? 'bottom' : 'top' };
-                    _this.quickPopup.dataBind();
-                    _this.quickPopup.refreshPosition(null, true);
-                    var collide = isCollide(_this.quickPopup.element, _this.parent.element);
-                    if (collide.indexOf(_this.parent.enableRtl ? 'left' : 'right') > -1) {
-                        _this.quickPopup.offsetX = -target.offsetWidth - 10 - _this.quickPopup.element.offsetWidth;
-                        if (isVirtualScroll && !_this.parent.enableRtl) {
-                            _this.quickPopup.offsetX = util.getTranslateX(conTable) + _this.quickPopup.offsetX;
-                        }
+                    var display = _this.quickPopup.element.style.display;
+                    _this.quickPopup.element.style.display = 'block';
+                    if (_this.parent.isAdaptive) {
+                        _this.quickPopup.element.removeAttribute('style');
+                        _this.quickPopup.element.style.display = 'block';
+                        _this.quickPopup.element.style.height = formatUnit((popupType === 'EditEventInfo') ? 65 : window.innerHeight);
+                    }
+                    else {
+                        var isVirtualScroll = _this.parent.virtualScrollModule && _this.parent.virtualScrollModule.isHorizontalScroll
+                            && !isNullOrUndefined(closest(target, '.' + cls.CONTENT_TABLE_CLASS));
+                        var conTable = _this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS + ' table');
+                        _this.quickPopup.offsetX = isVirtualScroll && !_this.parent.enableRtl ? (util.getTranslateX(conTable) + 10) : 10;
+                        _this.quickPopup.offsetY = _this.parent.virtualScrollModule && !_this.parent.virtualScrollModule.isHorizontalScroll ?
+                            _this.quickPopup.offsetY : 0;
+                        _this.quickPopup.collision = { X: _this.parent.enableRtl ? 'flip' : 'none', Y: 'fit' };
+                        _this.quickPopup.position = { X: _this.parent.enableRtl ? 'left' : 'right', Y: _this.parent.enableRtl ? 'bottom' : 'top' };
                         _this.quickPopup.dataBind();
                         _this.quickPopup.refreshPosition(null, true);
-                        var leftCollide = isCollide(_this.quickPopup.element, _this.parent.element);
-                        if (leftCollide.indexOf('left') > -1) {
-                            _this.quickPopup.position = { X: 'center', Y: 'center' };
-                            _this.quickPopup.collision = { X: 'fit', Y: 'fit' };
-                            _this.quickPopup.offsetX = -(_this.quickPopup.element.offsetWidth / 2);
+                        var collide = isCollide(_this.quickPopup.element, _this.parent.element);
+                        if (collide.indexOf(_this.parent.enableRtl ? 'left' : 'right') > -1) {
+                            _this.quickPopup.offsetX = -target.offsetWidth - 10 - _this.quickPopup.element.offsetWidth;
+                            if (isVirtualScroll && !_this.parent.enableRtl) {
+                                _this.quickPopup.offsetX = util.getTranslateX(conTable) + _this.quickPopup.offsetX;
+                            }
                             _this.quickPopup.dataBind();
+                            _this.quickPopup.refreshPosition(null, true);
+                            var leftCollide = isCollide(_this.quickPopup.element, _this.parent.element);
+                            if (leftCollide.indexOf('left') > -1) {
+                                _this.quickPopup.position = { X: 'center', Y: 'center' };
+                                _this.quickPopup.collision = { X: 'fit', Y: 'fit' };
+                                _this.quickPopup.offsetX = -(_this.quickPopup.element.offsetWidth / 2);
+                                _this.quickPopup.dataBind();
+                            }
+                        }
+                        if (_this.parent.virtualScrollModule && !_this.parent.virtualScrollModule.isHorizontalScroll && (collide.indexOf('top') > -1 || collide.indexOf('bottom') > -1)) {
+                            var translateY = util.getTranslateY(conTable);
+                            _this.quickPopup.offsetY = translateY;
+                            _this.quickPopup.dataBind();
+                            _this.quickPopup.refreshPosition(null, true);
+                        }
+                        if (_this.quickPopup.position.X === 'center' && _this.quickPopup.position.Y === 'center' && !isNullOrUndefined(originalEvent)) {
+                            var previousOffset = _this.quickPopup.offsetY;
+                            var collision = isCollide(target, _this.quickPopup.element);
+                            var popupRect = _this.quickPopup.element.getBoundingClientRect();
+                            if (collision.indexOf('top') > -1 || collision.indexOf('bottom') > -1) {
+                                if (popupRect.top <= originalEvent.clientY && originalEvent.clientY <= popupRect.top + popupRect.height) {
+                                    _this.quickPopup.offsetY = previousOffset - popupRect.height - 10;
+                                    _this.quickPopup.dataBind();
+                                    collision = isCollide(_this.quickPopup.element, _this.parent.element);
+                                    if (collision.indexOf('top') > -1) {
+                                        _this.quickPopup.offsetY = previousOffset + originalEvent.offsetY;
+                                        _this.quickPopup.dataBind();
+                                    }
+                                }
+                                else if (isCollide(_this.quickPopup.element, _this.parent.element).indexOf('bottom') > -1) {
+                                    _this.quickPopup.offsetY = previousOffset - originalEvent.offsetY - Math.ceil(popupRect.height) - 10;
+                                    _this.quickPopup.dataBind();
+                                }
+                            }
                         }
                     }
-                    if (_this.parent.virtualScrollModule && !_this.parent.virtualScrollModule.isHorizontalScroll && (collide.indexOf('top') > -1 || collide.indexOf('bottom') > -1)) {
-                        var translateY = util.getTranslateY(conTable);
-                        _this.quickPopup.offsetY = translateY;
-                        _this.quickPopup.dataBind();
+                    if (isEventPopup) {
+                        _this.applyEventColor();
                     }
+                    _this.quickPopup.element.style.display = display;
+                    _this.quickPopup.dataBind();
+                    _this.quickPopup.show();
                 }
-                if (isEventPopup) {
-                    _this.applyEventColor();
-                }
-                _this.quickPopup.element.style.display = display;
-                _this.quickPopup.dataBind();
-                _this.quickPopup.show();
-            }
+            });
         });
     };
     QuickPopups.prototype.applyEventColor = function () {