Virtual Column scrolling throws an error in Ivy when using cell templates

[TrevorBroderick1]

I'm submitting a...

• Bug report

Current behavior

When using Virtual Columns with a cell template, scrolling right and left will result in an assertion error being thrown and breaking the grid.

This only occurs when using Ivy, and when using Dev mode. Running the app in production mode ignores the error.

The error is as follows:

core.js:6272 ERROR Error: ASSERTION ERROR: ViewRef index must be positive, got -1 [Expected=> -1 > -1 <=Actual]
    at throwError (core.js:1344)
    at assertGreaterThan (core.js:1325)
    at ViewContainerRef._adjustIndex (core.js:15833)
    at ViewContainerRef.remove (core.js:15804)
    at NgTemplateOutlet.ngOnChanges (common.js:5681)
    at NgTemplateOutlet.wrapOnChangesHook_inPreviousChangesStorage (core.js:27246)
    at callHook (core.js:4774)
    at callHooks (core.js:4734)
    at executeCheckHooks (core.js:4654)
    at selectIndexInternal (core.js:9729)
defaultErrorLogger @ core.js:6272
handleError @ core.js:6325
(anonymous) @ core.js:43429
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:123
runOutsideAngular @ core.js:41772
tick @ core.js:43426
(anonymous) @ core.js:43259
invoke @ zone-evergreen.js:364
onInvoke @ core.js:41938
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
run @ core.js:41711
next @ core.js:43255
schedulerFn @ core.js:37398
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:37358
checkStable @ core.js:41850
onLeave @ core.js:42013
onInvokeTask @ core.js:41922
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
invokeTask @ zone-evergreen.js:480
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCallback @ zone-evergreen.js:1647

The root problem seems to be this code here:

And here's the code the makes this error only appear in dev mode:

Expected behavior

No error should be thrown.

Minimal reproduction of the problem with instructions

I've attempted to reproduce the issue here, but it won't be seen because stackblitz is not able to compile the kendo examples with Ivy.

To see the issue, you will need to run the code locally some other way. The important part is that you need to use cell templates, be using Ivy, and be running in dev mode.

https://angular-fqxbzv-2t9tam.stackblitz.io

Environment

Package versions:

+-- @angular-devkit/build-angular@0.901.5
+-- @angular/animations@9.1.6
+-- @angular/cdk@9.2.3
+-- @angular/cli@9.1.5
+-- @angular/common@9.1.6
+-- @angular/compiler@9.1.6
+-- @angular/compiler-cli@9.1.6
+-- @angular/core@9.1.6
+-- @angular/forms@9.1.6
+-- @angular/language-service@9.1.6
+-- @angular/localize@9.1.6
+-- @angular/material@9.2.3
+-- @angular/platform-browser@9.1.6
+-- @angular/platform-browser-dynamic@9.1.6
+-- @angular/router@9.1.6
+-- @aspnet/signalr@1.1.4
+-- @coachcare/datepicker@3.0.0-cams
+-- @ngx-translate/core@12.1.2
+-- @ngx-translate/http-loader@4.0.0
+-- @progress/kendo-angular-buttons@5.4.2
+-- @progress/kendo-angular-charts@4.1.4
+-- @progress/kendo-angular-common@1.2.2
+-- @progress/kendo-angular-dateinputs@4.3.0
+-- @progress/kendo-angular-dropdowns@4.2.7
+-- @progress/kendo-angular-excel-export@3.1.3
+-- @progress/kendo-angular-gauges@3.0.2
+-- @progress/kendo-angular-grid@4.7.2
+-- @progress/kendo-angular-inputs@6.6.0
+-- @progress/kendo-angular-intl@2.0.1
+-- @progress/kendo-angular-l10n@2.0.1
+-- @progress/kendo-angular-menu@2.0.2
+-- @progress/kendo-angular-pdf-export@2.0.3
+-- @progress/kendo-angular-popup@3.0.5
+-- @progress/kendo-angular-upload@5.2.1
+-- @progress/kendo-data-query@1.5.3
+-- @progress/kendo-drawing@1.7.0
+-- @progress/kendo-theme-default@4.17.0
+-- @types/jasmine@3.5.10
+-- @types/jasminewd2@2.0.8
+-- @types/node@12.12.40
+-- angular2-text-mask@9.0.0
+-- bingmaps@2.0.3
+-- bootstrap@4.4.1
+-- cams-web-ts-common@19.5.0
+-- class-transformer@0.1.10
+-- classlist.js@1.1.20150312
+-- codelyzer@5.2.2
+-- core-js@3.6.5
+-- file-saver@2.0.2
+-- hammerjs@2.0.8
+-- jasmine-core@3.5.0
+-- jasmine-spec-reporter@4.2.1
+-- UNMET PEER DEPENDENCY jquery@1.9.1 - 3
+-- karma@5.0.8
+-- karma-chrome-launcher@3.1.0
+-- karma-coverage-istanbul-reporter@2.1.1
+-- karma-jasmine@3.0.3
+-- karma-jasmine-html-reporter@1.5.4
+-- karma-junit-reporter@2.0.1
+-- lodash.escaperegexp@4.1.2
+-- moment@2.25.3
+-- moment-timezone@0.5.28
+-- msnodesqlv8@0.6.12
+-- mssql@4.3.2
+-- ngx-color-picker@9.1.0
+-- UNMET PEER DEPENDENCY popper.js@^1.16.0
+-- protractor@5.4.4
+-- protractor-helpers@1.1.812
+-- protractor-jasmine2-screenshot-reporter@0.5.0
+-- reflect-metadata@0.1.13
+-- rxjs@6.5.5
+-- sha256@0.2.0
+-- testrail-api@1.3.6
+-- text-mask-addons@3.8.0
+-- ts-node@8.3.0
+-- tslib@1.11.2
+-- tslint@6.1.2
+-- typescript@3.8.3
+-- typescript-collections@1.3.3
+-- web-animations-js@2.3.2
`-- zone.js@0.10.3

Browser:

• Chrome (desktop) version 86.0.4240.111

System:

• TypeScript version: 3.9.5
• Node version: 12.15.0 & 6.14.8
• Platform: Windows

[drichard1989]

Following. Getting the same issue.

[Ofiraf]

Following. Getting the same issue.

[billdwhite]

Also following. Same here.

[hizliemre]

Following. Getting the same issue.

[emmanuelviniciusdev]

I'm getting this error when I trigger some filter event in kendo grid. Any idea on how to handle it?

[hizliemre]

I'm getting this error when I trigger some filter event in kendo grid. Any idea on how to handle it?

You should disable ivy rendering through your angular.json for now. Dont remember you can enable ivy on production cuz this error throws only development mode.

[emmanuelviniciusdev]

I'm getting this error when I trigger some filter event in kendo grid. Any idea on how to handle it?

You should disable ivy rendering through your angular.json for now. Dont remember you can enable ivy on production cuz this error throws only development mode.

I did it and it worked. Thanks.

[NishaJKulal]

Even i am facing same issue.

[priteshkbasystems]

We are facing same issue. kindly fix it ASAP.

[Raisolution]

Providing Ivy support is planned for May 2022 (with our R2 release). Progress can be tracked in https://github.com/telerik/kendo-angular/issues/3502.

[penafpj]

We have just upgrade to Angular 12 (see version below). When we scroll to the right in the grid, we get the same error. We do not have the option to disable the Ivy compiler. What are my options?

"dependencies": { "@angular/animations": "^12.2.14", "@angular/common": "^12.2.14", "@angular/compiler": "^12.2.14", "@angular/core": "^12.2.14", "@angular/forms": "^12.2.14", "@angular/localize": "^12.2.14", "@angular/platform-browser": "^12.2.14", "@angular/platform-browser-dynamic": "^12.2.14", "@angular/router": "^12.2.14", "@fortawesome/fontawesome-free": "^5.15.4", "@progress/kendo-angular-buttons": "^6.4.0", "@progress/kendo-angular-common": "^2.0.1", "@progress/kendo-angular-dateinputs": "^5.2.3", "@progress/kendo-angular-dialog": "^5.2.0", "@progress/kendo-angular-dropdowns": "^5.4.0", "@progress/kendo-angular-excel-export": "^4.0.1", "@progress/kendo-angular-grid": "^5.4.2", "@progress/kendo-angular-inputs": "^7.5.0", "@progress/kendo-angular-intl": "^3.1.1", "@progress/kendo-angular-l10n": "^3.0.2", "@progress/kendo-angular-label": "^3.1.0", "@progress/kendo-angular-layout": "^6.3.4", "@progress/kendo-angular-menu": "^3.0.2", "@progress/kendo-angular-notification": "^3.0.2", "@progress/kendo-angular-pdf-export": "^3.0.1", "@progress/kendo-angular-popup": "^4.0.1", "@progress/kendo-angular-progressbar": "^2.0.1", "@progress/kendo-angular-tooltip": "^3.0.2", "@progress/kendo-angular-treeview": "^5.4.1", "@progress/kendo-data-query": "^1.5.5", "@progress/kendo-drawing": "^1.15.0", "@progress/kendo-licensing": "^1.2.1", "@progress/kendo-theme-default": "^4.43.0", "@types/uuid": "^8.3.3", "applicationinsights-js": "^1.0.21", "core-js": "^2.6.12", "husky": "^0.14.3", "karma-junit-reporter": "^1.2.0", "msal": "^1.4.15", "prettier": "^2.5.1", "pretty-quick": "^3.1.2", "rimraf": "^2.7.1", "rxjs": "^6.6.7", "rxjs-compat": "^6.6.7", "tslib": "^2.3.1", "uuid": "^3.4.0", "zone.js": "~0.11.4" },

[ghost]

following.. facing the same issue

[ciiara]

The issue is no longer reproducing in the latest Grid versions after the migration to ivy formatted packages. Currently, the latest version is 7.1.0.