Telerik Forums
Kendo UI for Angular Forum
0 answers
1 view

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

Roy Dale
Top achievements
Rank 1
 updated question on 18 Sep 2025
0 answers
1 view

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

 

Murray
Top achievements
Rank 1
Iron
Veteran
 asked on 18 Sep 2025
1 answer
14 views

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

Zornitsa
Telerik team
 answered on 17 Sep 2025
1 answer
11 views
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?
Martin Bechev
Telerik team
 answered on 16 Sep 2025
1 answer
6 views

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!



Zornitsa
Telerik team
 answered on 09 Sep 2025
1 answer
10 views

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

 

 

 

Zornitsa
Telerik team
 answered on 03 Sep 2025
1 answer
9 views
<div class="pdf-signing-viewer">
  <div class="pdf-signing-document-container">
    <kendo-pdf-export #pdf paperSize="A4" margin="0.5cm"  style="height: 100%; display: block">
      <div class="pdf-signing-document">
        <div *ngIf="htmlHeader != null" class="pdf-signing-header">
          <img src="{{ htmlHeader }}" width="90%" height="90%" />
        </div>
        <div id="HtmlTemplateContent" style="padding: 20px"></div>
        <!-- Signature preview for PDF export -->
        <div *ngIf="signatureValid" style="margin-left: 20px; display: flex; align-items: center;">
          <p style="font-size: 14px; margin: 0;">Signature:</p>
          <img [src]="signature" alt="Signature" style="max-width: 200px; max-height: 100px;" />
        </div>
        <div *ngIf="htmlFooter != null" class="pdf-signing-footer">
          <img src="{{ htmlFooter }}" width="100%" height="80%" />
        </div>
      </div>
    </kendo-pdf-export>
    <div class="pdf-signing-fade"></div>
  </div>
  <div class="pdf-signing-actions">
    <div class="pdf-signing-actions-content">
      <div class="pdf-signing-signature-area">
        <kendo-signature
          [popupScale]="2"
          [(ngModel)]="signature"
          (ngModelChange)="onSignatureChange($event)">
        </kendo-signature>
      </div>
      <div class="pdf-signing-buttons">
        <button kendoButton themeColor="primary">Upload PDF</button>
        <button kendoButton themeColor="primary" (click)="SaveThePdf(pdf)" [disabled]="htmlHeader == null && htmlFooter == null">Download PDF</button>
      </div>
    </div>
  </div>
</div>
Yanmario
Telerik team
 answered on 03 Sep 2025
0 answers
9 views

Hi Team,

I have default text filter (manual/server side) and want to have another filter as dropdownlist but both filters together  working

Sample : https://stackblitz.com/edit/dvv6dr8o

Before Filter

After apply both filters and remove filter for "Product Name" is not working. Also the filter array lost the selection for  "Category" field.
Also I need help to clear the dropdownlist/filter for category.

Kumar
Top achievements
Rank 1
 asked on 02 Sep 2025
2 answers
974 views

Is it possible to do this? 

I see I can customise individual items, but they would need to be in a Sortable container in order for drag / drop to work. Is there any way of achieving this?

Thanks

 

Mircea
Top achievements
Rank 1
Iron
 answered on 28 Aug 2025
1 answer
11 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!

Martin Bechev
Telerik team
 answered on 25 Aug 2025
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?