Hi Team,
Currently, the Kendo UI for Angular library relies on SVG icons as default icons. This means that developers would have to use a service to change the default icons inside components. This approach, however, does change all icons inside the project and is not suitable for cases where only a particular icon in a single component should be changed.
Therefore, I would like to request a designated property or a specific approach that would allow developers to change particular icons inside particular components.
Hi,
This works with Angular 20, must be a change related to that.
If I assign data to the TreeView synchronously, it works, but e.g. in a setTimeout, it doesn't any more. (I assign the full array, change detection is set to eager.)
Reproduction can be found here: https://codesandbox.io/p/devbox/mutable-glade-39twhs?workspaceId=ws_P4gPDf6RC2r5W8xExWQehV
Best regards,
Michael
Hi team,
Currently, the Pager component responsive design can be disabled by using the Pager Template, but a separate option to disable the responsiveness would be a good addition to the component like jQuery or the Kendo UI for Angular Grid pager.
Hi,
Please provide an option that allows disabling the Clear button located in the Grid filter menu. Currently, it is always enabled, but I expect that it should be enabled only when there is a filter applied for the specific column that can be cleared. The required behavior is similar to the way the Filter button in the filter menu is functioning.
thanks
Provide a built-in option to paste Excel data inside the Editor formatted as a table (like the KendoReact Editor):
Currently, all events are set min-height of 25px. That causes the visually improper display of events:
Removing the applied min-height style will make sure that the events are visually positioned as expected, but the events' titles will be partly or fully hidden:
A workaround based on custom CSS is demonstrated in the following example:
https://stackblitz.com/edit/angular-bvh7fq-1s3ub7
Hi,
Currently, the 'More Events' button is not accessible through keyboard navigation, and it would be helpful if it could be made accessible.
Further Environment Informations
Component: @progress/kendo-angular-treeview
Severity: regression (worked in v23, broken in v24)
rxjs: 7.8.2
zone.js 0.15.1 (zone-based, not zoneless)
typescript 6.0.3
Summary
When a flat [nodes] array is bound to kendo-treeview and the array reference is replaced after the first change-detection pass, the TreeView keeps rendering the initial nodes and never reflects the new data. In v23.x the same binding updated correctly.
Minimal reproduction (standalone, drop into a blank Angular 22 app / StackBlitz)
import { Component, signal } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { TreeViewModule } from '@progress/kendo-angular-treeview';
interface Node { name: string; }
@Component({
selector: 'app-root',
standalone: true,
imports: [TreeViewModule],
template: `
<button (click)="replaceNodes()">Replace nodes</button>
<p>Plain list (control — reflects the current data):</p>
<ul>
@for (n of nodes(); track n.name) { <li>{{ n.name }}</li> }
</ul>
<p>Kendo TreeView (bug — stays on the initial data):</p>
<kendo-treeview
[nodes]="nodes()"
textField="name"
[kendoTreeViewSelectable]="{ enabled: false }"
>
<ng-template kendoTreeViewNodeTemplate let-dataItem>
{{ dataItem.name }}
</ng-template>
</kendo-treeview>
`,
})
export class AppComponent {
protected readonly nodes = signal<Node[]>([{ name: 'A' }, { name: 'B' }]);
protected replaceNodes(): void {
this.nodes.set([{ name: 'X' }, { name: 'Y' }, { name: 'Z' }]);
}
}
bootstrapApplication(AppComponent).catch(err => console.error(err));
Steps to reproduce
1. Load the component — TreeView renders A, B.
2. Click Replace nodes (assigns a brand-new array [X, Y, Z]).
Expected
The TreeView re-renders and shows X, Y, Z (like the plain <ul> control right above it, which updates correctly — proving the data really changed and change detection ran).
Actual (v24.2.2)
The TreeView still shows A, B. The new [nodes] reference is ignored.
Regression
Identical code updated correctly on @progress/kendo-angular-treeview 23.x. It broke on the upgrade to 24.x. Bisecting across 24.0.0 → 24.2.2 would pinpoint the exact patch.
Current workaround
Force the TreeView to be destroyed and recreated whenever the data reference changes:
@for (nodes of [data()]; track nodes) {
<kendo-treeview [nodes]="nodes" textField="name" ...>...</kendo-treeview>
}
This works but is obviously undesirable (full teardown/rebuild on every data change, loss of internal state).
For the Kendo DatePicker, if you try to set the size on a kendo-datepicker with plain text, it will not render and give a console error of "ERROR TypeError: Cannot read properties of undefined (reading 'nativeElement')".
Errors:
// HTML
<kendo-datepicker size="small" ... />
---
But on the other hand, it does work if you create a field of type "DateInputSize" and pass that variable to the size.
Works:// TS
protected size: DateInputSize = 'small';
// HTML
<kendo-datepicker [size]="size" ... />
Hi,
When the first day of the week is changed dynamically through a custom IntlService, the Calendar weekday headers are updated, but the date cells are not repositioned. (The first day is changed as described in your guide: https://www.telerik.com/kendo-angular-ui/components/knowledge-base/calendar-first-day )
Reproduction (forked from your example): https://stackblitz.com/edit/angular-tqvypgwg
Click on "Set first day to Monday ": the weekday headers are updated to start with Monday, but the date cells remain in their previous positions.
Best regards,
Michael
When enabling the showSelectAll option in a checkbox column on the TreeList component, a checkbox is rendered with the TreeListSelectAllCheckboxDirective. In its constructor, this directive includes some logic that causes the TreeList to instantiate a new ViewCollection every time a selection change occurs. However, the call to ViewCollection.loadView() does not pass the service responsible for determining expanded nodes, so the default fallback (which returns true for all nodes) is used.
Unnecessary and potentially expensive backend calls
Performance degradation, especially with large datasets
Inefficient "select all" logic that does not respect the current loaded/visible state
This behavior appears to ignore the fact that TreeList is configured for remote data binding with lazy-loaded children.
showSelectAll should only evaluate the currently loaded and visible items
fetchChildren() should not be called for every node
Integration with remote/lazy-loaded data should be respected
Update TreeListSelectAllCheckboxDirective to properly integrate with the expanded node detection logic or allow injection of a custom service.
Provide an override or callback to control the behavior of the "select all" checkbox manually in remote scenarios.
Configure a TreeList with hasChildren and children to fetch child nodes lazily.
Enable selection with checkbox column and showSelectAll: true.
Click any checkbox inside the TreeList.
Observe that fetchChildren() is triggered for all nodes, not just expanded ones.
Open console and click on the first cell.
https://stackblitz.com/edit/angular-e2ai4pjx?file=src%2Fapp%2Fapp.component.ts,angular.json
When you move the cursor to a new series item, the tooltip position does not move until you leave the chart area and re-enter. It changes the content based on where the cursor is pointing, but does not change the position.
import { Component } from '@angular/core';
import {KENDO_CHARTS} from "@progress/kendo-angular-charts";
@Component({
selector: 'app-root',
imports: [KENDO_CHARTS],
template: `
<kendo-chart>
<kendo-chart-legend position="bottom"></kendo-chart-legend>
<kendo-chart-series>
<kendo-chart-series-item
type="donut"
[data]="data"
field="value"
categoryField="category"
colorField="color"
[holeSize]="60"
[tooltip]="{
visible: true,
format: '{0:C0}'
}"
[highlight]="{ visible: true }"
>
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`,
})
export class App {
public data = [
{ category: "Electronics", value: 245000, color: "#0058e9" },
{ category: "Clothing", value: 189000, color: "#37b400" },
{ category: "Home & Garden", value: 156000, color: "#f59c1a" },
{ category: "Sports", value: 134000, color: "#ff6358" },
{ category: "Books", value: 98000, color: "#8c43ff" },
{ category: "Toys", value: 78000, color: "#00acc1" },
];
}
The Tooltip position only changes when you leave and reenter the Chart area. It does not change when you move the cursor from one series item to other, it updates the content displayed in the Tooltip though.
The Tooltip position should move with the cursor as seen in the screen recording below:
Because of the CSS, if a parent element has used translate (transform: translateX(0px); ) every child element under it is no longer fixed.
This causes components like kendo-dialog to be relatively positioned inside the drawer - usually cut off.
Even turning off animation still leaves the style rule.
For Angular Kendo Scheduler, if the Work week view is selected (default Mon-Fri), and Sunday is selected on the mini calendar to select the date to display - the previous week will be displayed. This is confusing, as simply toggling to Week view will then display the different, current week.
https://www.telerik.com/kendo-angular-ui/components/scheduler/views/day-week/
Expected behaviour: current week on mini calendar corresponds to the current week displayed regardless of whether full week or work week view is selected
Actual behaviour: selecting any day up until the desired "work week's start" (even if it's customized to start on e.g. Tuesday - and selecting Monday) will show previous week; switching then to full week view switches the week displayed to the one selected on mini calendar
------
Curiously, this does not happen for Kendo scheduler for JQuery (https://demos.telerik.com/kendo-ui/scheduler/index):
Ability to customize the fields control of the FilterExressions:
Hi,
in the ListBoxComponent, there is the concept of custom messages, by which a "noData" message can be set:
https://www.telerik.com/kendo-angular-ui/components/listbox/api/custommessagescomponent#nodatatext
A similar concept would be beneficial for the ListView (https://www.telerik.com/kendo-angular-ui/components/listview), so that we can show a message in here as well in case no data is available.
Thanks,
Felix