After updating to Angular version 17.3.0 the TabStripComponen throws errors:
The problem can be reproduced using this StackBlitz sample: https://angular-baaosj.stackblitz.io
Test Environment:
Windows 11 Enterprise 22H2 22621.1848.
Narrator
Microsoft Edge Version 114.0.1823.79
Repro steps:
Actual Result:
When pressing enter on the column menu present beside the "Contact name" column header of the table, Screen reader is no announcing the state of the the column as it is expanded or collapsed because of the role set as link.
Expected Result:
When pressing enter on the column menu present beside the "Contact name" column header of the table, screen reader should be announcing the state of the column menu as it is expanded or collapsed, role should be set as button with expand collapse functionality.
When printing directly from Angular PDF Viewer results in a blurry printed PDF document. Downloading to PDF and printing does not affect the document
When setting the [zoom] value in TypeScript the drop down value does not reflect this and remains at the default of 125% even though the PDF is zoomed in/out.
Adjusting the zoom level using the buttons then "corrects" the issue and it displays the right value.
https://stackblitz.com/edit/angular-botsaf?file=src/app/app.component.ts
The internal element has a calculated width - but it only grows in value if slider width changes (responsive or even in CSS with media queries etc).
It permanently stays at the largest size.
The alternating grid rows got k-table-row-alt
.k-table-row-alt
.k-table-alt-row
We are upgrading from @progress/kendo-angular-grid 4.8.0 to 7.4.2 and are running into an issue where a `kendo-grid-command-column` on a non-reorderable single column-sortable grid has gained the `pointer: cursor` CSS style where it did not previously.
The kendo documentation also shows this behavior, implying clicking on the command column header will do something when it will not, unlike the other columns. https://www.telerik.com/kendo-angular-ui/components/grid/editing/inline-editing/#toc-using-reactive-forms
kendo-angular-grid 4.8.0:
kendo-angular-grid 7.4.2:
when someone clicks on a date in the middle of the component, it will scroll the component instead of selecting the date.
This occurs in chrome and edge. In firefox this issue is not observed.
Steps:
1. Open a datepicker (https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/)
2. Hover over tuesday (bootstrap theme), between tuesday and wednesday in default theme.
3. Click on the date.
4. The component scrolls instead of selecting the date.
The cursor also changes from pointer to default. It seems another component is on top of the tuesday column.
Hi Team
we were using Multiselect with version of dropdown "@progress/kendo-angular-dropdowns": "5.3.0",
but now that we have updated the kendo dropdowns version "@progress/kendo-angular-dropdowns": "7.0.2"
CSS of our multiselect is messed up now can you suggest a way to keep our old CSS working as everything was coming from KendoDropdown
as now I can see <li> tag is converted to <div> for each item selected and there is a new class k-chip introduced .
This has been breaking our production please help us in going forward.
Hi,
When "popupSettings.appendTo" is set to 'component' then the value binding is broken and the "valueChange" event is not triggered. It is not possible to select an item and the underlaying model is not updated.
Issue can be reproduced in this StackBlitz: https://stackblitz.com/edit/angular-f76kqf?file=src/app/app.component.ts
Regards
Holger
Currently angular will fail builds due to type check if kendo-timepicker value is null/undefined.
It requires it to always be a date - making it impossible to have initially empty values or to even reset the selection/value and show a placeholder.
Even the documentation for placeholder says:
Specifies the hint the TimePicker displays when its value is `null`.
private _value: Date = null;
@Input() public set value(value: Date)
But the input does not allow this. Even the property is defined in a way that would fail type checks in any newer angular project (strict mode is the default).
The only workaround currently is to disable type check with $any()
ANCHOR`, styles: [` .content { padding: 30px; color: #787878; background-color: #fcf7f8; border: 1px solid rgba(0,0,0,.05); } .anchor { width: 80px; height: 40px; cursor: pointer; position: relative; } .example { position: absolute; } `] }) export class AppComponent { private collision: Collision = { horizontal: 'flip', vertical: 'fit' }; /* Move the 'example' to the bottom to see the collision behavior */ private exampleTop = 400; private toggleText = 'Show'; private show = false; public onToggle(): void { this.show = !this.show; } } " class="demo-file-sc-s3r0g1-1 jgyKPC" data-language="ts" style="box-sizing:border-box;position:relative;overflow:auto;margin-top:0px;margin-bottom:0px;padding:1rem;background:rgb(248, 248, 248);border:0px;min-height:3rem;line-height:1.5;white-space:pre-wrap;color:#1f1f1f;">
Toggle Popup ` }) export class AppComponent { private show = true; } " class="demo-file-sc-s3r0g1-1 jgyKPC" data-language="ts" style="box-sizing:border-box;position:relative;overflow:auto;margin-top:0px;margin-bottom:0px;padding:1rem;background:rgb(248, 248, 248);border:0px;min-height:3rem;line-height:1.5;white-space:pre-wrap;color:#1f1f1f;"><button #anchor kendoButton (click)="show = !show">Toggle Popup</button> <kendo-popup [anchor]="anchor" *ngIf="show"> <div style="padding: 30px; background-color: #fcf7f8">Popup content.</div> </kendo-popup>
Directly referencing anchor like that will not work on any new Angular project - it will fail template type checks.
Type HTMLButtonElement is not assignable to type ElementRef
By default, the reference is to the component and not to the ElementRef.
Without a custom directive, this would have to use
@ViewChild("anchor", { read: ElementRef }) popupButtonEl: ElementRef;
Dear Support,
we have upgraded our Kendo Angular Menu control from 2.0.3 to 3.0.4 and we are experiencing the following problem:
please check the attached screen recording and the following stackblitz repro:
additional info:
Thank you,
Ferenc Papp
If the value string for a QR Code is greater than 100 characters the resulting QR Code cannot be scanned. Here's a StackBlitz demonstrating the issue:
https://stackblitz.com/edit/angular-2axafs?file=app/app.component.ts
Interestingly enough, this issue doesn't seem to be present in the AJAX version of the QR Code component as putting in a +100 character string on the example page results in a valid QR Code: https://demos.telerik.com/aspnet-ajax/barcode/examples/qrcode/defaultcs.aspx
autoClose is set to false and checkboxes true.
Clicking on that small margin area next to checkbox causes the dropdown to close.
I'm using the Kendo Angular DropDownList component and I'm facing a couple of accessibility issues.
I got two issues, the same as those I get in my own application using the DropDownList component.
I've attached the output for both issues below.
First issue and an explanation of the issue and its solutions can be seen in the first attachment.
Second issue and an explanation of the issue and its solutions can be seen in the sercond attachment.
Hi, the following steps to reproduce the problem:
As you can see, the three dots menu of the not ticky columns are not hidden when overlapped by sticky columns.
Best regards,
Alessandro
Hi All,
Anyone can help us to figure it out?
Currently, We are using Angular Kendo Gird package, and got issue for tooltip message for Gird.
When We mouse move over 3 dots for grid column menu, we would get strange tooltip message, for details , please check it from attachment.
My Email:liji.tao@teranet.ca
Thanks
Liji