Telerik Forums
Kendo UI for Angular Forum
or
Ask question
All Questions
Unanswered
Answered
2,984 questions
0 answers
60 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
358 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
129 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
132 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
233 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
101 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
162 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
103 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
70 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.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

  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
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
DateInput
Sortable
Calendar
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
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Learn how
12 13
14
15 16
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Learn how
Want to show your ninja superpower to fellow developers?
Learn how