Our web application uses Kendo Angular Date Picker. And we are creating testcases on our web with a tool called Playwright from Microsoft. This tool mimics human interaction with the web. And on any form input control regardless of type, this fill() is used. For example:
; ----> this code will set the date input value to 2025 august 21st. But on kendo angular date picker, the resulting code is this:
Which will not bulletproof the testcase for future runs, as it does not contain the whole date including its year.
My question is can this component function just like native date input in this regard?
Hello,
I have a dropdownlist that I just cannot select anything out of. Here's my code:
If you look at the changeParentalControl there's a debugger inside that doesn't get hit.
HTML:
<kendo-dropdownlist
[data]="getParentalControlLevels()"
[textField]="'description'"
[valueField]="'name'"
[value]="getParentalControlLevelDisplay(itemPropertyEdit[1])"
(valueChange)="changeParentalControl($event)"
/>
TS:
interface ParentalControlLevelDisplay {
id: number;
description: string;
name: string;
}
getParentalControlLevels(): ParentalControlLevelDisplay[] {
if (this.assignments.length <= 1) return [];
return [
{id: 0, name: '', description: 'Adults, Teens, Kids'},
{id: 1, name: 'teens', description: 'Adults, Teens'},
{id: 2, name: 'adults', description: 'Adults'},
];
}
getParentalControlLevelDisplay(name: any): ParentalControlLevelDisplay | undefined {
let itemParentalControlTypes: ParentalControlLevelDisplay[] = [
{id: 0, name: '', description: 'Adults, Teens, Kids'},
{id: 1, name: 'teens', description: 'Adults, Teens'},
{id: 2, name: 'adults', description: 'Adults'},
];
let found = itemParentalControlTypes.find((t) => t.name == name);
return (found === undefined) ? undefined : found;
}
itemPropertyEdit: [string, string] = ['itemParentalControlLevel', 'adults'];
public changeParentalControl(event: any) {
debugger; // <--- this doesn't get hit!
this.itemPropertyEdit = event;
}
I've a kendo chart where I'm returning an image as a marker for my angular application. Is there any option to add a tooltip for that image.
sample image code is
Hi,
I'm using kendo-grid
in Angular with both resizable columns and virtual scrolling enabled.
I also call the autoFitColumns()
method (through ViewChild
) to auto-adjust the column widths based on the content.
However, I noticed the following problematic behavior:
My grid uses pageSize = 60
, so only 60 rows are rendered in the DOM at a time.
I have a total of about 101 rows.
The content in row #101 is much wider than any of the rows currently rendered.
When I call autoFitColumns()
, the method calculates the width based only on the visible (rendered) rows (the first 60).
As a result, when I scroll down to row 101, the cell shows ellipsis (...
) because the column width didn't get adjusted based on its content.
It seems that autoFitColumns()
does not take into account rows that aren't currently rendered due to virtual scrolling.
Expected behavior:
Ideally, autoFitColumns()
should consider the ENTIRE dataset, or at least provide an option to temporarily render all rows, so the width is calculated correctly.
I'll attach a sample StackBlitz with:
101 records
Virtual scrolling + resizable = true
Last row has a long text
After calling autoFitColumns
, the column is not wide enough and shows "..."
Could you please confirm if this is expected behavior or if there's a recommended workaround?
https://stackblitz.com/edit/angular-8rzs1wr6-7hvlbi8f?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fproducts.ts
Thanks in advance!
Hi,
I have a <kendo-splitter> inside a <kendo-expansionpanel>. During the accessibility evaluation using keyboard, I was not able to tab into the left pane, the focus goes into the right pane directly bypassing the left pane. Any fix for that? Thanks.
Hi there,
When [locked] is set in grid column, the kendoGridDetailTemplate will be broken. Noticed this issue after recent kendo version upgrade to 18.
Two expand + button will show in the locked columns and not locked columns and both buttons not working to expand.
Thanks.
When I set the upload method and prevent defaults, the other options didn't work. But I just want to override the upload method; the other properties should work as usual.
I can't use the default Upload Component post option because it causes CORS errors.
How can I override the upload method for the Upload component for Angular?
hi,
i have a snippet codes:
https://codesandbox.io/p/sandbox/adoring-galois-4cpxxm?file=%2Fsrc%2Fapp%2Fapp.component.ts%3A29%2C1
what i want is
if the product name is "Chai", i want to give the "TD" cell a speical css class name.
i can get the product name by the above codes, but i dont know how to set the "TD" class name . the TD is the parent element of the span .
can you please tell me how to do this?