Scheduler Scroll view returns to top after refresh

[TTG]

Hello,

I have a kendo UI Scheduler which is used to load events.

I have an issue that when I close an item and it reloads the data, the calendar scrolls up to the top, losing the focus.

Here's a snippet of code:

 doubleClickInSingleClick(event: any, popupInstance: any) {
    if (this.eventClickTime == 0) {
      // set first click
      this.eventClickTime = new Date().getTime();
    } else {
      // compare first click to this click and see if they occurred within double click threshold
      if (new Date().getTime() - this.eventClickTime < 250) {
        // double click occurred
        this.productInstanceId = event.id;
        this.popupInstanceRef = this.modalService.open(popupInstance, {
          size: "xl",
        });
        this.popupInstanceRef.result.then(noop, () => {
          this.calendarBehavior.loadCalendarData();
        });
        this.eventClickTime = 0;
      } else {
        // not a double click so set as a new first click
        this.eventClickTime = new Date().getTime();
      }
    }
  }

 

And here's the HTML

<div id="scheduler" style="overflow-x: auto; white-space: nowrap">
      <kendo-scheduler
        #schedulerComponent
        [kendoSchedulerBinding]="(this.calendarBehavior.events | async)!"
        style="overflow: none; min-width: 750px"
        [loading]="(this.calendarBehavior.loading| async)!"
        [selectedDate]="this.calendarBehavior.selectedDate"
        [selectedViewIndex]="3"
        (dateChange)="this.calendarBehavior.onDateChange($event)"
      >
        <kendo-scheduler-day-view>
          <ng-template kendoSchedulerEventTemplate let-event="event">
            <div (click)="doubleClickInSingleClick(event, instanceModal)">
              <!-- Added this hidden label as calendar sorting bu the text inside the event, where can sort by alerts and can have un expected sortion -->
              <label style="width: 1px; height: 1px; color: transparent"
                >{{ event.dataItem.dataItem.instance.productSku }}
                {{ event.dataItem.dataItem.instance.groupNumber }}
              </label>
              <span
                *ngIf="
                  event.dataItem.instance.ticketCount <
                  event.dataItem.instance.bookedCount
                "
                class="ticket-alert-icon"
                style="font-size: 10px"
              >
                <i class="fas fa-ticket-alt"></i>
                <i class="fas fa-exclamation-circle text-warning bg-light"></i>
              </span>
              <span
                *ngIf="event.dataItem.instance.tourOperatedByPartner"
                class="partner-icon"
              >
                <i class="fas fa-handshake"></i>
              </span>
              <span *ngFor="let iconPath of event.description.split(';')"
                ><img
                  *ngIf="event.description.length > 0"
                  class="alert-icon"
                  src="{{ this.calendarBehavior.getImageUrl(iconPath) }}"
                  width="10"
                />&nbsp;</span
              >
              <span
                [style.color]="event.dataItem.dataItem.titleColor"
                [style.font-size.px]="'10'"
              >
                {{ event.title }} </span
              >
            </div>
          </ng-template>
        </kendo-scheduler-day-view>
 
        <kendo-scheduler-week-view> </kendo-scheduler-week-view>
 
        <kendo-scheduler-month-view>
          <ng-template kendoSchedulerEventTemplate let-event="event">
            <div (click)="doubleClickInSingleClick(event, instanceModal)">
              <span
                [style.color]="event.dataItem.dataItem.titleColor"
                [style.font-size.px]="'10'"
              >
                {{ event.title }}</span
              >
            </div>
          </ng-template>
        </kendo-scheduler-month-view>
 
        <kendo-scheduler-agenda-view>
          <ng-template kendoSchedulerEventTemplate let-event="event">
            <div (click)="doubleClickInSingleClick(event, instanceModal)">
              <!-- Added this hidden label as calendar sorting bu the text inside the event, where can sort by alerts and can have un expected sortion -->
              <label style="width: 1px; height: 1px; color: transparent"
                >{{ event.dataItem.dataItem.instance.productSku }}
                {{ event.dataItem.dataItem.instance.groupNumber }}</label
              >
              <span
                *ngIf="
                  event.dataItem.instance.ticketsRequired &&
                  event.dataItem.instance.ticketCount <
                    event.dataItem.instance.bookedCount
                "
                class="ticket-alert-icon"
              >
                <i class="fas fa-ticket-alt"></i>
                <i class="fas fa-exclamation-circle text-warning bg-light"></i>
              </span>
              <span *ngIf="event.dataItem.instance.tourOperatedByPartner" class="partner-icon">
                <i class="fas fa-handshake"></i>
              </span>
              <span *ngFor="let iconPath of event.description.split(';')"
                ><img
                  *ngIf="event.description.length > 0"
                  class="alert-icon"
                  src="{{ this.calendarBehavior.getImageUrl(iconPath) }}"
                  width="24"
                />&nbsp;</span
              >
              <span [style.color]="event.dataItem.dataItem.titleColor">
               {{event.dataItem.instance.tourOperatedByPartner ? event.dataItem.instance.companyName + " - " : ""}}{{ event.title }} </span
              >
            </div>
          </ng-template>
        </kendo-scheduler-agenda-view>
      </kendo-scheduler>

If I comment the this. calendar behavior.loadCalendarData(); the scroll position is maintained. is there a simple way I can tell the Scheduler to maintain the position?

On a really old version of Kendo UI components, it was not pushing to the top.

 

Any suggestion?

Thanks

 

 

[Georgi]

Hi, 

Thank you very much for the details provided.

I will need some more time to investigate the matter and will get back to you with an update by the end of the day.

Thank you for your patience.

Regards,
Georgi
Progress Telerik

[Georgi]

Hi, 

Thank you very much for your patience.

From what I understood from the details in the question, you are currently utilizing the Kendo UI for Angular Scheduler and are opening a popup on the double-click of an event inside the component that causes unexpected scrolling when closing it.

Furthermore, since the provided code does not clearly suggest what the exact popup is and how it is appended to the Scheduler's events, I would assume that it is the Kendo UI for Angular Popup and the anchor property is being used. Please, correct me if I misunderstood you.

I have thoroughly examined the provided code and after a consultation with our team, I believe that we managed to identify the root cause for the current behavior. Since the data is reloaded in the click event handler function, this causes the Angular change detection mechanism to be triggered and thus the references of the anchors change causing the unexpected scrolling.

What I would suggest as an alternative approach would be to utilize the offset property of the Popup in order to align it to the Scheduler's events which will also prevent the unexpected behavior of the scroll. To better illustrate the suggested approach, I am sending you a StackBlitz demo that implements it:

https://stackblitz.com/edit/angular-q2qves-chpwhg

In case none of the provided information helps you resolve the unexpected scrolling, I would ask you to provide more detailed information about the specifics of the implementation or ideally a small runnable example demonstrating the issue. This would allow me to gain a better understanding of the exact scenario and thus provide a more case-specific suggestion.

I hope this helps. Please, let me know if I can further assist you with this case.

Regards,
Georgi
Progress Telerik