Telerik Forums
Kendo UI for Angular Forum
1 answer
16 views

I'm working on an Angular 19 application. Based on the codebase with kendo 19.1.2,
i'm trying to Implement a user-configurable date format that can be changed at runtime (e.g., 'dd/MM/yyyy', 'yyyy-MM-dd', 'dd MMM yy').
The date format should be configurable per user.
All dates displayed throughout the application should use this custom format
Date parsing (when users input dates manually) should respect this format
Kendo DatePickers should continue using their internal 'c' or 'g' format for the picker UI, but display/parse the selected date using the user's custom format
I attempted to override the clrdIntlService but it didn't work correctly. The datepickers didn't respect the custom format.
Questions:

What's the correct approach to implement this? Should I:
 * Create a custom IntlService for Kendo?
 * Override date formatting globally?
How can I make Kendo DatePickers use the custom format for display/parsing while keeping their internal format?

Can you provide a complete working example with:
- Service/provider configuration
- Integration with Kendo DatePicker
- How to apply it across the entire application

Thank you in advance!

Martin Bechev
Telerik team
 answered on 10 Oct 2025
0 answers
12 views

We’re experiencing a performance slowdown in our Angular application whenever a tooltip is hovered. Upon inspection in Chrome DevTools, we observed multiple warnings such as

These violations appear only during tooltip hover events, causing noticeable UI lag.

Environment:

  • Framework: Angular

  • Browser: Chrome (latest version)

  • Tooltip Type: Custom tooltip (triggered on hover)

    can you help with that? Thanks in advance.

saravanan
Top achievements
Rank 1
 asked on 07 Oct 2025
1 answer
15 views

After v20.0.0 update and the removal of kendoGridGroupBinding directive, there is a new bug that was not there before.

If you are in group mode, and you programmatically change row data, the data does not reflect the changes visually, unless you collapse the groups and re-expand them again to see the new changes. 

This problem only started after removing the kendoGridGroupBinding input or directive.

 

*Update: this problem only happens when virtual scroll is on. 

I have also noticed that selecting a row is glitchy when the grid is grouped and sorted, especially when it is initially sorted and grouped.

Martin Bechev
Telerik team
 answered on 07 Oct 2025
1 answer
7 views

We are using the @progress/kendo-angular-grid@^20 without the AI Prompt feature.

However it turns out @progress/kendo-angular-conversational-ui and it's peer dependencies are included in the final bundle.

We do not want these unused features to be included in the final bundle, as they're not required.

See related https://github.com/telerik/kendo-angular/issues/4700

Yanmario
Telerik team
 answered on 07 Oct 2025
1 answer
30 views

How to deal with strict rules at Content security policy are.

Using Angular 20 and Kendo 20 Version. 
Currently just importing "CheckBoxModule" (only) in NgModule of application got error in console

This document requires 'TrustedHTML' assignment.
Uncaught TypeError: Failed to set the 'innerHTML' property on 'Element': This document requires 'TrustedHTML' assignment


When removing the error disappear and application works.

Zornitsa
Telerik team
 answered on 02 Oct 2025
1 answer
14 views

Hi,

The scolling to an item doesn't seem to be working when paging (and not on the correct page).

The demo also doesn't work (click the scroll to item 57 button):

https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes#scrolling-to-a-specific-item

It there a fix or workaround?

Kind regards

Hetali
Telerik team
 answered on 29 Sep 2025
1 answer
18 views
 

I was following this: https://www.telerik.com/kendo-angular-ui/components/installation/migration/v18-to-v19

Gave the command: 


npx @progress/kendo-cli migrate --from=18 --to=19

And I got:

 

Why is it skipping v19? My Angular version is 19.2.x. I want to update to v19, test everything and only then migrate both Angular, Material, and Kendo to v20

Thanks in advance

Zornitsa
Telerik team
 answered on 29 Sep 2025
2 answers
14 views

Hello.

I have a single-spa micro frontend web application that's written in Angular 16 and wrapped in React 19 that's having issues recognizing the Kendo UI for Angular license at runtime in the browser.

The following warning is displayed in the browser's DevTools after the application has loaded:

I've reviewed the cause of the error message listed at kendo-angular-ui/components/licensing/license-errors-and-warnings and have verified that I have an active license for Kendo UI for Angular, as shown below:

I've also followed the steps listed at kendo-angular-ui/components/licensing to ensure the license is properly downloaded and activated, with the following result:

Lastly, I've tried removing the node_modules folder and running yarn install after ensuring that the project's .angular folder has been deleted.

However, the warning messaged mentioned at the start is still being displayed.

Here's what packages are currently installed for the project in package.json:

{
  "packageManager": "yarn@1.22.22",
  "dependencies": {
    "@angular-architects/module-federation-runtime": "^16.0.3",
    "@angular-devkit/core": "~16.2.10",
    "@angular-devkit/schematics": "~16.2.10",
    "@angular/animations": "~16.2.12",
    "@angular/common": "~16.2.12",
    "@angular/compiler": "~16.2.12",
    "@angular/core": "~16.2.12",
    "@angular/forms": "~16.2.12",
    "@angular/localize": "~16.2.12",
    "@angular/platform-browser": "~16.2.12",
    "@angular/platform-browser-dynamic": "~16.2.12",
    "@angular/router": "~16.2.12",
    "@apollo/client": "^3.4.5",
    "@babel/core": "^7.0.0-0",
    "@babel/plugin-proposal-dynamic-import": "^7.18.6",
    "@fortawesome/angular-fontawesome": "~0.13.0",
    "@fortawesome/fontawesome-pro": "^6.4.2",
    "@fortawesome/fontawesome-svg-core": "^6.4.2",
    "@fortawesome/pro-light-svg-icons": "^6.4.2",
    "@fortawesome/pro-regular-svg-icons": "^6.4.2",
    "@fortawesome/pro-solid-svg-icons": "^6.4.2",
    "@fortawesome/pro-thin-svg-icons": "^6.4.2",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@ng-select/ng-select": "~12.0.4",
    "@ngx-translate/core": "~15.0.0",
    "@popperjs/core": "2.11.8",
    "@progress/kendo-angular-buttons": "^14.0.1",
    "@progress/kendo-angular-charts": "^14.0.1",
    "@progress/kendo-angular-common": "^14.0.1",
    "@progress/kendo-angular-dateinputs": "^14.0.1",
    "@progress/kendo-angular-dialog": "^14.0.1",
    "@progress/kendo-angular-dropdowns": "^14.0.1",
    "@progress/kendo-angular-excel-export": "^14.0.1",
    "@progress/kendo-angular-grid": "^14.0.1",
    "@progress/kendo-angular-icons": "^14.0.1",
    "@progress/kendo-angular-inputs": "^14.0.1",
    "@progress/kendo-angular-intl": "^14.0.1",
    "@progress/kendo-angular-l10n": "^14.0.1",
    "@progress/kendo-angular-label": "^14.0.1",
    "@progress/kendo-angular-layout": "^14.0.1",
    "@progress/kendo-angular-menu": "^14.0.1",
    "@progress/kendo-angular-navigation": "^14.0.1",
    "@progress/kendo-angular-notification": "^14.0.1",
    "@progress/kendo-angular-pager": "^14.0.1",
    "@progress/kendo-angular-pdf-export": "^14.0.1",
    "@progress/kendo-angular-popup": "^14.0.1",
    "@progress/kendo-angular-progressbar": "^14.0.1",
    "@progress/kendo-angular-schematics": "^14.0.1",
    "@progress/kendo-angular-tooltip": "^14.0.1",
    "@progress/kendo-angular-treeview": "^14.0.1",
    "@progress/kendo-angular-upload": "^14.0.1",
    "@progress/kendo-angular-utils": "^14.0.1",
    "@progress/kendo-data-query": "1.7.0",
    "@progress/kendo-drawing": "1.18.0",
    "@progress/kendo-file-saver": "1.1.1",
    "@progress/kendo-licensing": "^1.3.0",
    "@progress/kendo-svg-icons": "2.0.0",
    "@progress/kendo-theme-bootstrap": "7.0.1",
    "@progress/kendo-theme-default": "7.0.1",
    "@progress/kendo-webspeech-common": "^1.0.1",
    "@schematics/angular": "16.2.8",
    "@sweetalert2/ngx-sweetalert2": "~12.2.0",
    "advanced-search-query": "^5.1.1",
    "angular-favicon": "^1.0.9",
    "autoprefixer": "^10.0.2",
    "axios": "~0.17.0",
    "babel-plugin-macros": "^3.1.0",
    "classnames": "^2.3.2",
    "core-js": "~3.34.0",
    "cross-fetch": "4.0.0",
    "date-fns": "~2.30.0",
    "deep-freeze": "^0.0.1",
    "graphql": "^15.5.1",
    "guid-typescript": "^1.0.9",
    "hammerjs": "^2.0.8",
    "i18next": "^23.7.8",
    "js-cookie": "^3.0.5",
    "jsoncrush": "~1.1.8",
    "jwt-decode": "^4.0.0",
    "jwt-js-decode": "^1.9.0",
    "lodash": "~4.17.21",
    "lodash-es": "~4.17.21",
    "mini-css-extract-plugin": "^2.9.1",
    "module-federation-import-remote": "^1.1.0",
    "ngx-loading": "~15.0.0",
    "ngx-toastr": "~17.0.2",
    "oidc-client-ts": "^3.0.1",
    "papaparse": "5.4.1",
    "postcss": "^8.0.9",
    "qrcode": "^1.5.3",
    "qrious": "~4.0.2",
    "query-string": "^7.1.1",
    "rc-tooltip": "^5.2.2",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-i18next": "^13.2.2",
    "react-router-dom": "^6.22.1",
    "react-swipeable": "^7.0.2",
    "resize-observer-polyfill": "^1.5.1",
    "rxios": "github:ImagineLearning/rxios",
    "rxjs": "^6.5.3",
    "rxjs-compat": "^6.5.3",
    "single-spa": "^6.0.3",
    "single-spa-angular": "^9.2.0",
    "sweetalert2": "~11.9.0",
    "tailwindcss": "^2.0.3",
    "uuid": "^8.3.2",
    "yup": "~1.3.2",
    "zone.js": "~0.13.0"
  },
  "devDependencies": {
    "@angular-architects/module-federation": "^16.0.4",
    "@angular-builders/custom-webpack": "~16.0.1",
    "@angular-builders/dev-server": "~7.3.3",
    "@angular/cli": "~16.2.10",
    "@angular/compiler-cli": "~16.2.12",
    "@angular/language-service": "~16.2.12",
    "@types/jasmine": "~5.1.4",
    "@types/jasminewd2": "~2.0.13",
    "@types/lodash": "4.14.202",
    "@types/node": "~18.11.9",
    "@types/react": "19.1.0",
    "@types/react-dom": "19.1.0",
    "axios-mock-adapter": "^1.22.0",
    "cross-env": "^7.0.3",
    "css-loader": "^6.8.1",
    "eslint-plugin-prettier": "5.0.0",
    "husky": "^8.0.0",
    "jasmine-core": "~5.1.1",
    "jasmine-spec-reporter": "~7.0.0",
    "js-beautify": "^1.14.11",
    "karma": "~6.4.2",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "karma-sonarqube-reporter": "~1.4.0",
    "karma-spec-reporter": "0.0.36",
    "lint-staged": "^15.2.0",
    "prettier": "^3.1.0",
    "pretty-quick": "^4.0.0",
    "protractor": "~7.0.0",
    "react-test-attributes": "~1.0.0",
    "regenerator-transform": "^0.15.2",
    "rimraf": "^5.0.5",
    "sass": "~1.69.5",
    "sass-loader": "^16.0.5",
    "single-spa-css": "^2.0.0",
    "style-loader": "^3.3.3",
    "ts-node": "~10.9.1",
    "tslib": "^2.6.2",
    "tslint": "^6.1.3",
    "typescript": "~5.1.6",
    "use-deep-compare-effect": "~1.8.1",
    "webpack": "^5.89.0",
    "webpack-cli": "^6.0.1",
    "webpack-dev-server": "^5.2.2",
    "yup": "~1.3.2"
  },
  "resolutions": {
    "webpack": "^5.89.0"
  }
}

Any help would be greatly appreciated.

Thank you.

Martin Bechev
Telerik team
 answered on 25 Sep 2025
1 answer
25 views

Hi,

We're using the Conversational UI Chat for our AI enabled initiative. The issue we're encountering right now is regarding the auto-scroll. When we send a prompt to our AI agent and it responds back, if the response is long, the user needs to scroll up to view the response from the start. It doesn't really help the user experience. It will be great if it just scrolls down where the first part of the response is visible (not all the way to bottom) and let the user scroll down to view the rest. Or at the very least have an option for us to turn off the auto-scroll to the bottom. Is there a solution that we can use to address this?

Thanks

Martin Bechev
Telerik team
 answered on 23 Sep 2025
0 answers
13 views

Hi,

I am Kamal Hinduja Based Geneva, Switzerland(Swiss)  . Can anyone explain What are the themes supported by Kendo UI for Angular?

 

Thanks, Regards

Kamal Hinduja  Geneva, Switzerland

 

kamal
Top achievements
Rank 1
 asked on 23 Sep 2025
Narrow your results
Selected tags
Tags
+? more
Top users last month
Ambisoft
Top achievements
Rank 2
Iron
Pascal
Top achievements
Rank 2
Iron
Matthew
Top achievements
Rank 1
Sergii
Top achievements
Rank 1
Iron
Iron
Andrey
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Ambisoft
Top achievements
Rank 2
Iron
Pascal
Top achievements
Rank 2
Iron
Matthew
Top achievements
Rank 1
Sergii
Top achievements
Rank 1
Iron
Iron
Andrey
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?