Questions on Kendo UI for Angular Forum

1 answer

88 views

I can't install any component on angular 10 with nodejs v16.20.2

Hello, I'm having problems installing Kendo to a current Angular project.

This is my package.json:

{
  "name": "aes-eclusagem-app",
  "version": "0.0.0",
  "engines": {
    "node": "14.x"
  },
  "scripts": {
    "ng": "ng",
    "start": "ng serve --open",
    "build": "ng build",
    "build-dev": "ng build --configuration=dev && ng build --configuration=pt-dev && ng build --configuration=en-dev",
    "build-qa": "ng build --configuration=qa && ng build --configuration=pt-qa && ng build --configuration=en-qa",
    "build-prod": "ng build --configuration=prod && ng build --configuration=pt-prod && ng build --configuration=en-prod",
    "extract": "ng xi18n --output-path=src/locale --ivy",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular-material-components/datetime-picker": "^4.0.5",
    "@angular/animations": "^10.1.1",
    "@angular/cdk": "^10.2.1",
    "@angular/common": "^10.1.1",
    "@angular/compiler": "^10.1.1",
    "@angular/core": "^10.1.1",
    "@angular/forms": "^10.1.1",
    "@angular/localize": "^10.2.2",
    "@angular/material": "^10.2.1",
    "@angular/material-moment-adapter": "^11.0.1",
    "@angular/platform-browser": "^10.1.1",
    "@angular/platform-browser-dynamic": "^10.1.1",
    "@angular/router": "^10.1.1",
    "@azure/msal-angular": "^1.1.1",
    "@clr/angular": "^3.1.4",
    "@clr/icons": "^3.0.0",
    "@clr/ui": "^3.0.0",
    "@fortawesome/angular-fontawesome": "^0.7.0",
    "@fortawesome/fontawesome-free": "^5.15.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.32",
    "@fortawesome/free-solid-svg-icons": "^5.15.1",
    "@kolkov/ngx-gallery": "^1.2.3",
    "@microsoft/applicationinsights-web": "^2.5.8",
    "@ng-bootstrap/ng-bootstrap": "^7.0.0",
    "@webcomponents/webcomponentsjs": "^2.0.0",
    "angular-highcharts": "^9.0.11",
    "angular2-text-mask": "^9.0.0",
    "angular2-uuid": "^1.1.1",
    "bootstrap": "^4.5.0",
    "faker": "^4.1.0",
    "file-saver": "^2.0.2",
    "font-awesome": "^4.7.0",
    "fp-ts": "^2.11.5",
    "guid-typescript": "^1.0.9",
    "hammerjs": "^2.0.8",
    "highcharts": "^8.1.2",
    "highcharts-angular": "^2.4.0",
    "json-server": "^0.16.1",
    "jspdf": "^2.5.1",
    "jspdf-autotable": "^3.5.25",
    "jszip": "^3.5.0",
    "lodash-es": "^4.17.21",
    "mat-select-autocomplete-angular9": "^1.0.0",
    "mat-table-filter": "^9.0.1",
    "minireset.css": "~0.0.4",
    "moment": "^2.27.0",
    "msal": "^1.3.4",
    "ng2-pdf-viewer": "^6.3.2",
    "ngx-mask": "^10.0.1",
    "ngx-mat-select-search": "^5.0.0",
    "ngx-material-timepicker": "^5.5.3",
    "ngx-swiper-wrapper": "^9.0.1",
    "ngx-toastr": "^12.1.0",
    "pdfmake": "^0.1.68",
    "resize-observer-polyfill": "^1.5.1",
    "rxjs": "~6.6.3",
    "rxjs-take-while-inclusive": "^2.1.1",
    "tslib": "^1.10.0",
    "uuidv4": "^6.2.12",
    "web-animations-js": "^2.3.2",
    "xng-breadcrumb": "^5.1.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1002.0",
    "@angular/cli": "^10.2.4",
    "@angular/compiler-cli": "^10.1.1",
    "@igniteui/angular-schematics": "^10.1.610",
    "@types/hammerjs": "^2.0.36",
    "@types/jasmine": "^3.5.14",
    "@types/jasminewd2": "~2.0.3",
    "@types/jszip": "^3.1.7",
    "@types/node": "^12.12.58",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "node-sass": "^4.14.1",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "^6.1.3",
    "typescript": "~4.0.2"
  }
}

When I tried to install any kendo package with npm install, or angular schematics (that is only compatible with node.js 19) and even @progress/kendo-licensing the error looks similar.

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @angular/http@7.2.16
npm WARN Found: @angular/core@10.1.6
npm WARN node_modules/@angular/core
npm WARN peer @angular/core@"^10.1.2" from @angular-material-components/datetime-picker@4.0.5
npm WARN node_modules/@angular-material-components/datetime-picker
npm WARN @angular-material-components/datetime-picker@"^4.0.5" from the root project
npm WARN 16 more (@angular/animations, @angular/cdk, @angular/common, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer @angular/core@"7.2.16" from @angular/http@7.2.16
npm WARN node_modules/@angular/http
npm WARN @angular/http@"^7.2.16" from mat-select-autocomplete-angular9@1.0.0
npm WARN node_modules/mat-select-autocomplete-angular9
npm WARN
npm WARN Conflicting peer dependency: @angular/core@7.2.16
npm WARN node_modules/@angular/core
npm WARN peer @angular/core@"7.2.16" from @angular/http@7.2.16
npm WARN node_modules/@angular/http
npm WARN @angular/http@"^7.2.16" from mat-select-autocomplete-angular9@1.0.0
npm WARN node_modules/mat-select-autocomplete-angular9
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @angular/http@7.2.16
npm WARN Found: @angular/platform-browser@10.1.6
npm WARN node_modules/@angular/platform-browser
npm WARN peer @angular/platform-browser@"^10.1.2" from @angular-material-components/datetime-picker@4.0.5
npm WARN node_modules/@angular-material-components/datetime-picker
npm WARN @angular-material-components/datetime-picker@"^4.0.5" from the root project
npm WARN 5 more (@angular/forms, @angular/platform-browser-dynamic, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer @angular/platform-browser@"7.2.16" from @angular/http@7.2.16
npm WARN node_modules/@angular/http
npm WARN @angular/http@"^7.2.16" from mat-select-autocomplete-angular9@1.0.0
npm WARN node_modules/mat-select-autocomplete-angular9
npm WARN
npm WARN Conflicting peer dependency: @angular/platform-browser@7.2.16
npm WARN node_modules/@angular/platform-browser
npm WARN peer @angular/platform-browser@"7.2.16" from @angular/http@7.2.16
npm WARN node_modules/@angular/http
npm WARN @angular/http@"^7.2.16" from mat-select-autocomplete-angular9@1.0.0
npm WARN node_modules/mat-select-autocomplete-angular9
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @angular/localize@10.2.2
npm ERR! Found: @angular/compiler@10.1.6
npm ERR! node_modules/@angular/compiler
npm ERR! peer @angular/compiler@"10.1.6" from @angular/compiler-cli@10.1.6
npm ERR! node_modules/@angular/compiler-cli
npm ERR! peer @angular/compiler-cli@"^10.0.0" from @angular-devkit/build-angular@0.1002.0
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR! dev @angular-devkit/build-angular@"^0.1002.0" from the root project
npm ERR! peer @angular/compiler-cli@"^10.0.0" from @ngtools/webpack@10.2.0
npm ERR! node_modules/@ngtools/webpack
npm ERR! @ngtools/webpack@"10.2.0" from @angular-devkit/build-angular@0.1002.0
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR! dev @angular-devkit/build-angular@"^0.1002.0" from the root project
npm ERR! 1 more (the root project)
npm ERR! peer @angular/compiler@"10.1.6" from @angular/platform-browser-dynamic@10.1.6
npm ERR! node_modules/@angular/platform-browser-dynamic
npm ERR! @angular/platform-browser-dynamic@"^10.1.1" from the root project
npm ERR! 1 more (the root project)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/compiler@"10.2.2" from @angular/localize@10.2.2
npm ERR! node_modules/@angular/localize
npm ERR! peerOptional @angular/localize@"^10.0.0" from @angular-devkit/build-angular@0.1002.0
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR! dev @angular-devkit/build-angular@"^0.1002.0" from the root project
npm ERR! peer @angular/localize@"^10.0.0" from @ng-bootstrap/ng-bootstrap@7.0.0
npm ERR! node_modules/@ng-bootstrap/ng-bootstrap
npm ERR! @ng-bootstrap/ng-bootstrap@"^7.0.0" from the root project
npm ERR! 1 more (the root project)
npm ERR!
npm ERR! Conflicting peer dependency: @angular/compiler@10.2.2
npm ERR! node_modules/@angular/compiler
npm ERR! peer @angular/compiler@"10.2.2" from @angular/localize@10.2.2
npm ERR! node_modules/@angular/localize
npm ERR! peerOptional @angular/localize@"^10.0.0" from @angular-devkit/build-angular@0.1002.0
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR! dev @angular-devkit/build-angular@"^0.1002.0" from the root project
npm ERR! peer @angular/localize@"^10.0.0" from @ng-bootstrap/ng-bootstrap@7.0.0
npm ERR! node_modules/@ng-bootstrap/ng-bootstrap
npm ERR! @ng-bootstrap/ng-bootstrap@"^7.0.0" from the root project
npm ERR! 1 more (the root project)
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\nicolas.falla\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\nicolas.falla\AppData\Local\npm-cache\_logs\2024-11-26T13_38_58_889Z-debug-0.log
PS C:\Users\nicolas.falla\Desktop\aes\smart-operations-frontend> npm install @progress/kendo-licensing@1.1.3 --save --legacy-deps
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @angular/http@7.2.16
npm WARN Found: @angular/core@10.1.6
npm WARN node_modules/@angular/core
npm WARN peer @angular/core@"^10.1.2" from @angular-material-components/datetime-picker@4.0.5
npm WARN node_modules/@angular-material-components/datetime-picker
npm WARN @angular-material-components/datetime-picker@"^4.0.5" from the root project
npm WARN 16 more (@angular/animations, @angular/cdk, @angular/common, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer @angular/core@"7.2.16" from @angular/http@7.2.16
npm WARN node_modules/@angular/http
npm WARN @angular/http@"^7.2.16" from mat-select-autocomplete-angular9@1.0.0
npm WARN node_modules/mat-select-autocomplete-angular9
npm WARN
npm WARN Conflicting peer dependency: @angular/core@7.2.16
npm WARN node_modules/@angular/core
npm WARN peer @angular/core@"7.2.16" from @angular/http@7.2.16
npm WARN node_modules/@angular/http
npm WARN @angular/http@"^7.2.16" from mat-select-autocomplete-angular9@1.0.0
npm WARN node_modules/mat-select-autocomplete-angular9
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @angular/http@7.2.16
npm WARN Found: @angular/platform-browser@10.1.6
npm WARN node_modules/@angular/platform-browser
npm WARN peer @angular/platform-browser@"^10.1.2" from @angular-material-components/datetime-picker@4.0.5
npm WARN node_modules/@angular-material-components/datetime-picker
npm WARN @angular-material-components/datetime-picker@"^4.0.5" from the root project
npm WARN 5 more (@angular/forms, @angular/platform-browser-dynamic, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer @angular/platform-browser@"7.2.16" from @angular/http@7.2.16
npm WARN node_modules/@angular/http
npm WARN @angular/http@"^7.2.16" from mat-select-autocomplete-angular9@1.0.0
npm WARN node_modules/mat-select-autocomplete-angular9
npm WARN
npm WARN Conflicting peer dependency: @angular/platform-browser@7.2.16
npm WARN node_modules/@angular/platform-browser
npm WARN peer @angular/platform-browser@"7.2.16" from @angular/http@7.2.16
npm WARN node_modules/@angular/http
npm WARN @angular/http@"^7.2.16" from mat-select-autocomplete-angular9@1.0.0
npm WARN node_modules/mat-select-autocomplete-angular9
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @angular/localize@10.2.2
npm ERR! Found: @angular/compiler@10.1.6
npm ERR! node_modules/@angular/compiler
npm ERR! peer @angular/compiler@"10.1.6" from @angular/compiler-cli@10.1.6
npm ERR! node_modules/@angular/compiler-cli
npm ERR! peer @angular/compiler-cli@"^10.0.0" from @angular-devkit/build-angular@0.1002.0
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR! dev @angular-devkit/build-angular@"^0.1002.0" from the root project
npm ERR! peer @angular/compiler-cli@"^10.0.0" from @ngtools/webpack@10.2.0
npm ERR! node_modules/@ngtools/webpack
npm ERR! @ngtools/webpack@"10.2.0" from @angular-devkit/build-angular@0.1002.0
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR! dev @angular-devkit/build-angular@"^0.1002.0" from the root project
npm ERR! 1 more (the root project)
npm ERR! peer @angular/compiler@"10.1.6" from @angular/platform-browser-dynamic@10.1.6
npm ERR! node_modules/@angular/platform-browser-dynamic
npm ERR! @angular/platform-browser-dynamic@"^10.1.1" from the root project
npm ERR! 1 more (the root project)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/compiler@"10.2.2" from @angular/localize@10.2.2
npm ERR! node_modules/@angular/localize
npm ERR! peerOptional @angular/localize@"^10.0.0" from @angular-devkit/build-angular@0.1002.0
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR! dev @angular-devkit/build-angular@"^0.1002.0" from the root project
npm ERR! peer @angular/localize@"^10.0.0" from @ng-bootstrap/ng-bootstrap@7.0.0
npm ERR! node_modules/@ng-bootstrap/ng-bootstrap
npm ERR! @ng-bootstrap/ng-bootstrap@"^7.0.0" from the root project
npm ERR! 1 more (the root project)
npm ERR!
npm ERR! Conflicting peer dependency: @angular/compiler@10.2.2
npm ERR! node_modules/@angular/compiler
npm ERR! peer @angular/compiler@"10.2.2" from @angular/localize@10.2.2
npm ERR! node_modules/@angular/localize
npm ERR! peerOptional @angular/localize@"^10.0.0" from @angular-devkit/build-angular@0.1002.0
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR! dev @angular-devkit/build-angular@"^0.1002.0" from the root project
npm ERR! peer @angular/localize@"^10.0.0" from @ng-bootstrap/ng-bootstrap@7.0.0
npm ERR! node_modules/@ng-bootstrap/ng-bootstrap
npm ERR! @ng-bootstrap/ng-bootstrap@"^7.0.0" from the root project
npm ERR! 1 more (the root project)
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\nicolas.falla\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\nicolas.falla\AppData\Local\npm-cache\_logs\2024-11-26T13_39_33_866Z-debug-0.log
PS C:\Users\nicolas.falla\Desktop\aes\smart-operations-frontend> npm install @progress/kendo-licensing@1.1.3 --save --legacy--perps-deps
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @angular/http@7.2.16
npm WARN Found: @angular/core@10.1.6
npm WARN node_modules/@angular/core
npm WARN peer @angular/core@"^10.1.2" from @angular-material-components/datetime-picker@4.0.5
npm WARN node_modules/@angular-material-components/datetime-picker
npm WARN @angular-material-components/datetime-picker@"^4.0.5" from the root project
npm WARN 16 more (@angular/animations, @angular/cdk, @angular/common, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer @angular/core@"7.2.16" from @angular/http@7.2.16
npm WARN node_modules/@angular/http
npm WARN @angular/http@"^7.2.16" from mat-select-autocomplete-angular9@1.0.0
npm WARN node_modules/mat-select-autocomplete-angular9
npm WARN
npm WARN Conflicting peer dependency: @angular/core@7.2.16
npm WARN node_modules/@angular/core
npm WARN peer @angular/core@"7.2.16" from @angular/http@7.2.16
npm WARN node_modules/@angular/http
npm WARN @angular/http@"^7.2.16" from mat-select-autocomplete-angular9@1.0.0
npm WARN node_modules/mat-select-autocomplete-angular9
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @angular/http@7.2.16
npm WARN Found: @angular/platform-browser@10.1.6
npm WARN node_modules/@angular/platform-browser
npm WARN peer @angular/platform-browser@"^10.1.2" from @angular-material-components/datetime-picker@4.0.5
npm WARN node_modules/@angular-material-components/datetime-picker
npm WARN @angular-material-components/datetime-picker@"^4.0.5" from the root project
npm WARN 5 more (@angular/forms, @angular/platform-browser-dynamic, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer @angular/platform-browser@"7.2.16" from @angular/http@7.2.16
npm WARN node_modules/@angular/http
npm WARN @angular/http@"^7.2.16" from mat-select-autocomplete-angular9@1.0.0
npm WARN node_modules/mat-select-autocomplete-angular9
npm WARN
npm WARN Conflicting peer dependency: @angular/platform-browser@7.2.16
npm WARN node_modules/@angular/platform-browser
npm WARN peer @angular/platform-browser@"7.2.16" from @angular/http@7.2.16
npm WARN node_modules/@angular/http
npm WARN @angular/http@"^7.2.16" from mat-select-autocomplete-angular9@1.0.0
npm WARN node_modules/mat-select-autocomplete-angular9
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @angular/localize@10.2.2
npm ERR! Found: @angular/compiler@10.1.6
npm ERR! node_modules/@angular/compiler
npm ERR! peer @angular/compiler@"10.1.6" from @angular/compiler-cli@10.1.6
npm ERR! node_modules/@angular/compiler-cli
npm ERR! peer @angular/compiler-cli@"^10.0.0" from @angular-devkit/build-angular@0.1002.0
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR! dev @angular-devkit/build-angular@"^0.1002.0" from the root project
npm ERR! peer @angular/compiler-cli@"^10.0.0" from @ngtools/webpack@10.2.0
npm ERR! node_modules/@ngtools/webpack
npm ERR! @ngtools/webpack@"10.2.0" from @angular-devkit/build-angular@0.1002.0
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR! dev @angular-devkit/build-angular@"^0.1002.0" from the root project
npm ERR! 1 more (the root project)
npm ERR! peer @angular/compiler@"10.1.6" from @angular/platform-browser-dynamic@10.1.6
npm ERR! node_modules/@angular/platform-browser-dynamic
npm ERR! @angular/platform-browser-dynamic@"^10.1.1" from the root project
npm ERR! 1 more (the root project)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/compiler@"10.2.2" from @angular/localize@10.2.2
npm ERR! node_modules/@angular/localize
npm ERR! peerOptional @angular/localize@"^10.0.0" from @angular-devkit/build-angular@0.1002.0
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR! dev @angular-devkit/build-angular@"^0.1002.0" from the root project
npm ERR! peer @angular/localize@"^10.0.0" from @ng-bootstrap/ng-bootstrap@7.0.0
npm ERR! node_modules/@ng-bootstrap/ng-bootstrap
npm ERR! @ng-bootstrap/ng-bootstrap@"^7.0.0" from the root project
npm ERR! 1 more (the root project)
npm ERR!
npm ERR! Conflicting peer dependency: @angular/compiler@10.2.2
npm ERR! node_modules/@angular/compiler
npm ERR! peer @angular/compiler@"10.2.2" from @angular/localize@10.2.2
npm ERR! node_modules/@angular/localize
npm ERR! peerOptional @angular/localize@"^10.0.0" from @angular-devkit/build-angular@0.1002.0
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR! dev @angular-devkit/build-angular@"^0.1002.0" from the root project
npm ERR! peer @angular/localize@"^10.0.0" from @ng-bootstrap/ng-bootstrap@7.0.0
npm ERR! 1 more (the root project)
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\nicolas.falla\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\nicolas.falla\AppData\Local\npm-cache\_logs\2024-11-26T13_39_58_850Z-debug-0.log

What can I do to fix my problem? I ran on my console npm with:

--legacy-peer-deps

And didn't work

NOTE: it's impossible running my project without nodejs v16.20.2

Gantt

Licensing

answered on 29 Nov 2024

1 answer

151 views

Scheduler performance issue when providing a lot of resources

Hello.

We are using scheduler timeline view to show workers work schedule. We treat workers as resources. In some production environments we have more than 800 workers and in such cases application is very laggy or even not responding. In real life scenario we have custom styling for each slot depending on workers out of work days or configured work shift color. In provided stackblitz sample we limited ourselves to simple scheduler and still for hundreds of resources there are problems with performance.

Can you suggest solution for this issue or provide paging/virtualization for timeline view?

https://stackblitz.com/edit/angular-ebvckh?file=src%2Fapp%2Fapp.component.ts

Scheduler

answered on 29 Nov 2024

2 answers

82 views

Kendo Editor not update after input changed

Kendo Edit value does not update,

when user type a text in kendo editor, and then data update by code, example set default value button.

https://stackblitz.com/edit/angular-iqrnxy

Please note that, Same behavior in case if we use ReactiveFormModule (value not updated after user type a text). I am sure this is bug.

Editor

answered on 28 Nov 2024

1 answer

60 views

Delete icon in the button slightly displaced to the left..

Hi,

I know this is minor, but it looks like that when using trashIcon from svgIcons as icon within the button, icon is slightly displaced to the left.
Strange enough, all others are centered, only this one is moved slightly to the left.

Before calling me crazy, it wasn't just me noticing it, but also a couple of users. :)

I simply added following into existing icon button example just to make sure it wasn't some broken css in the app:

      <div class="col-xs-12 col-sm-6 col-md-4 example-col">
        <button kendoButton [svgIcon]="svgTrash">Delete</button>
        <button kendoButton [svgIcon]="svgTrash" title="Delete"></button>
      </div>

Cheers :)

Vedad

Button

Icon

answered on 28 Nov 2024

11 answers

1.4K+ views

Toolbar, dynamic buttons & overflow

Hello,

i'm trying to create a toolbar component wrapper that allows the user to configure the toolbar passing a list of json objects, using overflow feature.

I'm facing 2 problems

when i hide a button using ngIf the button disappears from normal visualization and appears in the overflow popup, despite the available space. The button appears when a resize is fired.
o often get an error "TypeError: Cannot read property 'nativeElement' of undefined" when the overflow popup is opened

Is there a correct way to create buttons dynamically?

Thanks,

My markup

01.<div

02. class="toolbar-container"

03. [ngClass]="{ 'toolbar-container-closed': !isExpanded }"

04.>

05. <div class="toolbar-expander" title="{{ 'CORE.TOGGLE_TOOLBAR' | translate }}">

06. <i

07. class="material-icons expander"

08. *ngIf="!isExpanded && canCollapse"

09. (click)="toggleExpand()"

10. >

11. keyboard_arrow_down

12. </i>

13. <i

14. class="material-icons expander"

15. *ngIf="isExpanded && canCollapse"

16. (click)="toggleExpand()"

17. >

18. keyboard_arrow_up

19. </i>

20. </div>

21. <div

22. class="toolbar-toolbar-container"

23. [ngClass]="{

24. 'toolbar-toolbar-container-hidden': !isExpanded

25. }"

26. >

27. <kendo-toolbar

28. #toolbar

29. [ngClass]="{

30. 'toolbar-toolbar-right': right,

31. 'toolbar-toolbar-left': !right

32. }"

33. overflow="true"

34. [style.width.%]="100"

35. [popupSettings]="{ animate: false }"

36. >

37. <div *ngFor="let item of config.items">

38. <kendo-toolbar-button

39. *ngIf="item.type === 'button' && !item.hidden"

40. [disabled]="item.disabled"

41. [iconClass]="getIconClass(item.icon)"

42. [text]="item.text"

43. title="{{ item.tooltipText | translate }}"

44. (click)="item.onClick(item)"

45. >

46. </kendo-toolbar-button>

47. <kendo-toolbar-dropdownbutton

48. *ngIf="item.type === 'dropdownbutton' && !item.hidden"

49. [iconClass]="getIconClass(item.icon)"

50. [text]="item.text"

51. [data]="item.data"

52. title="{{ item.tooltipText | translate }}"

53. (itemClick)="onItemClick($event, item)"

54. [textField]="item.textField"

55. >

56. </kendo-toolbar-dropdownbutton>

57. <kendo-toolbar-splitbutton

58. *ngIf="item.type === 'splitbutton' && !item.hidden"

59. [disabled]="item.disabled"

60. [iconClass]="getIconClass(item.icon)"

61. [text]="item.text"

62. [data]="item.data"

63. title="{{ item.tooltipText | translate }}"

64. (buttonClick)="item.onClick(item)"

65. (itemClick)="onItemClick($event, item)"

66. [textField]="item.textField"

67. >

68. </kendo-toolbar-splitbutton>

69. <kendo-toolbar-separator

70. *ngIf="item.type === 'separator' && !item.hidden"

71. ></kendo-toolbar-separator>

72. </div>

73. </kendo-toolbar>

74. </div>

75.</div>

ToolBar

answered on 27 Nov 2024

1 answer

409 views

Getting cannot resolve type entity i25.IconsModule error

Hi,

We are using kendo UI for angular in our project. The angular version is 18. We are upgrading bootstrap from version 3.x to five point 5.3.3.
When we did an ng build it failed with the following error.
"cannot resolve type entity i25.IconsModule error"
My question is, are there any changes to the kendo libraries that it needs 
kendo-angular-icons package to be installed as well?
 
We never had to do this before. We never included this library in our angular package.json
 
Regards,
Jyothi

General Discussions

Icon

answered on 25 Nov 2024

0 answers

80 views

Inconsistent Background Color for Sortable Columns in Kendo Grid (Scrollable vs. Non-Scrollable Modes)

Issue:

Sortable columns in Kendo Grid show inconsistent background color styling between scrollable and non-scrollable modes due to differences in how the DOM is rendered: https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes#scrollable-mode

Scrollable Mode: Background color is applied to all cells (<th> and <td>) in the sortable column.
Non-Scrollable Mode: Background color is applied only to the header cell (<th>).

Expected Behavior:

The background color should apply uniformly to all cells (<th> and <td>) in sortable columns, regardless of the scrolling mode.

Actual Behavior:

In scrollable grids, the background color is applied to all cells in the sortable column.
In non-scrollable grids, the background color is applied only to the header cell.

Question:

Is there a way to ensure uniform background color styling for all cells (<th> and <td>) in sortable columns, regardless of the scrolling mode, through built-in configuration or a recommended workaround?

Steps to Reproduce:

Create a Kendo Grid with sortable columns.
Enable scrolling for one grid (default behavior) and disable it for another.

Link to Reproduce։ https://stackblitz.com/edit/angular-axcc1j?file=src%2Fapp%2Fapp.component.ts

Environment:

Kendo UI version: ^16.8.0
Angular version: ^18.2.0

updated question on 25 Nov 2024

0 answers

197 views

How to change the caret icon in DropDownList, ComboBox, NumericTextBox?

Is it possible to customize the black triangular "caret-down" icon used in the DropdownList and similar components (like ComboBox)?

I’d also like to know how to replace the "caret-up" and "caret-down" icons in the NumericTextBox.

Our apps use Font Awesome icons consistently, and I’m trying to replace these default icons with Font Awesome equivalents, but I haven’t been able to figure out how to do this. Could you provide guidance or examples?

DropDownList

Icon

asked on 22 Nov 2024

1 answer

141 views

Cannot find how to work with Ids for Text box to get Selenium tests to correctly interact with them.

5:45 PM found this SO post: Selenium with Kendo UI

Is the 'hard way' of writing xpath in C# the way to do this, using Se Web Driver? The post is 6 years old ... there's not a better way?

Crossing my fingers, there's an easier way than running the test, letting it fail, mapping out x-path, rinse-lather-repeat, eventually get there? :)

==================== Above New info as of 5:45 20 Nov =====================

Looking over the docs, I find nothing helpful with learning how to make the kendo textbox interactive with Se Tests.

Here is what I'm facing, I'm inserting from some emails and a Stack O post.

It appears our .scss file is a major player here. There isn’t a clear input for the Se tests to see where to put what. I don’t know enough about SCSS SASS to be sure but finally tracked down the id being tacked on to the k-input-inner class. From this I sort of catch on to what’s zapping us with using the Se Web Driver and Se IDE tests.

Here is the Id noted: k-d6dd8b3b-9d55-45cb-927c-634d4f11473c. Note how it is prepended to the k-input-inner to render the text. This appears really super nested. I think the test can’t find where to put the text and just puts it an input at the first point in the hierarchy it finds.

See Screenshot_1.png

The green shows where I typed the text in the intended text location. Yellow shows where the test put it – in the validator indicator span, forgive any terminology error there. I’m not seeing the same inner text area as in the top screen shot.

My conclusion is the _inputs.scss file might be the issue. We’re having rendering given 2 different ways depending on whether we run the test or spin the page up in dotnet watch run.

I’m trying to find where in the _inputs.scss file is the starting point, to drill further into the issue. The closest I can find is on line 332:

.k-maskedtextbox {

height: 1.3rem;

input.k-input-inner {

font-size: 12px;

padding: 1px 3px 0px;

}

If this is right, in order to use Se IDE, Web Driver or Grid, we may have to rethink our SCSS strategy. I’d say that’s above my pay grade.

Still, can we take a look at this?

See Screenshot_2.png

My lead got back with me to clarify that while CSS can be used in design in our case it is not, and to look instead into the Kendo docs for how ids are generated and so on.

Well, looking in the docs I see how to set up a basic project and get basic code working. Can't find anything on how to do what I need -- how to make Se tests drive Kendo elements for doing tests.

DateInput

TextBox

answered on 21 Nov 2024

1 answer

156 views

Using content projection (<ng-content>) in Kendo Grid

I am attempting to standardize a lot of my grids for my application. They all follow the same general set up for filtering, sorting, etc. But each grid might have some specific customizations. Usually this is just customizing the command column to have different command (edit button, actions menu, etc), but this can also take the form of additional toolbar buttons and the like.

To do this, I am trying to make a component that uses Kendo Grid, has it set up the way I want to, but uses <ng-content> to project additional requirements.

However, it seems this is completely ignored by the grid, and nothing is ever rendered.

Example stackblitz which shows the issue: https://stackblitz.com/edit/angular-zc4drs?file=src%2Fapp%2Fapp.component.ts

The actual kendo grids that I'm working on are much more complicated, which is a large motivation for having a common component that I can use and inject additional stuff into as needed. Any help would be appreciated.

General Discussions

Grid

answered on 21 Nov 2024