Telerik Forums
Kendo UI for Angular Forum
or
Ask question
All Questions
Unanswered
Answered
2,914 questions
1 answer
63 views
Grid column template with inside component do not update

Hi, I have a simple column that displays a numeric value in box colored text. I use a shared component for that.

Like:

<kendo-grid-column field="{{ col.field }}" title="{{ col.title }}" format="{{ col.gridFormat }}" [width]="col.width" [hidden]="!col.gridVisible" media="{{ col.media }}">
  @if (col.field == 'statut') {
    <ng-template kendoGridCellTemplate let-dataItem="dataItem">
      {{ dataItem.statut }}
      <share-app-statut [statut]="dataItem.statut"></share-app-statut>
    </ng-template>
  }
</kendo-grid-column>

Everything works well until I change some filters then the grid updates. All the fields change except the component in the template (but the numerical value changes we can see it with the {{dataitem.statut}}.  The only way I can force the grid to redraw the template component is to set the data to null before setting a new value. (I use a signal to feed the grid). So a:

this.data.set(null);
this.data.set([......]); work!

But the grid flash... I am new with template inside grid, What do I do wrong?

Grid
Martin Bechev
Telerik team
 answered on 05 Dec 2024
2 answers
135 views
Issue with kendo-formfield in Customized FormFieldComponent: "The kendo-formfield component should contain only one control" Error
Hello Team

I’m encountering an issue with the kendo-formfield component when used within my custom wrapper component, FormFieldComponent. Even though I am passing a single form control with formControlName, the component keeps throwing the following error:


Error: The `kendo-formfield` component should contain only one control of type NgControl with a formControlName or an ngModel binding.

My Setup:

I’ve created a custom wrapper component, FormFieldComponent, which looks like this:

import { Component, Input, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';
import { InputsModule, Orientation, ShowOptions } from '@progress/kendo-angular-inputs';

@Component({
  selector: 'mnp-form-field',
  standalone: true,
  imports: [CommonModule, InputsModule],
  encapsulation: ViewEncapsulation.None,
  template: `
    <kendo-formfield [orientation]="orientation!" [showErrors]="showErrors!" [showHints]="showHints!">
      <ng-content></ng-content>
    </kendo-formfield>
  `,
  styleUrl: './form-field.component.scss',
})
export class FormFieldComponent {
  @Input() orientation?: Orientation;
  @Input() showErrors?: ShowOptions;
  @Input() showHints?: ShowOptions;
}
In my Storybook story, I’m using this component with a ReactiveFormsModule setup. Here’s the story code:


export const EmailFieldWithFormGroup: Story = {
  render: () => {
    const formBuilder = new FormBuilder();

    const emailForm: FormGroup = formBuilder.group({
      email: ['', [Validators.required, Validators.email]],
    });

    return {
      props: {
        emailForm,
        emailControl: emailForm.get('email'),
        onSubmit: () => {
          if (emailForm.valid) {
            console.log('Form submitted:', emailForm.value);
          } else {
            console.error('Form is invalid');
          }
        },
      },
      template: `
        <form [formGroup]="emailForm" (ngSubmit)="onSubmit()">
          <fieldset>
            <legend>Email Field</legend>
            <mnp-form-field>
              <mnp-label [for]="'email'" text="Email"></mnp-label>
              <mnp-textbox formControlName="email"></mnp-textbox>
              <mnp-form-hint>Enter your email address</mnp-form-hint>
              <mnp-form-error *ngIf="emailForm.controls['email'].invalid && emailForm.controls['email'].touched">
                Error: Please provide a valid email address.
              </mnp-form-error>
            </mnp-form-field>
          </fieldset>
        </form>
      `,
    };
  },
};


FormField
Forms
Zornitsa
Telerik team
 answered on 03 Dec 2024
1 answer
60 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
Yanmario
Telerik team
 answered on 29 Nov 2024
1 answer
96 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
Yanmario
Telerik team
 answered on 29 Nov 2024
2 answers
44 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
Levon
Top achievements
Rank 1
Iron
Iron
 answered on 28 Nov 2024
1 answer
38 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
Zornitsa
Telerik team
 answered on 28 Nov 2024
11 answers
1.3K+ 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

  1. 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.
  2. 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
ICT
Top achievements
Rank 1
Iron
 answered on 27 Nov 2024
1 answer
278 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
Jyothi
Top achievements
Rank 1
Iron
Iron
Veteran
 answered on 25 Nov 2024
0 answers
55 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:

  1. Create a Kendo Grid with sortable columns.
  2. 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

General Discussions
Grid
ScrollView
Sortable
Anna
Top achievements
Rank 1
 updated question on 25 Nov 2024
0 answers
120 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
Alina
Top achievements
Rank 1
 asked on 22 Nov 2024
Narrow your results
Done
Selected tags
Tags
General Discussions
Grid
Charts
Scheduler
TreeView
Editor
DropDownList
MultiSelect
Styling
DatePicker
PDF Export
Upload
TreeList
ComboBox
Filter
Window
Dialog
Excel Export
Button
Drawer
ToolBar
Tooltip
TabStrip
TextBox
DateTimePicker
Menu
NumericTextBox
Popup
Sortable
DateInput
Calendar
CheckBox
Accessibility
DateRange
Forms
Icon
Pager
PanelBar
Drag and Drop
AutoComplete
Conversational UI
DropDownTree
Gantt
Notification
ScrollView
Data Query
FileSelect
Licensing
MultiViewCalendar
TextArea
ListView
Localization
MaskedTextBox
MultiColumnComboBox
TileLayout
Drawing
Splitter
Stepper
GridLayout
Label
Switch
PDFViewer
Spreadsheet
TimePicker
ContextMenu
DropDownButton
SVGIcon
Loader
ListBox
Gauges
ProgressBar
PivotGrid
FormField
ButtonGroup
ExpansionPanel
Slider
SplitButton
Map
Chip
RadioButton
Security
Timeline
AppBar
Avatar
Card
ColorGradient
ColorPalette
ColorPicker
Date Math
FloatingLabel
Skeleton
Signature
Popover
Badge
BreadCrumb
ChipList
File Saver
RangeSlider
Ripple
BottomNavigation
ActionSheet
Typography
StackLayout
ChunkProgressBar
FloatingActionButton
CircularGauge
Barcode
QRCode
CircularProgressBar
FlatColorPicker
VS Code Extension
Rating
ArcGauge
LinearGauge
RadialGauge
Page Templates / Building Blocks
Chart Wizard
AIPrompt
OTP Input
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Learn how
5 6
7
8 9
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Learn how
Want to show your ninja superpower to fellow developers?
Learn how