Kendo-angular: Render Issue with Calendar and Reuse

[iqmeta]

I'm submitting Bug report

Current behavior

<kendo-calendar [value]="testDate"></kendo-calendar>
and public testDate: Date = new Date();

does not render after switching back to instantiated component.

with this CustomReuseStrategy (example how to use https://medium.com/@juliapassynkova/angular-2-component-reuse-strategy-9f3ddfab23f5)

import { ActivatedRouteSnapshot, RouteReuseStrategy, DetachedRouteHandle, Route, PRIMARY_OUTLET } from '@angular/router'; export class CustomReuseStrategy implements RouteReuseStrategy { handlers: { [key: string]: DetachedRouteHandle } = {}; calcKey(route: ActivatedRouteSnapshot) { let next = route; let url = ""; while (next) { if (next.url) { url = next.url.join('/'); } next = next.firstChild; } return url; } shouldDetach(route: ActivatedRouteSnapshot): boolean { return true; } store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void { this.handlers[this.calcKey(route)] = handle; } shouldAttach(route: ActivatedRouteSnapshot): boolean { return !!route.routeConfig && !!this.handlers[this.calcKey(route)]; } retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle { if (!route.routeConfig) return null; return this.handlers[this.calcKey(route)]; } shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean { return this.calcKey(curr) === this.calcKey(future); } }

Expected behavior

Calender is shown

Browser:

• Chrome (desktop) version latest production

[ggkrustev]

@iqmeta, thank you for drawing our attention to this issue. It seems that the browser scrolled the calendar to the top (scrollTop = 0) when user navigates away from the route. My assumption is that the component is only detached into fragment, which will force the described scroll behavior.

The best solution in this case will be to enforce change detection of the Calendar when display the route content in order to refresh the scroll position. You can do that with setting new instance of the focusedDate/value inputs.

As to the possible fix on our side, could you send us a repro demo? This will help us to run the problematic page locally and further investigate the case. It doesn't need to be a Plunkr. A runnable Github repo is perfectly fine too.

[iqmeta]

Hi @ggkrustev
here you go...

ngProject.zip

[ggkrustev]

Hi @iqmeta,
thanks for the repro demo.

Indeed, the component is kept alive, but out of the DOM. This will reset the scroll position and unfortunately, nothing (at least in the component lifecycle) will tell us that the view is shown again. That being said, we will need to force the calendar scroll reposition when navigate back to the page.

import { Component, ChangeDetectorRef, ElementRef } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Component({
  selector: 'app-world',
  templateUrl: './world.component.html',
  styleUrls: ['./world.component.scss']
})
export class WorldComponent {
    constructor(router: Router, private element: ElementRef) {
        router.events.subscribe(e => {
            if (e instanceof NavigationEnd) {
                this.value = new Date(this.value);
            }
        });
    }

    public value: Date = new Date();
}

We will further investigate the case and if a feasible solution is found we will integrate it in the component. For the time being, resetting the scroll position manually will be the only solution that I can think of.

[dtopalov]

Also reported in Ticket ID: 1400832

[gkarapeev]

Fix available in the latest dev version.

[dimitar-pechev]

Shipped with v4.4.0.