Telerik Forums
Kendo UI for Angular Forum
or
Ask question
All Questions
Unanswered
Answered
2,988 questions
1 answer
152 views
.k-animation-container
Hello

Using Kendo Grid for Angular

I have a weid behaviour where the last right filter popup menu will push to hole page to the left, because of its fixed positioning :

Here is the view while no filter is opened :





What can fix that ? Does the kendo grid have the hability to keep its popup items into its area ?



Thanks in advance
Grid
Popup
Martin Bechev
Telerik team
 answered on 12 Dec 2024
1 answer
74 views
Prevent Kendo Grid Inline Editor from applying changes back to data item

I have a Kendo Grid that displays a date. I wish to make it inline-editable.

The kicker here is that I'm also using ngrx for immutable state management / redux pattern. So, the array that is used for the data in KendoGird, as is each individual object is immutable. Unfortunately, it looks like when I use Kendo Grid's editor functions, it attempts to apply the changes to the dataItem (which is read-only and produces an error and prevents moving forward)

I've produced an example that shows this. It doesn't use ngrx just to avoid having to set that up for the example, but it makes the object that is used for the dataItem immutable using Object.defineProperties().

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

You can see trying to update the date causes an error in the application.

I was hoping to prevent the save on Kendos's side using sender.cancelCell();  but that doesn't seem to work.

Any ideas?

Grid
Martin Bechev
Telerik team
 answered on 12 Dec 2024
0 answers
153 views
Kendo grid horizontal auto scroll not working with sticky or locked columns

Right now in my company we are trying to fix an issue were if we have a grid with with some locked columns in the left side of the grid, if we try to reorder some of the columns (not locked) from the right side to the grid the horizontal scroll doesn't move when we try to drag and drop the column.

I took code from one of your demos and made a small change jus to show the behavior:

 <kendo-grid [kendoGridBinding]="gridData" [height]="410" [reorderable]="true">
      <kendo-grid-column field="ProductID" title="ID" [width]="100" [locked]="true">
      </kendo-grid-column>
      <kendo-grid-column
        field="ProductName"
        title="Name"
        [locked]="true"
        [width]="250"
      >
      </kendo-grid-column>
      <kendo-grid-column
        field="Category.CategoryName"
        title="Category"
        [width]="250"
      >
      </kendo-grid-column>
      <kendo-grid-column
        field="UnitPrice"
        title="Price"
        [width]="150"
      >
      </kendo-grid-column>
      <kendo-grid-column field="UnitsInStock" title="In stock" [width]="150">
      </kendo-grid-column>
      <kendo-grid-column field="UnitsOnOrder" title="On order" [width]="150">
      </kendo-grid-column>
      <kendo-grid-column
        field="QuantityPerUnit"
        title="Quantity"
        [width]="150"
      >
      </kendo-grid-column>
      <kendo-grid-column
        field="Discontinued"
        title="Discontinued"
        [width]="150"
      >
        <ng-template kendoGridCellTemplate let-dataItem>
          <input type="checkbox" [checked]="dataItem.Discontinued" disabled />
        </ng-template>
      </kendo-grid-column>
    </kendo-grid>

 

In this image you can see that the horizontal scrollbar is not moving.

Even removing the locked columns the auto horizontal scroll doesn't work.

This functionality seems like works fine on the React version of the grid.

Is there a way to make the horizontal scrollbar to move?

Drag and Drop
Grid
Omar
Top achievements
Rank 1
 updated question on 11 Dec 2024
0 answers
47 views
Strange issue while mouse wheel over locked column in Kendo Angular grid

Hi!

So could you maybe help with such problem. I tested same thing on demo on official website and it works fine:

event is WheelEvent here, which is good. However, when I do same thing in my application (try to scroll over locked column), I get an error because event is undefined in the exact same place:

 

Do you maybe know or have suggestions what could be the cause? Thank you!

 

Here is not compressed version. Shouldn't it be args.preventDefault() instead of "event"?

Grid
Pavlo
Top achievements
Rank 1
 updated question on 09 Dec 2024
0 answers
62 views
Kendo Chart for Angular: event on lowlighting serie item

Is there any event, which is fired, when the chart column is lowlighted? E.g. when the cursor goes to another serie item or simply goes far enough.

I know there is an event "seriesLeave", but this is not what I'm looking for since this is fired directly when the cursor moves off the column and not yet when the columns turn darker.

I've already tried "plotAreaLeave", but neither this is the one I need.

Thanks for any reply.

Charts
J
Top achievements
Rank 1
Iron
Iron
 asked on 06 Dec 2024
1 answer
370 views
Creating a custom Date Range Filter for a grid using Filter menu

We are wanting to implement a date range filter in our Kendo Grid. We use the filter menu (`"filterable"='menu'`). We found a great example for the `row` style filter:

 

https://www.telerik.com/kendo-angular-ui/components/grid/filtering/filter-row#using-daterange

 

Trying to convert it to a filter menu (which should be as simple as changing`kendoGridFilterCellTemplate` to `kendoGridFilterMenuTemplate`) it doesn't work. It shows up, but interacting with it at all produces an error. Live example:

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

 

Looking for a bit of help here on how to implement this.

DateRange
Filter
Grid
Hetali
Telerik team
 answered on 05 Dec 2024
1 answer
134 views
Package "@progress/kendo-angular-buttons" was found but does not support schematics

I just did an ng add for kendo-angular-buttons and got this message:

"Package "@progress/kendo-angular-buttons" was found but does not support schematics."

It's not an error, but it is an alarming red color on my Powershell window...

What does this mean and should I worry about it?

Button
Hetali
Telerik team
 answered on 05 Dec 2024
1 answer
139 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
239 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
106 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
Narrow your results
Done
Selected tags
Tags
General Discussions
Grid
Charts
Scheduler
TreeView
Editor
DropDownList
MultiSelect
Styling
DatePicker
PDF Export
Upload
TreeList
ComboBox
Filter
Dialog
Window
Excel Export
ToolBar
Tooltip
Button
Drawer
TextBox
TabStrip
DateTimePicker
Menu
NumericTextBox
Popup
Accessibility
Calendar
DateInput
Sortable
CheckBox
DateRange
Forms
Icon
Pager
PanelBar
Licensing
AutoComplete
Drag and Drop
Conversational UI
DropDownTree
Gantt
Data Query
Notification
ScrollView
Drawing
FileSelect
Localization
MultiViewCalendar
TextArea
PDFViewer
Label
ListView
MaskedTextBox
MultiColumnComboBox
Splitter
TileLayout
Stepper
GridLayout
Switch
Spreadsheet
ContextMenu
SVGIcon
TimePicker
DropDownButton
Loader
ListBox
ExpansionPanel
Gauges
ProgressBar
PivotGrid
FormField
ButtonGroup
Slider
SplitButton
Map
Timeline
Chip
RadioButton
Security
Popover
AppBar
Avatar
Card
ColorGradient
ColorPalette
ColorPicker
Date Math
FloatingLabel
Skeleton
Signature
Badge
BreadCrumb
ChipList
File Saver
RangeSlider
Ripple
BottomNavigation
ActionSheet
Typography
StackLayout
AIPrompt
ChunkProgressBar
FloatingActionButton
CircularGauge
Barcode
QRCode
CircularProgressBar
FlatColorPicker
VS Code Extension
Rating
ArcGauge
LinearGauge
RadialGauge
Page Templates / Building Blocks
Chart Wizard
OTP Input
Diagram
SpeechToTextButton
InlineAIPrompt
AI Coding Assistant
StockChart
Sankey
Sparkline
Agentic UI Generator
+? more
Top users last month
Robert
Top achievements
Rank 1
Luis Cordoba
Top achievements
Rank 1
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
Membatalkan pinjaman
Top achievements
Rank 2
Want to show your ninja superpower to fellow developers?
Learn how
12 13
14
15 16
Top users last month
Robert
Top achievements
Rank 1
Luis Cordoba
Top achievements
Rank 1
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
Membatalkan pinjaman
Top achievements
Rank 2
Want to show your ninja superpower to fellow developers?
Learn how
Want to show your ninja superpower to fellow developers?
Learn how