Telerik Forums
Kendo UI for Angular Forum
1 answer
27 views

Is there a way to make end time for week view 23:59 instead of 00:00?

This is my code:

<kendo-gantt
  [kendoGanttHierarchyBinding]="data"
  kendoGanttExpandable
  [initiallyExpanded]="true"
  childrenField="subtasks"
  [activeView]="activeView"
  workDayEnd="23:59"
  workDayStart="00:00"
>
  <kendo-gantt-timeline-week-view
      [timelineHeadersDateFormat]="{
        groupHeaderDateFormat: 'EEE MMM dd HH:mm',
        columnHeaderDateFormat: 'EEE, dd MMM',
      }"
  ></kendo-gantt-timeline-week-view>
</kendo-gantt>

Martin Bechev
Telerik team
 answered on 27 Apr 2026
0 answers
33 views

I am able to run the Angular application locally without any errors. However, when executing Jasmine/Karma unit tests locally, I intermittently encounter the following error:

SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at node_modules/@progress/kendo-licensing/dist/index.mjs:1:1826
    at node_modules/@progress/kendo-licensing/dist/index.mjs:1:1834
    at Array.map (<anonymous>)
    at a (node_modules/@progress/kendo-licensing/dist/index.mjs:1:1740)
    at N (node_modules/@progress/kendo-licensing/dist/index.mjs:1:20086)
    at validatePackage (node_modules/@progress/kendo-licensing/dist/index.mjs:1:20917)
    at new _ComboBoxComponent (
        node_modules/@progress/kendo-angular-dropdowns/fesm2022/progress-kendo-angular-dropdowns.mjs:5603:9
    )
    at NodeInjectorFactory.factory (
        node_modules/@progress/kendo-angular-dropdowns/fesm2022/progress-kendo-angular-dropdowns.mjs:6520:16
    )
    at getNodeInjectable (
        http://localhost:9876/darwin_arm64-fastbuild-ST-fdfa778d11ba/bin/packages/core/src/render3/di.ts:785:38
    )

At the same time, the following warnings appear in the test output:

WARN: 'No Telerik and Kendo UI License found.
To download a license key file, visit https://prgress.co/3PwQMKZ'

Also, the error is not consistent. I am receiving same licensing error from kendo grid package.

Chrome Headless 146.0.0.0 (Windows 10) KendoGridComponent can load instance FAILED
	SyntaxError: Unexpected end of JSON input
	    at JSON.parse (<anonymous>)
	    at node_modules/@progress/kendo-licensing/dist/index.mjs:1:1826
	    at map (node_modules/@progress/kendo-licensing/dist/index.mjs:1:1835)
	    at Array.map (<anonymous>)
	    at a (node_modules/@progress/kendo-licensing/dist/index.mjs:1:1740)
	    at N (node_modules/@progress/kendo-licensing/dist/index.mjs:1:8844)
	    at getLicenseMessage (node_modules/@progress/kendo-angular-common/fesm2022/progress-kendo-angular-common.mjs:1485:36)
	    at new GridComponent (node_modules/@progress/kendo-angular-grid/fesm2022/progress-kendo-angular-grid.mjs:33359:48)
	    at NodeInjectorFactory.factory (node_modules/@progress/kendo-angular-grid/fesm2022/progress-kendo-angular-grid.mjs:34710:16)
	    at getNodeInjectable (node_modules/@angular/core/fesm2022/_debug_node-chunk.mjs:1044:38)

Environment Details

  • Angular version: 21.2
  • Kendo UI components: Version 23.3.0 (full list below)
  • @progress/kendo-licensing: ^1.11.0
"@progress/kendo-angular-buttons": "^23.3.0",
"@progress/kendo-angular-dateinputs": "^23.3.0",
"@progress/kendo-angular-dialog": "^23.3.0",
"@progress/kendo-angular-dropdowns": "^23.3.0",
"@progress/kendo-angular-excel-export": "^23.3.0",
"@progress/kendo-angular-grid": "^23.3.0",
"@progress/kendo-angular-icons": "^23.3.0",
"@progress/kendo-angular-indicators": "^23.3.0",
"@progress/kendo-angular-inputs": "^23.3.0",
"@progress/kendo-angular-intl": "^23.3.0",
"@progress/kendo-angular-l10n": "^23.3.0",
"@progress/kendo-angular-label": "^23.3.0",
"@progress/kendo-angular-layout": "^23.3.0",
"@progress/kendo-angular-menu": "^23.3.0",
"@progress/kendo-angular-navigation": "^23.3.0",
"@progress/kendo-angular-pager": "^23.3.0",
"@progress/kendo-angular-pdf-export": "^23.3.0",
"@progress/kendo-angular-popup": "^23.3.0",
"@progress/kendo-angular-progressbar": "^23.3.0",
"@progress/kendo-angular-toolbar": "^23.3.0",
"@progress/kendo-angular-treeview": "^23.3.0",
"@progress/kendo-angular-upload": "^23.3.0",
"@progress/kendo-angular-utils": "^23.3.0",
"@progress/kendo-data-query": "^1.7.4",
"@progress/kendo-drawing": "^1.25.0",
"@progress/kendo-svg-icons": "^4.8.0",
"@progress/kendo-angular-common": "^23.3.0",
"@progress/kendo-angular-conversational-ui": "^23.3.0",

What I’ve Tried

I followed the solutions suggested in the Telerik forum thread below, but the issue still occurs intermittently during unit test execution:

Question

Why does the Kendo licensing validation fail only during Jasmine unit tests, while the application runs normally, and how can this be reliably resolved or mocked for unit testing?

Dhanabal
Top achievements
Rank 1
 updated question on 24 Apr 2026
1 answer
31 views

This is template code: 

 <kendo-grid
      [data]="gridView"
      [groupable]="true"
      [hideHeader]="true"
    > ... </kendo-grid>

This is code from component: 

export class MyComponent {
  data: any[] = [
    {
      id: crypto.randomUUID(),
      name: 'Emma Thompson',
      group: 'Team A',
    },
    {
      id: crypto.randomUUID(),
      name: 'Oliver Smith',
      group: 'Team B',
    },
    {
      id: crypto.randomUUID(),
      name: 'Anna Brown',
      group: 'Team A',
    },
  ];
  group: GroupDescriptor[] = [{ field: 'group', dir: 'asc' }];

  get gridView() {
    return process(this.data, {
      group: this.group,
    });
  }
}

This is output: 

Question is, how can I customize this label so that it displays text that I want? I have tried setting it programatically, but as soon as I collapse/expand top group, seems like all other groups reset label back to this default one?

Hetali
Telerik team
 answered on 23 Apr 2026
0 answers
25 views

Package / Version:
@progress/kendo-angular-grid v23.2.1 (also reproduced on v23.3.0)
Angular 20.x

Description:

When using a Kendo Grid with scrollable="virtual", [rowHeight]="30", and [data] bound to a GridDataResult, if the user scrolls down (triggering (pageChange) with a non-zero skip), and then the data is replaced programmatically (e.g., by applying a filter that changes the dataset), the grid's virtual scroll container does not reset properly. The result is a large white/empty area above the actual rows — the user must scroll past this empty space to see the data (or the "No records available" message if the filtered result is empty).

Steps to Reproduce:

1. Create a grid with virtual scrolling:

<kendo-grid [data]="gridData" [kendoGridBinding]="filteredData"    scrollable="virtual" [rowHeight]="30" [pageSize]="300"    [skip]="currentSkip" (pageChange)="onPageChange($event)"></kendo-grid>


2.Load the grid with enough data to enable scrolling (e.g., 1000+ rows).

3.Scroll down significantly so the grid fires (pageChange) with a skip value > 0 (e.g., skip=300+).

This causes the grid's internal virtual scroller to:

Set translateY(Npx) on the grid table element to offset the visible rows
Set .k-height-container > div height to total * rowHeight
4.Now programmatically change the bound data to a much smaller or empty dataset:


this.filteredData = this.allData.filter(item => item.driverId === selectedDriverId);

this.gridData = {

data: this.filteredData.slice(0, this.pageSize),

total: this.filteredData.length

};

5.Expected: The grid resets to the top and displays the filtered rows immediately, with the virtual scroll container sized correctly for the new total.

6.Actual: The grid retains the old translateY offset and .k-height-container height from before the filter. This produces a large empty white/blue area at the top of the grid. The actual rows (or "No records available") are pushed far below the visible viewport. The user must scroll down through the empty space to find them.

Root Cause Analysis:

The grid's ListComponent.resetVirtualScroll(newTotal) method correctly resets translateY, scrollTop, and recreates the RowHeightService. However, this method is only called from the grid's ngOnChanges when both conditions are met:

this.skip === 0
this.isVirtualScrollOutOfSync() returns true (i.e., virtualSkip > 0 or tableTransformOffset > 0)
The problem is that ngOnChanges checks this.skip === 0, but the grid's internal skip (managed by the virtual scroller) may not match the value passed through [skip] binding until after change detection. When data changes and [skip] is set to 0 simultaneously, the grid's internal skip may still hold the old value at the time ngOnChanges runs, so resetVirtualScroll is never called.

Additionally, the kendoGridBinding directive's rebind() path does call resetVirtualScroll, but it appears to have a timing issue in v23 where the internal scroller state (translateY, height container) is not fully synchronized when the data reference changes without the directive detecting a meaningful change.

This worked correctly in Kendo Angular Grid v20.x — downgrading to v20 resolves the issue entirely, confirming this is a regression in v23.

Workaround:

We manually reset the virtual scroll DOM after programmatically changing the data:


  

private resetGridVirtualScroll(): void { 

try { const gridEl: HTMLElement = this.myGrid.ariaRoot.nativeElement; // Reset scroll position const content = gridEl.querySelector('.k-grid-content'); if (content) {

content.scrollTop = 0;

} // Reset the table translateY that virtual scroll sets

const table = gridEl.querySelector('.k-grid-content table, .k-grid-content .k-grid-table-wrap'); if (table instanceofHTMLElement) { table.style.transform = 'translateY(0px)'; } // Reset the height container to match new total

const heightDiv = gridEl.querySelector('.k-height-container > div') asHTMLElement; if (heightDiv) { const total = this.filteredData?.length || 0; heightDiv.style.height = (total * this.rowHeight) + 'px'; } } catch (e) { }

}

Called after updating the data and skip:

applyFilter() {   

this.skip = 0; 

  this.filterData(); 

  this.loadGridData();   

this.resetGridVirtualScroll();

}

We also had to fix loadData() to handle empty datasets — when FilteredData is empty, gridData must be set to { data: [], total: 0 }, otherwise the grid retains the old total and the virtual container keeps its large height.

Expected Fix:

The grid should automatically call resetVirtualScroll() whenever [data] changes with a new (different) total value and the virtual scroller is out of sync — regardless of the current internal skip state. The ngOnChanges guard this.skip === 0 should either be removed or should check the incoming skip binding value rather than the stale internal state.

Waseem
Top achievements
Rank 1
 asked on 23 Apr 2026
1 answer
27 views

So I have a requirement to have gantt timeline spread as much as possible. Since treelist is fixed 500px width, I calculate upon view init how much slotWidth for each day should be. When I resize screen, what I noticed is that width is not updating, so I tried to set table width via CSS to be 100%. When I resize window in this case, table columns do resize, but task stays the same width.

Also when I collapse treelist and timeline is expanded, it should take 100% of screen, yet it still takes calculated width.

Is there a solution for this resize?

Martin Bechev
Telerik team
 answered on 23 Apr 2026
1 answer
17 views
Hi Team,

I’m using Kendo UI for Angular (Angular 20) with the Kendo MultiViewCalendar along with Kendo Tooltip.

I have a custom month cell template where I’m showing indicators (like categories) and applying a tooltip using the title attribute. The tooltip works fine in general.

However, I’m facing an issue specifically with dates that fall inside the selected range (highlighted/red background). For these cells, the tooltip is not  (not visible / not triggering).

It seems like the range selection overlay or styling is preventing the tooltip from being triggered, possibly due to layering or pointer event limitations.

What I want:

I need to display a tooltip on those red (range-selected) date cells as well.

My question:

Is there any supported way or workaround to make tooltips work on dates that are inside the selected range in the MultiViewCalendar?

Any guidance would be really helpful.

Thanks!

Hetali
Telerik team
 answered on 22 Apr 2026
1 answer
36 views

Here is an article I wrote, and I would appreciate your feedback

Bridging the gap: Angular Signals + Kendo UI Grid. 🔄
I’m sharing my journey on refactoring enterprise apps using rxResource, withPreviousValue, and a custom directive for a glitch-free, high-performance UI.

https://medium.com/we-code/kendo-angular-grid-meets-signals-25537c901cdf

 

Thanks.

Diego

 

Martin Bechev
Telerik team
 answered on 16 Apr 2026
3 answers
602 views
We are noticing these characters "â€<" showing up intermittently after updating our kendo-angular dependencies to 15.5.0.
It's not an issue we are able to reproduce every day, and sometimes reloading will fix it, but it will appear at the beginning of kendo window headers, and options in kendo dropdowns. We have not changed anything about our code, nor are we using any special characters ourselves in these locations.

Our angular version is 17.3.12

Is this a known issue? What would the fix be?

Thanks.


Matthew
Top achievements
Rank 1
Iron
 answered on 15 Apr 2026
0 answers
29 views

This is code:


<kendo-textarea
      placeholder="Write description…"
      resizable="vertical"
      [rows]="2">
</kendo-textarea>

 

and this is output (top button is only for vertical resizing and bottom one resizes both ways):

 

Miljana
Top achievements
Rank 2
Iron
Iron
 asked on 08 Apr 2026
2 answers
30 views

Hi all.

I'm using kendo-pdfviewer and loading it with a PDF I get from a web service.  The web service takes query parameters and returns a PDF as a Byte[] and I turn that into a base64 string and put that in the viewer.  Basic stuff ;)  Here's the element from my HTML:

        <kendo-pdfviewer style="height: 800px" [data]="pdfSrc" [tools]="pdfViewerTools">
          <app-pdfviewer-messages></app-pdfviewer-messages>
          <ng-template kendoPdfViewerBlankPageTemplate>
            <div class="blank-template">No data</div>
          </ng-template>
        </kendo-pdfviewer>


Now, if i.e. the user has a PDF in the viewer and wants to narrow the data with some extra parameters, and that result returns an empty PDF, I need to remove the previous PDF from the viewer.

I've tried to set [data] to null and undefined but that does not work. Any suggestions ?

Best regards,
Kalli Kaldi

Martin Bechev
Telerik team
 answered on 06 Apr 2026
Narrow your results
Selected tags
Tags
+? more
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?