Kendo UI for Angular Forum RSS

Latest Online Resources about Kendo UI for Angular

16 Mar to 23 Mar 2026: highlights of the new online resources that we published last week.

Article: https://www.telerik.com/kendo-angular-ui/components/knowledge-base/grid-reorder-grouped-rows
Summary: Learn how to implement row drag-and-drop reordering in a grouped Kendo UI for Angular Grid by working against the processed (grouped) data to compute correct source and target indexes and update the underlying array. The article shows how to skip group header/footer rows and restrict reordering to items within the same group to keep the grouping state consistent.

Article: https://www.telerik.com/kendo-angular-ui/components/knowledge-base/treeview-custom-check-with-filtering
Summary: Learn how to implement a custom checkbox state in the Kendo UI for Angular TreeView that stays correct while filtering hides parts of the hierarchy. The article maintains a set of checked node keys (via checkBy/checkedKeys), implements isChecked and isIndeterminate to compute tri-state values, and handles checkedChange to toggle descendants and update parent states so selections persist and render correctly under filtering. It includes utility logic to traverse children/ancestors and reapply state after filter changes.

Article: https://www.telerik.com/kendo-angular-ui/components/knowledge-base/cannot-read-properties-of-undefined-grid
Summary: If your Kendo UI for Angular Grid throws “Cannot read properties of undefined,” it’s typically because a template or event handler dereferences a value that isn’t available yet (for example, an undefined dataItem, a missing/mismatched column.field, or async data not initialized). The article shows how to prevent this by initializing data sources, aligning column.field with your data model, and guarding access in cell/header/detail templates using the Angular safe-navigation operator (?.), ngIf checks, and row-type checks so you only read fields for data rows.

Blog: https://www.telerik.com/blogs/angular-kendo-ui-mcp-making-agents-work
Summary: Learn how to make AI agents do real work in Angular by integrating the Model Context Protocol (MCP) with Kendo UI for Angular so LLM tool calls execute against your services. You’ll configure an MCP client, register and validate tools with JSON Schema, handle tool invocation and responses, and bind results back to your UI components using TypeScript.

---------------------------------------------------------------------------------------------------------------------------------------------------------

09 Mar to 16 Mar 2026: highlights of the new online resources that we published last week.

Blog: https://www.telerik.com/blogs/guide-creating-angular-based-micro-frontend-application-native-federation
Summary: You build an Angular 17+ micro-frontend with Native Federation (ESM-based federation that works with the Vite/esbuild builder), creating a host and remotes, exposing/consuming standalone components, wiring route-based lazy loading, and configuring shared Angular dependencies and version constraints. It also walks you through local development and production deployment (federation manifests and base/asset paths) and highlights gotchas like aligning Angular package versions and properly sharing common libraries to avoid duplicate bundles.

---------------------------------------------------------------------------------------------------------------------------------------------------------

25 Feb to 04 Mar 2026: highlights of the new online resources that we published last week.

Article: https://www.telerik.com/kendo-angular-ui/components/knowledge-base/theme-dynamic-styles
Summary: This article shows how to implement runtime theme customization in Kendo UI for Angular by overriding Kendo theme values with CSS custom properties and scoping them to containers, instead of trying to change Sass variables (which are compile-time only). It covers enabling CSS-variables mode in the Kendo themes, defining palettes with custom properties, and switching themes by toggling wrapper classes or updating variables via JavaScript, with an alternative of swapping precompiled theme CSS files.

Article: https://www.telerik.com/kendo-angular-ui/components/knowledge-base/grid-collapsible-column-groups
Summary: Learn how to implement collapsible multi-column header groups in the Kendo UI for Angular Grid by toggling the visibility of the group’s child columns. The article shows how to add a custom header template with an expand/collapse toggle and programmatically set each child ColumnComponent’s hidden property (e.g., via @ContentChildren/@ViewChildren) to hide or show the group, with notes on state handling and re-rendering.

Article: https://www.telerik.com/kendo-angular-ui/components/knowledge-base/grid-master-detail-crud-operations
Summary: You implement CRUD operations for a Kendo UI for Angular Grid in a master–detail hierarchy with a nested Grid rendered via kendoGridDetailTemplate. The article shows how to wire inline add/edit/remove for both parent and child data, automatically set the parent foreign key on new child records, and use an edit service to isolate and persist changes. It also covers managing expanded detail rows and stopping event propagation so detail-grid commands don’t collapse or toggle the master row.

Article: https://www.telerik.com/kendo-angular-ui/components/knowledge-base/grid-virtual-scrolling-zoom-integration
Summary: Learn how to keep the Kendo UI for Angular Grid’s virtual scrolling accurate under browser zoom or CSS scaling by detecting zoom changes and recalculating the Grid’s rowHeight and height at runtime. The article demonstrates measuring actual row size, subscribing to window.visualViewport (or resize) events, and updating Grid inputs to prevent gaps, jitter, or misaligned items during virtualization. It also outlines pitfalls of using CSS transform scale on the Grid container and shows how to trigger re-rendering so the virtual viewport and item offsets stay in sync.

Article: https://www.telerik.com/kendo-angular-ui/components/knowledge-base/grid-visualize-filtered-columns-summary
Summary: This article shows you how to display an “active filters” summary for the Kendo UI for Angular Grid by extracting and flattening the CompositeFilterDescriptor from the Grid state (for example, in dataStateChange) and mapping fields to column titles. It implements a toolbar template that renders chips for each filter (field, operator, value) and lets you remove individual filters or clear all by updating the Grid’s filter descriptors.

Article: https://www.telerik.com/kendo-angular-ui/components/knowledge-base/grid-export-selected-rows-maintain-state
Summary: Shows how to export only the selected rows from the Kendo UI for Angular Grid to Excel while preserving the current Grid state (sorting, filtering, grouping, paging) and selection across pages. You’ll persist selection with kendoGridSelectBy and selectedKeys, compute the view with @progress/kendo-data-query process using the Grid state, and customize the excelExport event to supply only the selected items for export.

Article: https://www.telerik.com/kendo-angular-ui/components/knowledge-base/grid-restrict-columns-moving-into-locked
Summary: Learn how to block drag-and-drop reorders that cross the locked (frozen) and unlocked boundary in the Kendo UI for Angular Grid while keeping column reordering enabled. Handle the Grid’s columnReorder event and call preventDefault() when the drop would move a locked column beyond the last locked leaf column or move an unlocked column into the locked section, computing the locked leaf column count to support multi-column headers.

Blog: https://www.telerik.com/blogs/singleton-not-understanding-angular-services-right-way
Summary: You’ll learn how Angular dependency injection scopes services: they are singletons per injector, not globally, and new instances are created across lazy-loaded module injectors and component injectors. The article details providedIn options ('root', 'any', 'platform'), tree-shakable providers, NgModule/lazy module and component providers, and the forRoot/forChild pattern, showing when a service becomes app-wide, module-scoped, or per-component. Use these rules to control service lifetime and prevent accidental duplicates in your Angular apps.

---------------------------------------------------------------------------------------------------------------------------------------------------------

09 Feb to 16 Feb 2026: highlights of the new online resources that we published last week.

Article: https://www.telerik.com/kendo-angular-ui/components/grid/searching
Summary: Learn how to add a global search to the Kendo UI for Angular Grid using the built-in kendo-grid-search in the Grid toolbar or a custom implementation. You’ll configure which fields/columns are searched and how filters are generated (contains for text by default), and see how to apply the same search logic with client-side data (via @progress/kendo-data-query) or server-side data by handling dataStateChange and composing filter descriptors.

Article: https://www.telerik.com/kendo-angular-ui/components/grid/smart-grid
Summary: This article shows how to enable and configure Smart Grid in the Kendo UI for Angular Grid to handle very large row and column counts by automatically applying row and column virtualization and optimized rendering. It explains when to use Smart Grid versus standard virtualization, how it behaves with local or remote data and common data operations, and which features and constraints apply so you can tune the Grid for your performance requirements.

Article: https://www.telerik.com/kendo-angular-ui/components/pdfviewer/blank-page
Summary: Diagnose and fix a Kendo UI for Angular PDFViewer that renders a blank page by validating layout, data source, and worker/CSP configuration. Set an explicit height, avoid initializing the viewer inside hidden containers (tabs/modals) and re-render after it becomes visible, verify the PDF is accessible and correctly served (CORS/auth/content type) or load it via HttpClient as an ArrayBuffer, and configure the PDF.js worker if your CSP blocks inline or blob workers.

Article: https://www.telerik.com/kendo-angular-ui/components/grid/export/csv-export
Summary: Use the Kendo UI for Angular Grid’s built-in CSV export to download the current view or the entire data set, triggered from the toolbar or programmatically. Configure the export (file name, headers, columns, delimiter) and handle export events to shape the output, honor sorting/filtering/paging, and export selected rows or all pages.

Article: https://www.telerik.com/kendo-angular-ui/components/ai-tools/troubleshooting
Summary: Use this troubleshooting guide to diagnose and fix Kendo UI for Angular AI Tools integration issues, including provider configuration for OpenAI, Azure OpenAI, Google Gemini, and AWS Bedrock, invalid API keys or model IDs, missing Azure api-version, and HTTP errors like 401, 404, and 429. It explains how to resolve browser CORS and streaming (SSE) failures using a server-side proxy and correct headers, and outlines Angular-specific checks such as importing the correct AI Tools modules, wiring the provider configuration, setting environment variables, meeting CSP requirements, and adding needed polyfills. Follow the checklists to validate a minimal working setup, inspect network requests, and isolate configuration versus runtime errors.

Article: https://www.telerik.com/kendo-angular-ui/components/buttons/smartpastebutton
Summary: SmartPasteButton in Kendo UI for Angular is a button that, on user click, uses the Clipboard API to read clipboard content and exposes a normalized result (plain text, HTML, and tabular data) via events you can handle in your component. The article shows how to configure the button, subscribe to paste and error handlers, and deal with browser constraints (user activation and secure context), with examples for routing the parsed data into your application logic or components like a Grid.

Article: https://www.telerik.com/kendo-angular-ui/components/conversational-ui/promptbox
Summary: Learn how to use the Kendo UI for Angular Conversational UI PromptBox to request and validate user input (text, selections, etc.) in your app or chat flow. The article covers adding and configuring the component (title/message, inputs, action buttons), customizing templates and styling, and handling the user response in Angular/TypeScript with code examples and API details.

Article: https://www.telerik.com/kendo-angular-ui/components/buttons/smartpastebutton/icons
Summary: This article shows you how to add and position icons in the Kendo UI for Angular SmartPasteButton. You’ll use the icon, svgIcon, iconClass, and imageUrl inputs to render built-in or custom icons and control placement with iconPosition (start or end), including examples with @progress/kendo-svg-icons and custom CSS classes.

Article: https://www.telerik.com/kendo-angular-ui/components/buttons/smartpastebutton/events
Summary: This article details the SmartPasteButton events in Kendo UI for Angular—when they fire and the structure of their event arguments. You’ll see how to subscribe to these Angular outputs in the template and component class, inspect parsed clipboard data, cancel the default behavior with preventDefault, and handle errors or permission denials. Use these hooks to integrate custom paste workflows and update application state as the paste operation starts, succeeds, or fails.

Article: https://www.telerik.com/kendo-angular-ui/components/grid/smart-grid/semantic-search
Summary: Add semantic search to the Kendo UI for Angular Grid (Smart Grid) by implementing a semantic search provider, choosing which grid fields participate, and connecting to a backend that computes text embeddings and performs vector similarity search (OpenAI/Azure OpenAI or self‑hosted/vector database). The article shows the TypeScript and server-side integration needed to return semantically similar rows and how to tune options such as top‑k and relevance thresholds so results work with existing paging, sorting, and filtering.

Blog: https://www.telerik.com/blogs/image-optimization-angular-applications
Summary: You’ll optimize images in your Angular app by using the NgOptimizedImage directive to deliver responsive images (srcset/sizes), lazy‑load noncritical assets, prioritize the LCP image, and prevent CLS with explicit width/height, while serving modern formats like WebP/AVIF. You’ll also wire up an image CDN via a custom ImageLoader with width breakpoints and caching, then verify improvements with Lighthouse/Core Web Vitals and integrate the workflow into your Angular build pipeline.

---------------------------------------------------------------------------------------------------------------------------------------------------------

19 Jan to 26 Jan 2026: highlights of the new online resources that we published last week.

Article: https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/custom
Summary: Learn how to define and use custom SVG icons in Kendo UI for Angular by creating an SVGIcon object (name, viewBox, content) and binding it to the Kendo Icon component through its svgIcon input. You’ll prepare the SVG markup correctly (preserve the viewBox, remove width/height and hard-coded fill/stroke so icons inherit the theme color) and understand how sizing and coloring behave for custom icons.

Article: https://www.telerik.com/kendo-angular-ui/components/knowledge-base/override-icons
Summary: This article shows you how to override the default icons in Kendo UI for Angular components. You register custom SVG icons from @progress/kendo-svg-icons with provideIcons and remap the built-in icon aliases via the global IconSettings/ICON_SETTINGS provider for a suite-wide change (with notes on CSS overrides for legacy font icons), so you can replace arrows, calendar, clear, expand/collapse, and similar UI icons consistently.

Article: https://www.telerik.com/kendo-angular-ui/components/knowledge-base/override-svg-icons
Summary: Learn how to override Kendo UI for Angular SVG icons globally by registering your own SVGIcon with the same name as a built-in icon via IconService.register in a root module or initialization service. You also see how to override icons per component using the [svgIcon] input on Kendo icon directives and components, along with the required packages and setup to ensure components render your custom SVGs.

Blog: https://www.telerik.com/blogs/build-agentic-apps-angular-genkit-kendo-ui-part-2
Summary: This article shows you how to implement an agent on a TypeScript/Node backend with Genkit (tool/function calling, REST endpoint, streaming) and connect it to an Angular app using the Kendo UI Chat component. You’ll wire up Angular services to invoke the agent, handle conversation state and errors, and trigger tool executions, with code-focused guidance for integrating Angular, Genkit, and Kendo UI in a production-ready workflow.

---------------------------------------------------------------------------------------------------------------------------------------------------------

12 Jan to 19 Jan 2026: highlights of the new online resources that we published last week.

Article: https://www.telerik.com/kendo-angular-ui/components/ai-tools
Summary: You add Kendo UI for Angular AI Tools to your Angular app, use the AI Prompt component to capture user instructions, and wire it to an LLM backend so you can render model responses. The article shows installation and module setup, key inputs/outputs and templates, and examples that connect to OpenAI or Azure OpenAI via an Angular service or server proxy, with streaming, cancellation, and error handling.

Article: https://www.telerik.com/kendo-angular-ui/components/ai-tools/changelog
Summary: This changelog lists version-by-version release notes for Kendo UI for Angular AI Tools, including new features, bug fixes, deprecations, and breaking changes. Use it to plan upgrades, check Angular and peer-dependency compatibility, and update your code for API or behavior changes in the AI components. Review the latest entries to confirm whether a release includes a specific fix or feature before upgrading.

Article: https://www.telerik.com/kendo-angular-ui/components/ai-tools/installation
Summary: Learn how to install Kendo UI for Angular AI Tools: add the package from npm with its peer dependencies, register your license using @progress/kendo-licensing, and include a Kendo theme stylesheet. You then import the AI Tools module into your Angular app (NgModule or standalone), enable Angular animations (BrowserAnimationsModule), and follow the provided commands and code snippets. The article also notes supported Angular versions and required peer packages to ensure the components render correctly.

Article: https://www.telerik.com/kendo-angular-ui/components/diagrams/accessibility
Summary: Use this guide to implement accessibility in the Kendo UI for Angular Diagram, including keyboard navigation, focus management, and WAI-ARIA attributes for the canvas, shapes, and connectors, with notes on screen-reader behavior, high-contrast themes, and RTL. It outlines WCAG 2.2 AA and Section 508 considerations, shows how to set accessible labels and roles, and lists current limitations and testing recommendations so you can validate the Diagram with assistive technologies.

Article: https://www.telerik.com/kendo-angular-ui/components/inputs/textbox/password
Summary: Learn how to use the Kendo UI for Angular TextBox as a password field by setting type="password" on the kendoTextBox directive or kendo-textbox component, and bind it to Template-driven or Reactive Forms. The article shows how to add a show/hide (reveal) toggle via the suffix template—toggling the input type and eye/eye-slash kendo-icon. It also covers validation and accessibility considerations, plus common options like placeholders and disabled/readonly states.

Article: https://www.telerik.com/kendo-angular-ui/components/menus/menu/popup-appearance
Summary: Learn how to control the Kendo UI for Angular Menu submenu popup using the popupSettings input: configure open/close animations (animate), attach a custom CSS class for styling (popupClass), and choose where the popup is rendered (appendTo) to avoid clipping and z-index issues. Practical examples show how to style the popup container and tune animations for scrollable or complex layouts.

Article: https://www.telerik.com/kendo-angular-ui/components/charts/data-binding/grouping
Summary: Use series.group to group Kendo UI for Angular Chart data by a field, automatically create series per group, and aggregate values for duplicate categories. Configure series.aggregate (sum, avg, min, max, count) and groupNameTemplate to compute values and display group names in legends, labels, and tooltips.

Article: https://www.telerik.com/kendo-angular-ui/components/diagrams/keyboard-navigation
Summary: This article documents keyboard navigation for the Kendo UI for Angular Diagram component, including focus management and the supported key bindings for selecting and manipulating shapes and connections. It explains how to navigate, move, edit, and delete items, and how to control the viewport (such as panning and zoom), so you can implement and test complete keyboard-only workflows.

Article: https://www.telerik.com/kendo-angular-ui/components/spreadsheet/filtering-sorting
Summary: This article shows how to use filtering and sorting in the Kendo UI for Angular Spreadsheet from the built-in toolbar/context menu or programmatically through the Spreadsheet API. You’ll enable filtering on a range with a header row, define and clear filter criteria, and sort selected data ascending or descending. It also notes scope and constraints such as working with contiguous ranges and header rows, and applying these operations to a selection or the entire sheet.

Article: https://www.telerik.com/kendo-angular-ui/components/layout/panelbar/rendering-modes
Summary: Learn how to control the Kendo UI for Angular PanelBar rendering modes and how each mode affects DOM structure and styling. The article shows you how to switch modes per instance using the renderMode input or set a default application-wide via a global rendering provider, and summarizes differences and compatibility considerations between classic and modern rendering.

Blog: https://www.telerik.com/blogs/build-agentic-apps-angular-genkit-kendo-ui-part-1
Summary: Learn how to build an agentic Angular application by integrating Google Genkit flows and tool/function calling with Kendo UI for Angular components. You’ll configure a TypeScript Genkit backend with an LLM provider and tools, expose endpoints to your Angular app, and implement a prompt-to-action pipeline that drives the UI, with Part 2 extending this foundation.

---------------------------------------------------------------------------------------------------------------------------------------------------------

29 Dec to 05 Jan 2026: highlights of the new online resources that we published last week.

Blog: https://www.telerik.com/blogs/data-fetching-modern-angular
Summary: This guide shows you how to implement reliable data fetching in modern Angular using HttpClient, RxJS, and signals, including typed requests, interceptors, cancellation, loading/error state management, async pipe, and bridging Observables to signals with toSignal. You’ll learn when to fetch in components vs router resolvers vs server-side rendering, and apply practical patterns for caching and retries while avoiding memory leaks.

---------------------------------------------------------------------------------------------------------------------------------------------------------

15 Dec to 22 Dec 2025: highlights of the new online resources that we published last week.

Article: https://www.telerik.com/kendo-angular-ui/components/charts/elements/markers
Summary: Learn how to configure markers in Kendo UI for Angular Charts to denote data points on supported series (Line, Area, Scatter, and related types), including enabling/disabling markers and setting type, size, background color, and border via series.markers and seriesDefaults.markers. The article shows how to render custom marker shapes with a markers.visual callback that returns Kendo Drawing elements and how to apply settings globally or per series. It also notes practical guidance like disabling markers for large datasets to improve performance.

Article: https://www.telerik.com/kendo-angular-ui/components/charts/accessibility/aria-support_chart
Summary: Learn how to configure ARIA for the Kendo UI for Angular Chart so screen readers can interpret your data. The article outlines the ARIA roles the Chart renders and shows you how to provide an accessible name and description by setting aria-label, aria-labelledby, or aria-describedby on the kendo-chart host element, including guidance on when to hide decorative visuals with aria-hidden.

Article: https://www.telerik.com/kendo-angular-ui/components/menus/contextmenu/accessibility/aria-support_contextmenu
Summary: This page shows you how the Angular ContextMenu implements the WAI-ARIA menu pattern and which roles and attributes it renders for screen readers. It specifies role=menu on the container, role=menuitem and role=separator on items, aria-haspopup/aria-expanded for submenus, and aria-disabled for disabled items, with guidance on labeling and preserving semantics when you customize templates.

Article: https://www.telerik.com/kendo-angular-ui/components/navigation/actionsheet/accessibility/aria-support_actionsheet
Summary: This article documents the Angular ActionSheet’s ARIA accessibility: dialog semantics (aria-modal plus aria-labelledby/aria-describedby via the title and description inputs), button roles for actions with disabled state handling, and screen reader labeling. It also specifies focus management and keyboard navigation—Tab/Shift+Tab to move between actions, Enter/Space to invoke, and Esc to close—so you can verify behavior against WAI-ARIA and WCAG requirements.

Article: https://www.telerik.com/kendo-angular-ui/components/knowledge-base/kb-security-angular-xsrf-token-leakage-cve-2025-66035
Summary: This article documents CVE-2025-66035, a vulnerability where certain Kendo UI for Angular workflows can leak Angular’s XSRF token (X-XSRF-TOKEN/cookie) to non-application endpoints in specific scenarios, outlining scope and impact. It enumerates affected package versions and the patched releases, and provides mitigations: upgrade to the fixed versions and, as a temporary workaround, strip the XSRF header on cross-origin/proxy requests (e.g., via an HttpInterceptor) or disable the relevant proxy/export features. It also shows how to check if you’re affected by inspecting network requests for X-XSRF-TOKEN being sent to external domains.

Article: https://www.telerik.com/kendo-angular-ui/components/knowledge-base/kb-security-angular-stored-xss-svg-mathml-cve-2025-66412
Summary: This article explains a stored cross-site scripting vulnerability in Kendo UI for Angular (CVE-2025-66412) where crafted SVG/MathML content can be persisted and executed in components that render HTML. You should upgrade the affected @progress/kendo-angular-* packages to the patched versions listed, audit and re-sanitize any stored user-generated content, and, if you cannot upgrade immediately, block SVG/MathML and enforce server-side sanitization. It also outlines affected scope, reproduction steps, and how to verify the fix after updating.

Blog: https://www.telerik.com/blogs/practical-guide-state-management-using-angular-services-signals
Summary: Learn how to implement state management in Angular using services and Signals by building a small signal-based store: encapsulate writable and computed signals in an injectable service, expose read-only state to components, update state immutably, and use effect() for side effects. You’ll see how to consume the service with inject(), interop with RxJS via toSignal/toObservable, persist state (e.g., localStorage), and when to prefer service-scoped Signals over global stores.

---------------------------------------------------------------------------------------------------------------------------------------------------------

01 Dec to 08 Dec 2025: highlights of the new online resources that we published last week.

Blog: https://www.telerik.com/blogs/angular-signals-essentials-you-need-know
Summary: Learn the essentials of Angular Signals (v16+): how to model state with signal(), derive values with computed(), and run side effects with effect(), including using set, update, and mutate for predictable, fine-grained reactivity in components and templates. You’ll see practical patterns, pitfalls, and best practices—such as avoiding mutations in computed, cleaning up effects, and when to use signals vs. Observables—plus interop with RxJS via toSignal() and toObservable().

---------------------------------------------------------------------------------------------------------------------------------------------------------

24 Nov to 01 Dec 2025: highlights of the new online resources that we published last week.

Blog: https://www.telerik.com/blogs/angular-21-my-favorite-new-features-quick-demo-look-whats-next
Summary: You’ll get a concise, code-first walkthrough of Angular 21 new features and how to enable and use them in a quick demo. The article also outlines upgrade steps, potential breaking changes, and what’s next on the Angular roadmap, helping you plan adoption in your projects.

---------------------------------------------------------------------------------------------------------------------------------------------------------

17 Nov to 24 Nov 2025: highlights of the new online resources that we published last week.

Article: https://www.telerik.com/kendo-angular-ui/components/ai-tools/ai-assistant/changelog
Summary: Use the Kendo UI for Angular AI Assistant changelog to track versioned release notes for the AI Tools > AI Assistant component, including new features, bug fixes, and breaking changes. It helps you verify Angular and Kendo package compatibility, identify deprecated or modified APIs and configuration, and plan code and template migrations per release.

Article: https://www.telerik.com/kendo-angular-ui/components/dateinputs/daterange/disabled-dates
Summary: Use the Kendo UI for Angular DateRangePicker [disabledDates] input to prevent selection of specific days, supplying either an array of Date objects or a predicate function (for example, disable weekends or holidays), and combine it with [min]/[max] for boundary constraints. Disabled dates are not selectable as range start/end and are validated for both calendar selection and typed input, keeping the start/end fields consistent.

Article: https://www.telerik.com/kendo-angular-ui/components/ai-tools/agentic-ui-generator/changelog
Summary: This changelog for the Kendo UI for Angular Agentic UI Generator lists versioned release notes, including new features, improvements, bug fixes, and breaking changes. Use it to track updates and compatibility, plan upgrades, and identify API or behavior changes to the AI tools and supported components in your Angular app.

Article: https://www.telerik.com/kendo-angular-ui/components/dateinputs/daterange/calendar-configuration
Summary: This article shows how to configure the two calendars inside the Kendo UI for Angular DateRange, including controlling the active/top/bottom views, setting the initial focused date, and toggling week numbers per calendar. You’ll learn how to apply per‑calendar settings so the start and end calendars can use different views and navigation, with concise examples to implement these options in your components.

Article: https://www.telerik.com/kendo-angular-ui/components/ai-tools/agentic-ui-generator/prompt-library
Summary: Use the Prompt Library in the Kendo UI for Angular Agentic UI Generator to browse and run predefined prompts for scaffolding components (Grid, Form, Chart) or to create and manage your own prompts. The article documents the prompt schema (metadata, categories, variables), editing/tagging workflows, and import/export options to keep prompts organized and outputs reproducible.

Article: https://www.telerik.com/kendo-angular-ui/components/ai-tools/agentic-ui-generator/getting-started
Summary: You will set up the Kendo UI for Angular Agentic UI Generator by installing the AI tools, configuring an LLM provider (OpenAI or Azure OpenAI), importing the module, and adding the generator component to your template. The article shows how to supply prompts and domain schema/metadata to generate Kendo UI forms and grids, and how to handle output and events to integrate the generated UI into your Angular application.

Blog: https://www.telerik.com/blogs/turn-prompts-pages-telerik-agentic-ui-generator
Summary: This article shows you how to use the Telerik Agentic UI Generator to turn a natural-language prompt into a UI page built with Kendo UI/Telerik components and export the generated markup and code to your project. It explains the agent workflow (planning, component selection, layout and configuration), prompt-writing tips to refine results, and considerations for supported frameworks and integration.

Blog: https://www.telerik.com/blogs/angular-signal-forms-vs-reactive-forms
Summary: This article helps you compare Angular Signal Forms and Angular Reactive Forms, focusing on the reactivity model (signals vs RxJS observables), change detection, typing, validation/async validation, and performance. It walks you through side-by-side code for creating controls, updating values, reading form state via computed signals/effects, and handling validators and errors. Use it to decide when to adopt signal-based forms, when to keep Reactive Forms, and how to integrate or migrate incrementally without a full rewrite.

---------------------------------------------------------------------------------------------------------------------------------------------------------

10 Nov to 17 Nov 2025: highlights of the new online resources that we published last week.

Article: https://www.telerik.com/kendo-angular-ui/components/up-to-date
Summary: This article explains how Kendo UI for Angular aligns with current Angular releases and documents version compatibility for Angular, TypeScript, RxJS, Node, and the CLI. It provides upgrade guidance—peer dependency ranges, recommended update steps, and commands (npm/ng update)—so you can safely update @progress/kendo-angular-* packages and keep your application consistent with supported versions.

Article: https://www.telerik.com/kendo-angular-ui/components/ai-components
Summary: Use Kendo UI for Angular AI components to build LLM features in your app: AIPrompt captures structured input (instructions, context, attachments, model parameters) and AIOutput renders streamed responses with markdown and code blocks. The article shows how to connect these components to OpenAI/Azure OpenAI or other LLM endpoints, manage history and streaming with Angular services/RxJS, and customize sections, templates, and events to fit your workflow.

Article: https://www.telerik.com/kendo-angular-ui/components/listbox/events
Summary: This article documents the Kendo UI for Angular ListBox events and how to handle them for selection changes, item transfers between lists, reordering, and drag-and-drop. It explains when each event fires, the event payload (affected items and indices, original DOM event), and shows how to subscribe via Angular event bindings to update application state and implement custom logic.

Article: https://www.telerik.com/kendo-angular-ui/components/diagrams/tooltips
Summary: Learn how to add and configure tooltips in the Kendo UI for Angular Diagram to display contextual information for shapes (nodes) and connections. You enable tooltips, define a template for the content, control show/hide behavior and positioning, and use the tooltip context to access the hovered item’s data for binding.

Article: https://www.telerik.com/kendo-angular-ui/components/listbox/selection
Summary: This article shows how to configure and use selection in the Kendo UI for Angular ListBox, including single and multiple selection with mouse, keyboard (Ctrl/Shift), and touch interactions. You’ll learn how to control selection programmatically and handle the selectionChange event to react to user actions, synchronize state, and drive transfer/reorder operations based on the selected items.

Article: https://www.telerik.com/kendo-angular-ui/components/assisted-migration
Summary: This article shows you how to use Kendo UI for Angular Assisted Migration to upgrade across major versions by automatically applying code transformations for breaking changes in Kendo Angular components and APIs. You’ll run the migration via the VS Code Productivity Tools or Angular schematics, review suggested edits, and finalize updates while handling any remaining manual changes in templates, TypeScript, and styles. It outlines prerequisites, supported versions and packages, and known limitations so you can verify the upgrade safely.

Article: https://www.telerik.com/kendo-angular-ui/components/available-codemods
Summary: This article catalogs the available Kendo UI for Angular codemods and describes the API changes each one automates, helping you handle breaking changes during Angular and Kendo UI upgrades. For every codemod, it outlines the affected packages and the transformations applied to Angular templates and TypeScript, so you can choose and run the correct automated refactor for your project.

Article: https://www.telerik.com/kendo-angular-ui/components/migrate-from-jquery
Summary: Migrate a Kendo UI for jQuery app to Kendo UI for Angular by replacing jQuery widgets with native Angular components and refactoring initialization, templates, events, and data binding into Angular patterns. The article explains key differences—no jQuery DataSource (use Angular services/Observables with @progress/kendo-data-query), component-specific changes for Grid and form inputs, and updated theming/localization—and outlines a practical, phased, component-by-component migration strategy to preserve behavior and performance.

Article: https://www.telerik.com/kendo-angular-ui/components/spreadsheet/globalization
Summary: Configure globalization for the Kendo UI for Angular Spreadsheet by loading CLDR locale data and setting the culture via IntlService to apply locale-specific number, date, and currency formats in cells. Localize the Spreadsheet UI by providing message translations through @progress/kendo-angular-l10n, with support for switching cultures at runtime.

Article: https://www.telerik.com/kendo-angular-ui/components/changelogs/rendering-changes
Summary: This article documents rendering changes in Kendo UI for Angular components, including updates to DOM structure, CSS class names, and markup that may introduce breaking changes. As you upgrade, use it to identify impacted components and apply the migration guidance to update custom CSS, selectors, and automated tests.

---------------------------------------------------------------------------------------------------------------------------------------------------------

05 Nov to 10 Nov 2025: highlights of the new online resources that we published last week.

Article: https://www.telerik.com/blogs/building-apps-angular-graphql-part-1
Summary: This article introduces GraphQL fundamentals for Angular developers and walks you through integrating Apollo Angular. You set up a GraphQL client, write and execute queries against a GraphQL API, and bind the results in a component—laying the groundwork for mutations, caching, and more advanced patterns in later parts.

---------------------------------------------------------------------------------------------------------------------------------------------------------

29 Oct to 05 Nov 2025: highlights of the new online resources that we published last week.

Article: https://www.telerik.com/blogs/clean-code-using-smart-dumb-components-angular
Summary: Apply the smart (container) vs dumb (presentational) component pattern to keep Angular code clean: put data fetching, state, and navigation in smart components via services and RxJS, and restrict dumb components to rendering and UI events with @Input and @Output. Refactor step by step to pass data down via Observables/async pipe, emit events up, and simplify testing by isolating side effects from the view.

Feel free to check them out and share your thoughts!

The Telerik Team

kendo-dropdownbutton - disabled item still accessible for keyboard navigation

I have disabled item that I pass in items list. But item is still clickable (which I solved in css by setting pointer-events: none, yet via keyboard navigation it is still getting focus. Also when pressing enter it will not trigger itemClick event, but on enter press dropdown will close.

PDF Export: Alignment shift on page break when text splits (Angular 17)

Hi,

I am using Angular 17 with @progress/kendo-angular-pdf-export v17.2.0. I am facing a specific layout issue during page breaks.

The Issue: When a long text is split across two pages, the overflow content on the second page shifts to the far left, ignoring the column's original offset/padding. However, once that specific text block ends, the subsequent rows return to their correct positions.

Constraints:

We must use paperSize="A4" for printing requirements (so paperSize="auto" is not an option).
We are using a custom layout with div elements (Bootstrap-like grid: col-sm-4 for labels, col-sm-8 for values).

Questions:

Is there a way to ensure that the split text fragment maintains its horizontal position on the next page?
Has this been addressed in any version later than v17.2.0?
Is there a CSS workaround (like display: table or specific k-pdf-export classes) to prevent this shift for split elements?

Any guidance would be appreciated. Thanks!

DropdownList, virtualization and screen reader issue

Hi, not sure if anyone had similar issue before with this. So I have pagination done on backend side and I fetch options for dropdown 25 by 25. [virtual] is set to virtualizationSettings = { itemHeight: 36, pageSize: 25 }. Options are loaded on scroll and everything works fine functionality wise. But when using NVDA screen reader and navigating through options via arrows, as soon as I hit 26 and below, screen reader reads them as 'blank' or reads totally different option (random one, sometimes one above and sometimes second one in list etc.).

Why are these kendo angular dropdown karat-icons not centered?

Hi, This is driving me crazy. My karat icons are not centered:

I've made sure everything is set up properly and have tried targeting that exact class and padding the top via css. Nothing seems to work.

What could be the issue?

[Angular] Custom Grid Column Menu not accessible using keyboard navigation

Hello,

I'm trying to get a custom column menu item list using the Angular Grid to work, but it does not seem to be accessible through the keyboard.

See following Stackblitz for a reproduction example: https://stackblitz.com/edit/angular-tzm2tpqt?file=src%2Fapp%2Fapp.component.ts

I navigated to a header column using tab to focus the grid and the arrow keys to select a specific header column, then pressed ALT + Arrow Down to open the column menu. The column menu opens as expected, but the initial menu item is not focussed and I cannot access the menu items using the keyboard. Instead, the grid is still focussed.

Any advice on what might be wrong in this example would very much be appreciated.

How to provide a custom "Current Time" to Kendo Scheduler instead of the OS clock?

I am running into a limitation with the <kendo-scheduler> component regarding how it determines the current time.

In our Angular application, we do not rely on the user's local operating system clock. Instead, we calculate a synchronized "Server Time" to ensure our scheduling is 100% accurate, regardless of whether a user's physical machine clock is drifting or set incorrectly.

The issue is that Kendo UI internally relies on the browser's native new Date() and Date.now() to determine the current time. Because of this, the Scheduler has no way to know about our application's synchronized time.

Example of the Impact: Let's say a user's physical laptop clock is set to 10:00 AM, but our application's synchronized server time is actually 1:00 PM.

The Scheduler's red "Current Time" marker line will render at 10:00 AM.
The Scheduler will highlight "ongoing" events that are happening at 10:00 AM.
Clicking the "Today" navigation button calculates the active day based on the 10:00 AM OS time.

Currently, I don't see an Input or API in Kendo to pass a custom "Now" value or time-provider function to the component, so the Scheduler constantly forces the physical OS time onto the UI.

If you have any built-in solution or recommended workaround for this scenario, please let me know.

Date Header displays an incorrect value when slotduration is set to "full day" in timeline month view

In Kendo Scheduler Angular,

Date Header displays an incorrect value when slotduration is set to "full day" in timeline month view. it should not display 12:00 AM in each slot.

    <kendo-scheduler
      [kendoSchedulerBinding]="events"
      [selectedDate]="selectedDate"
      [slotDuration]="1440"
    >
      <kendo-scheduler-timeline-month-view>
      </kendo-scheduler-timeline-month-view>
    </kendo-scheduler>

Issue with kendo-angular-pdfviewer

Getting below error while building angular application

10:04:17 am[vite] (client)warning:

/.../.angular/cache/20.2.1/.../vite/deps/@progress_kendo-angular-pdfviewer.js

16367 | const worker = yield import(

16368 | /*webpackIgnore: true*/

16369 | this.workerSrc

| ^^^^^^^^^^^^^^

16370 | );

16371 | return worker.WorkerMessageHandler;

The above dynamic import cannot be analyzed by Vite.

See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

Plugin: vite:import-analysis

File: /.../.angular/cache/20.2.1/.../vite/deps/@progress_kendo-angular-pdfviewer.js?v=46fe0012

@progress/kendo-angular-pdfviewer: 20.0.2

Angular: 20.2.1

Node: 22.18.0

NPM: 10.9.3

kendo angular chart wizard

How to change title of kendo angular chart wizard in run time ?

Virtual scrolling with master/detail interactions

I have a grid where row height and detail row height are set correctly (i think) and virtual scrolling is turned on. when I expand a row to show the detail view, as soon is i try to interact with the detail view (It has a tabstrip in it) it will jump that row to the top of the gird view. It's pretty jarring. ONLY when the detail component is at the top of the grid view will it let me interact with the detail view. Not sure if i'm doing something wrong or there's a bug.

i attached a zipped mp4 of the behavior.

Porque no puedo agregar un input a un

Tengo algo como esto dentro de un kendo grid , en el toolbar yo necesito tener un input que me servira de buscador para mi grid y al lado quiero kendoGridAIAssistantTool , hacia la derecha quiero 2 botones importar excel y pdf , la pregunta es porque no aparece mi input? cuando utilizo kendo toolbar , ademas que quiero usar comandos de generar PDF Y Excel del grid pero solo puedo con kendoGridToolbarTemplate deberia poder usarlo tambien con kendo-toolbar , ya que kendoGridToolbarTemplate y kendo-toolbar no se puede usar a la misma vez , deberian arreglar eso

<kendo-toolbar>

<kendo-textbox
style="width: 200px"
placeholder="Buscar..."
(valueChange)="onFilterChange($event)">
</kendo-textbox>

<kendo-toolbar-button

kendoGridAIAssistantTool requestUrl="https://demos.telerik.com/service/v2/ai/grid/smart-state"

[keepOutputHistory]="true"

[aiPromptSettings]="aiPromptSettings"

[aiWindowSettings]="aiWindowSettings">

</kendo-toolbar-button>

<button kendoGridExcelCommand>
Exportar Excel
</button>

<button kendoGridPDFCommand>
Exportar PDF
</button>

</kendo-toolbar>

When will Kendo fully support Signal Forms?

In general, Signal Forms should work with any component with ControlValueAccessor, but I am noticing errors when components are relying on observables on the control (like StatusChanges)

Kendo Grid -> Context Menu referencing wrong column with cellRowspan active

Hi,

I'm experiencing an issue with the Kendo Grid Context Menu, when cellRowspan is active.

Reproduction:

Open https://stackblitz.com/edit/angular-dbrbstsb-jmugb3st?file=src%2Fapp%2Fapp.component.ts
Right click on the first cell within the "Unit Price" column
- the alert shows that the "UnitPrice" column has been clicked, which is correct
Now right click on the second cell within the "Unit Price" column
- the alert shows that "UnitsInStock" is clicked, which is wrong

It seems like the wrong column is being calculated when rowspan is active.

I'm on the latest Kendo version (v21.3.0).

Is this a known issue?

Thanks in advance!

Kendo Angular Multiselect - Cap max items selected

I want to impose a limit on how many items a user can select in a multiselect, but I don't see any documentation for this. For the jQuery multiselect I see it has a maxSelectedItems, but there's nothing like that in the Angular version. How can I use the (valueChange) event to cap the selected items?

Kendo Angular Map

Is there any interactivity that can be used with Kendo Angular Map?

Like setting the "center" property after clicking on the map!

I also have troubles with scaling to width and height 100%!

Possible bug with calendar widget - range selection?

Hi,

I am not sure if is a bug or something configuration specific, but I have the following behavior in the calendar app:
I am using base range selection configuration for my kendo ui angular calendar.
After I select first date, say 15.12.2025. and i want to scroll to say june 2026, to select second date, I scroll with mouse (mac os, Sequioa 15.7.2) or touchpad, around March, calendar jumps back to December.

If I scroll on the side wheel with months to June, moment I go to the calendar to select dates, it jumps, but if I click on the June, then it doesn't jump back.

The same behavior is visible at Kendo UI demo page

App is built in angular 20 and it is a standalone component.
Is this a bug or expected behavior?

Thank you.
Vedad

KendoGridColumnGroup throwing warnings in console

Hi,

I've implemented a <kendo-grid-column-group> in my Grid and discovered this lead to warnings being plotted into the browser developer console:

You can easily verify this by the official example:

https://www.telerik.com/kendo-angular-ui/components/grid/columns/headers

-> Edit in -> Stackblitz -> Open Console

I'm working with the latest Kendo version 21.2.0 and ng 21.0.2.

Is this a known issue? Thanks in advance!

kendoGridToolbarFocusable works for kendo-dropdownlist but not kendo-multiselect

kendo 19.3.0, angular 19.2.17.

applying kendoGridToolbarFocusable to kendo-dropdownlist gives it the correct behavior to stay focused on click but this same behavior did not work for kendo-multiselect. it stays open so long as the click is held in but once released it closes. if the mouse is hovered over the dropdown that opens AND THEN released, the multiselect stays open and has intended behavior after selecting items.

kendoGridFocusable was also tried in this scenario and did not produce results.

<ng-template kendoGridToolbarTemplate>
<kendo-dropdownlist style="min-width:220px; margin-right:5px; margin-left:5px"
                    kendoGridToolbarFocusable
                    [data]="names"
                    (valueChange)="handleApplyAllValueChange()"
                    [defaultItem]="defaultApplyAllItem"
                    [textField]="'nm'"
                    [valueField]="'id'"
                    [(ngModel)]="applyAllItem"
                    [hidden]="isRevisedRadioButton()">
</kendo-dropdownlist>
<kendo-multiselect style="min-width:220px; max-width:220px; max-height: 140px; overflow-y: auto"
                   kendoGridToolbarFocusable
                   [data]="applyAllSecondaryList"
                   [textField]="'nm'"
                   [valueField]="'id'"
                   [disabled]="isApplyAllSecondaryDisabled()"
                   [autoClose]="false"
                   [(ngModel)]="applyAllSecondaryItem"
                   [placeholder]="'Select Secondary'"
                   [hidden]="isRevisedRadioButton()">
  <ng-template kendoMultiSelectTagTemplate let-dataItem kendoGridToolbarFocusable>
    {{ dataItem.deviationNm }}
</ng-template>
</kendo-multiselect>
</ng-template>

Scroll position of kendo-calendar does not work correctly with keyboard navigation when size is set to small or large

Steps to reproduce :

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

Add kendo-calendar component to page and set size to small

<kendo-calendar #calendarInfinite type="infinite" size="small"></kendo-calendar>

Open page containing calendar componet

Click today

Press down arrow on keyboard serveral times.

When no scrolling is needed, the focussed date is displayed correctly:

When down arrow is pressed some more times, the callendar component scrolls to the wrong position, so that the focussed date is not, or only partilally visible:

Page up/down in grid. How can I make the selected row follow to the following/previous page

I have an angular component with a grid that is group by three properties.
It is much like this basic kendo grouping example.

If I expand some groups and use page down. Then when i use arrow up/down fokus is still where i pressed page down.

The grid should set fokus on the next page when i press page down. This seem like a simple feature but I havent found a good simple way of doing this.

Treeview filter does not work along with drag&drop

Hi,

The treeview filter does not seem to work with drag&drop functionality :

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

Regards,

Julie

how to apply zh-cn intl

i wanted to apply "zh-cn" intl in my angular project.

1) i ran ng add @progress/kendo-angular-intl

2) at my app.module.ts

import { IntlModule } from '@progress/kendo-angular-intl';
import '@progress/kendo-angular-intl/locales/zh';

i can't find zh-cn on my node_modules local folder.

i got the below error:

./src/app/app.module.ts:20:0-49 - Error: Module not found: Error: Can't resolve '@progress/kendo-angular-intl/locales/zh' in 'O:\_Hcsms\src\hcsms.solution-angular-client\src\app'

btw, i did the above stesp after reading the below web page:
https://www.telerik.com/kendo-angular-ui/components/globalization/internationalization/loading-data

can you please help?

thank you.

Kendo Angular Dialog - Modal background not covering full height

Hi, I'm experiencing if a dialog is opened after the user has scrolled down from top of page. When dialog opens, the darker modal background cuts off before bottom of page and goes to the lighter modal background. Can you please provide some possible ways to resolve? Below is a very basic screenshot but illustrates the cut-off point.

New multi checkbox filter in grids

Maybe i'm missing it in the docs, but is there a way to set an object list with a text/value fields in the filter? Or a way to pass in a function that would be used to compute the displayed text?

We use a variation of the multi-select option custom filter from one of your knowledgebase articles and it allows this. We'd rather just use the new baked in one since it looks nicer and you'll probably keep it updated and improve upon it... but we have many filtered grid columns where the actual value is a code and the displayed text is converted to something human readable. The labels in the filter list need to be also human readable.

DialogService Prevent Action - Async/Observable

Hi, I am using DialogService to display a component which has an async validator. I want to have the PreventAction wait for the component's async validation to complete. Is this possible?

DateTimePicker: popup button's background color

How do you change the background color of the popup button of the DateTimePicker?

PDF export column headers

Is there anyway to fix the column headers on an export so that the header text does not get cutoff. There is plenty of room left in the column based on the length of the data, but the headers are being cutoff. I've tried several stylesheet changes, but nothing seems to work. Any help is appreciated.

Localization - No translation found warning

Hi,

I use MessageService for translation Kendo components, it works properly, but for some reason after the application starts, 'No-translation found for ...' warnings appear in the console.

combobox.component.html:3 No translation found for "7708502966028483300" ("NO DATA FOUND" - "kendo.combobox.noDataText").
combobox.component.html:3 No translation found for "2025597431468961462" ("clear" - "kendo.combobox.clearTitle").

I use Nx(21.4.1) monorepo with Angular (20.1.8) and Kendo (20.0.3).

How can I solve the issue so that the warnings don't appear?

Thanks!

export const translations: () => Record<string, string> = () => ({
  'kendo.textbox.clear': $localize`:@@component_textbox_clear:Törlés`,
  'kendo.label.optional': $localize`:@@component_label_required:Kötelező`,
  'kendo.combobox.noDataText': $localize`:@@component_combobox_noDataText:Nincs találat`,
  'kendo.combobox.clearTitle': $localize`:The title of the clear button.@@component_combobox_clearTitle:Törlés`,
});

import { Injectable } from'@angular/core';
import { MessageServiceasKendoMessageService } from'@progress/kendo-angular-l10n';
import { translations } from'../const/translation';

@Injectable({
  providedIn: 'root',
})
exportclassMessageServiceextendsKendoMessageService {
  publictranslations: Record<string, string> = translations();

  publicoverrideget(key: string): string {
    returnthis.translations[key] ?? key;
  }
}

//app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [
         { provide: KendoMessageService, useClass: MessageService },
],
};

horizontal scroll resets in angular kendo grid when using autofitcolumns on a dynamic content grid

I'm rendering a kendo-grid that receives data dynamically in runtime and required to autofit the columns continuously as data arrives.

I've used autoFitColumns() on the ngAfterViewChecked lifecycle hook to keep autofitting with each new data arrival. but each autofit resets the view of the grid and the horizontal scroll is reset to the start.

I searched for other issues regarding the subjects but none worked for this scenario.
tried solutions:

using ngZone and subscribing to OnStable
saving the scrollLeft property of '.k-grid-content' and and assigning the value to it after the autoFitColumns() call
calling autoFitColumns on specific changes within ngOnChanges.

without autofit there are no issues despite many dynamic data changes.

template parameters:

<kendo-grid
#grid
[kendoGridBinding]="gridData"
[skip]="skip"
[resizeable]="true"
....>

component (simplified)

export class Component {
@Input() columns$: Observable<TableColumns[]>
@Input gridData: any[];
@ViewChild(GridComponent) grid: GridComponent;

ngOnInit(){
this.columns$?.pipe(filter((cols)=> !!cols && cols.length > 0)).subscribe......
}

ngAfterViewChecked() {
this.grid?.autoFitColumns();
}

Help is appreciated.

Kendo tooltip position issues angular (20) kendo (20)

Hello all,

Hope you’re doing well!

I’m currently facing an issue with Kendo Tooltip in Angular 20. The tooltip is not behaving as expected — it either doesn’t show up correctly or fails to initialize in some cases.

Could you please help me troubleshoot or suggest the right approach to make it compatible with Angular 20?
If needed, I can share a small reproducible example of the issue.

Thanks in advance for your support!

Best regards,
Maulik Shah

 <div kendoTooltip style="text-align: center; padding-top: 10px;">
      <button
        kendoButton
        themeColor="primary"
        title="Saves the current document"
      >
        Save
      </button>
      <button kendoButton title="Discards all changes">Cancel</button>
    </div>
<router-outlet />

import { Component, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { KENDO_BUTTONS } from "@progress/kendo-angular-buttons";
import { KENDO_TOOLTIPS } from "@progress/kendo-angular-tooltip";
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet,KENDO_TOOLTIPS,KENDO_BUTTONS],
  templateUrl: './app.html',
  styleUrl: './app.scss'
})
export class App {
  protected readonly title = signal('#####');
}

Kendo PDF Export Prevent section titles from being split across pages

Hi everyone,

I’m using Kendo PDF Export in my Angular project, and I’m facing an issue with section titles and their content being split across pages.

In my case, the content is dynamic, so its size can vary a lot. Each section has a title and a block of data (text, tables, etc.), and some sections can span multiple pages depending on the data length.

What I’d like to achieve is that a section title never appears at the bottom of one page while its content starts on the next page. In other words, the section should stay together as much as possible, or at least start on a new page when needed.

I’ve already tried several approaches (page-break-inside: avoid, wrapping sections in <div> containers, adjusting margins, etc.), but none of them have produced consistent results — especially when the section itself is large enough to span more than one page.

Has anyone encountered this issue and found a reliable way to keep section headers and their content together when exporting to PDF with Kendo?

Thanks in advance!

@progress/kendo-drawing - 502/503

npm view @progress/kendo-drawing
npm ERR! code E502
npm ERR! 502 Bad Gateway - GET https://registry.npmjs.org/@progress%2fkendo-drawing

npm error code E503npm error 503 Service Unavailable - GET https://registry.npmjs.org/@progress/kendo-drawing/-/kendo-drawing-1.23.0.tgz - Service Unavailable

dialog ovelay over a MatSideNav

I got a simple custom dialog created with a <kendo-dialog> inside a component. The overlay works great and fills all the screens, except the matSideNav with Menu. The width of the overlay = screen wide.;

I tried to change z-Index of the k-overlay, but nothing works.

The only thing that works is using the Kendo Dialog Service with the outside of the nav container

<div kendoDialogContainer></div>

Any ideas?

Icon when Reordering Columns

Hi,

Is there a way to customize or override that drag clue behavior?

In our setup, some columns are fixed (non-reorderable) while the rest can be reordered. What we’d like to achieve is that when users try to move a reorderable column next to or into a fixed column, the “+” drag clue icon should not appear to visually indicate that the action isn’t allowed.

Thanks!

Performance Issue Forced Reflow and setTimeout Delay When Hovering Tooltip

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 19.2.14
Browser: Chrome (140.0.7339.208)
Tooltip Version : (@progress/kendo-angular-tooltip": "18.5.2")

can you help with that? Thanks in advance.

Kendo License 19- Secret key included in Minified js file - having issue in commit changes to Azure DevOps

Hi Team,

Just upgraded to Angular v19 and Kendo v19 and activated the license. When generated the minified JS files, the Kendo license secret/key is included as part of the minified JS file. Because of that we are not able to commit the changes to Azure DevOps/Git.

There is any suggestions/solution solve the issue? In Kendo v18, we never faced this issue.

Thanks

Date format from a custom locale

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!

[Angular] Grid rows do not dynamically refresh when they are grouped

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.

Grid pulls in Conversation UI package

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.

Kendo and CSP. got error "This document requires 'TrustedHTML' assignment."

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.

Scroll to item when paging

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

[Kendo CLI] migrate command ignores v19

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

Kendo UI for Angular not recognized in license

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.

Kendo Conversational UI - Auto-scroll

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

Kamal Hinduja Geneva, Switzerland : What are the themes supported by Kendo UI for Angular?

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

How to change the colour of the dependency lines

How can i change the colour of the lines drawn between the different tasks if i specify dependencies between them?

Also is there any way to dynamically change the slotWidth of the kendo-gantt-timeline-year-view components. I want to hook up a slider to drive the slotWidth value to be able to zoom in and out of the chart. Is this possible?

kendo-upload with custom upload event and inside reactive form

Hello,

I'm using Kendo UI for Angular's Upload component and implementing a custom upload mechanism via the upload event handler. The goal is to post the file before form submit (reactive form dynamically generated) and on submit only filename will be passed to form).

The problem is that although I've implemented custom upload handler, component is trying to post the file (at least I see POST to localhost in network tab)? Solved this with `e.preventDefault()` which uploads file correctly, but file is removed from kendo-upload and there is no info if it's uploaded.

<kendo-upload
  [multiple]="false"
  (upload)="uploadEventHandler($event)">
</kendo-upload>

uploadEventHandler(e: UploadEvent) {
  this.file = e.files[0].rawFile;
  this.uploadStatus = 'uploading';
  
  this.fileUploadService.mediaUpload(this.file, this.question).subscribe({
    next: () => {
      this.uploadStatus = 'success';
      this.control.setValue(this.file?.name);
    },
    error: (error: any) => {
      this.uploadStatus = 'error';
      this.errorMessage = this.getUserFriendlyErrorMessage(error);
    },
  });

  e.preventDefault(); 
}

[Telerik and Kendo UI Licensing] Error while importing license.

Hi, we have made an update of Angular version (to 19) alongside Kendo. It was working fine two weeks ago, but now we started having the following problem:

npm error [INFO][Telerik and Kendo UI Licensing] Telerik and Kendo UI License Key found at: /vercel/path0/telerik-license.txt
npm error License issued at 9/26/2023, 8:20:20 AM to XXXXX
npm error TypeError: glob[_0xb5a829(...)] is not a function
npm error     at setRuntimeLicense (/vercel/path0/node_modules/@progress/kendo-licensing/bin/kendo-ui-license.js:2:47328)
npm error     at main (/vercel/path0/node_modules/@progress/kendo-licensing/bin/kendo-ui-license.js:2:65092)
npm error     at async /vercel/path0/node_modules/@progress/kendo-licensing/bin/kendo-ui-license.js:2:77506
npm error [ERROR][Telerik and Kendo UI Licensing] Error while importing license.

We use:

"@progress/kendo-angular-buttons": "^19.2.0",
"@progress/kendo-angular-charts": "^19.2.0",
"@progress/kendo-angular-common": "^19.2.0",
"@progress/kendo-angular-dateinputs": "^19.2.0",
"@progress/kendo-angular-dialog": "^19.2.0",
"@progress/kendo-angular-dropdowns": "^19.2.0",
"@progress/kendo-angular-excel-export": "^19.2.0",
"@progress/kendo-angular-gauges": "^19.2.0",
"@progress/kendo-angular-grid": "^19.2.0",
"@progress/kendo-angular-icons": "^19.2.0",
"@progress/kendo-angular-indicators": "^19.2.0",
"@progress/kendo-angular-inputs": "^19.2.0",
"@progress/kendo-angular-intl": "^19.2.0",
"@progress/kendo-angular-l10n": "^19.2.0",
"@progress/kendo-angular-label": "^19.2.0",
"@progress/kendo-angular-layout": "^19.2.0",
"@progress/kendo-angular-listview": "^19.2.0",
"@progress/kendo-angular-menu": "^19.2.0",
"@progress/kendo-angular-navigation": "^19.2.0",
"@progress/kendo-angular-pager": "^19.2.0",
"@progress/kendo-angular-pdf-export": "^19.2.0",
"@progress/kendo-angular-pdfviewer": "^19.2.0",
"@progress/kendo-angular-popup": "^19.2.0",
"@progress/kendo-angular-progressbar": "^19.2.0",
"@progress/kendo-angular-spreadsheet": "^19.2.0",
"@progress/kendo-angular-toolbar": "^19.2.0",
"@progress/kendo-angular-tooltip": "^19.2.0",
"@progress/kendo-angular-treelist": "^19.2.0",
"@progress/kendo-angular-treeview": "^19.2.0",
"@progress/kendo-angular-upload": "^19.2.0",
"@progress/kendo-angular-utils": "^19.2.0",
"@progress/kendo-data-query": "^1.7.0",
"@progress/kendo-drawing": "^1.20.1",
"@progress/kendo-font-icons": "^4.5.0",
"@progress/kendo-licensing": "^1.7.1",

I didn't find anything related to this issue on the FAQ pages. Can I get some help and support about this issue?

DropDownList: The "for" reference of labels is marked invalid by accessibility testing tools

Hi,
I use the kend dropdownlist with a attached kendo-label. However the "for" reference of the label is marked as invalid (at least by "AInspector" and "WAVE" Accessibility testing tools).

Please see attached screen shots, where I tested against the first example from the kendo docs
( https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/dropdownlist/basic_usage?theme=default-ocean-blue-a11y )

DOM inspection of the example shows, that the label properly references the dropdownlist, also the aria-labelledby reference is correct:

<kendo-label text="Find restaurants in your area" dir="ltr"><!---->
  <label for="k-9997b5c1-2233-4273-ba25-6e344c093c3d" id="k-2a8d206c-3623-44ce-a03d-c8c097acc5a6">
  Find restaurants in your area<!----></label>
      <kendo-dropdownlist ... 
                      aria-describedby="k-80ee2bb7-41d8-4c8b-9afc-08898b371395"
                      id="k-9997b5c1-2233-4273-ba25-6e344c093c3d" ... aria-labelledby="k-2a8d206c-3623-44ce-a03d-c8c097acc5a6">
          <button ...>...</button>
            ...

The problem could be, that the label references the <kendo-dropdownlist> tag itself, not the included button or other included elements.

According to HTML documentation , only "labelable elements" can be referenced by the "for" reference of a label (e.g. button, input, see labelable elements ).

My question is, how to deal with it, and how to explain the warnings to our customers...

Thank you in advance!