Telerik Forums
Kendo UI for Angular Forum
1 answer
10 views

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:

await page.locator('input[name="expireDate"]').fill('2025-08-21');

; ----> this code will set the date input value to 2025 august 21st. But on kendo angular date picker, the resulting code is this:

await page.getByRole('button', { name: 'Toggle calendar' }).click();
await page.getByTitle('Monday, August 25,').locator('span').click();

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?

Yanmario
Telerik team
 answered on 22 Aug 2025
0 answers
4 views

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;
}

Han
Top achievements
Rank 1
 asked on 21 Aug 2025
1 answer
8 views

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 

var image = new drawing.Image(
'image source',
new geometry.Rect([cx, cy], [imageSize, imageSize])
);
image.options doesn't provide an option for tooltip in angular. Is there any way of doing it?
Martin Bechev
Telerik team
 answered on 21 Aug 2025
0 answers
3 views

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!

CARLOS
Top achievements
Rank 1
 asked on 20 Aug 2025
0 answers
6 views

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.

 

Runtang
Top achievements
Rank 1
 asked on 19 Aug 2025
1 answer
5 views

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.

Yanmario
Telerik team
 answered on 18 Aug 2025
1 answer
12 views
Hi, I'm using the dialog service and want to know how to position the entire dialog all the way to right of the browser window.
Hetali
Telerik team
 answered on 14 Aug 2025
0 answers
7 views

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?

Ferhat
Top achievements
Rank 1
 asked on 12 Aug 2025
1 answer
13 views
Hi! I am using kendo pdf viewer. The issue i have is that component behind the scenes is creating a canvas. This is not allowing me to ctrl + c. I am not sure why is this happening to me but not in the demo page. Do you have any clue what's happening ?

  <kendo-pdfviewer
    *ngIf="isPdfViewerVisible && pdfSource"
    [url]="pdfSource"
    style="height: 100%; width: 100%"
    [tools]="tools"
  ></kendo-pdfviewer>
Martin Bechev
Telerik team
 answered on 05 Aug 2025
2 answers
18 views

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.

     <kendo-grid-column field="ProductName">
        <ng-template
          kendoGridHeaderTemplate
          let-column
          let-columnIndex="columnIndex"
        >
          {{ column.field }}({{ columnIndex }})
        </ng-template>
        <ng-template
          kendoGridCellTemplate
          let-dataItem
          let-field
          let-rowIndex="rowIndex"
        >
          <span>{{ field["ProductName"] }}</span>
        </ng-template>
      </kendo-grid-column>

 

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?

Zornitsa
Telerik team
 answered on 01 Aug 2025
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?