Telerik Forums
Kendo UI for Angular Forum
1 answer
7 views

In my application we display all dates in UTC regardless of user's timezone. We use angular reactive forms and will have our kendo date picker mapped to a formControlName - eg 'fiscalYearEnd'.

The value for fiscalYearEnd in my json is  eg '2025-07-09'.

If I then  populate this date field with this.form.get('fiscalYearEnd').setValue(new Date(json.fiscalYearEnd)) then if the user is in eg New York, ie EST timezone, then they will see 2025-07-08 as the value in the date picker.

I've also tried other approaches - eg 

this.form.get('fiscalYearEnd').setValue(new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate())));

Whatever I try, if the timezone is EST the date picker will display the previous day.

What am I doing wrong?

 

 

 

Martin Bechev
Telerik team
 answered on 11 Jul 2025
1 answer
10 views

hi,

i am looking the below topic:

https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/virtual

the web page says :

While the user is scrolling the table, the Angular Grid requests and displays only the visible pages. 

my question is:

how to scroll the table by codes?

for example ,i want to scroll the table making the data which id is 10254 visiable,

please tell me how to do this

thank you.

 

 

Martin Bechev
Telerik team
 answered on 10 Jul 2025
0 answers
7 views

Hi,

Is it possible when using the autocomplete to not show the popup when there is no data available. I'm aware that there's the no-data template but that still shows the popup even if nothing is attached.

I was considering using the open/close event functionality which might work but I don't think it fully suits the use case.

The scenarios are as follows

1. Start Typing and item found -> show popup
2. Start Typing and no item found -> don't show popup
3. Popup open and we type until no item found -> don't show popup

Any help on this would be appreciated! 

Ian
Top achievements
Rank 1
 asked on 09 Jul 2025
1 answer
10 views

Verified active Kendo UI license in Telerik account. Downloaded telerik-license.txt and placed it in the project root.Installed @progress/kendo-licensing via npm install --save. Activated the license with npx kendo-ui-license activate.Confirmed all steps work locally.Encountering build error during OpenShift pipeline build after adding license.

Error: EACCES: permission denied, open '/opt/app-root/src/webapp/node_modules/@progress/kendo-licensing/dist/index.mjs'
    at Object.openSync (fs.js:498:3)
    at Object.writeFileSync (fs.js:1529:35)
    at /opt/app-root/src/webapp/node_modules/@progress/kendo-licensing/bin/kendo-ui-license.js:2:47542
    at Array.forEach (<anonymous>)
    at setRuntimeLicense (/opt/app-root/src/webapp/node_modules/@progress/kendo-licensing/bin/kendo-ui-license.js:2:47301)
    at main (/opt/app-root/src/webapp/node_modules/@progress/kendo-licensing/bin/kendo-ui-license.js:2:63927)
    at async /opt/app-root/src/webapp/node_modules/@progress/kendo-licensing/bin/kendo-ui-license.js:2:64408 {
  errno: -13,
  syscall: 'open',
  code: 'EACCES',
  path: '/opt/app-root/src/webapp/node_modules/@progress/kendo-licensing/dist/index.mjs'
}
[ERROR][Telerik and Kendo UI Licensing] Error while importing license.
Martin Bechev
Telerik team
 answered on 09 Jul 2025
2 answers
17 views

 

We have applications upgraded from Angular 15 version to 19.2.14 version and Telerik from 11 to 19.1.1 version. After upgrade, we identified that all icons are missing or not rendered properly.

While searching regarding the issue, we can across Icons not showing after update in Kendo UI for Angular | Telerik Forums. So, started migrating all font icons to svg icons.

Few icons bare available in Angular Icons SVGIcon SVGIcon List - Kendo UI for Angularand able to use it.

But few font icons are not available in svg icons as below

class="k-icon k-i-loading"
class="k-icon workIcon"
class="k-icon k-i-error"
class="k-icon k-i-dictionary-add"
class="k-icon k-i-email .k-i-envelop.k-i-letter"


class="k-icon informationIcon" 
.informationIcon:before 
{
    content: "\e401"; 
}


Then please let us know what the correct approach is to upgrade these icons.

Rajesh
Top achievements
Rank 1
Iron
 answered on 04 Jul 2025
0 answers
9 views

I am trying to ensure that only leaf (child) nodes can be selected in the Kendo DropDownTree for Angular. If a parent node is clicked, the selection should be cleared and the input should display as empty (no value/placeholder).

What I am experiencing:

  • After selecting a child node (leaf), the value is set correctly.

  • If I later click a parent node, I set value = null in the valueChange event handler.

  • However, when I close and reopen the dialog containing the DropDownTree, the input always shows the last selected child (even though value is null).

  • The value for the input box is not showing null; the last valid child selection keeps coming back after reopening.

Summary of what I have tried:

  • Handled valueChange to only accept leaf node selections and set value = null for parents.

     

  • Verified that value is null when closing the dialog.

Expected behavior:
When a parent node is clicked, any selection should be cleared, and upon reopening the dialog, the DropDownTree input should remain empty (showing no last selection).

Actual behavior:
After clicking a parent and setting value = null, closing and reopening the dialog always shows the last selected child in the DropDownTree input.





<mnp-dialog
    class="feedback-dialog-wrapper"
    [width]="width"
    [height]="height"
    [isOpen]="isOpen"
    [title]="confirmationTitle"
    (close)="close()">
    <div class="feedback">
        <div>{{ confirmationMessage }}</div>
        <div class="k-form-field-wrap">
            <kendo-dropdowntree
                kendoDropDownTreeExpandable
                [kendoDropDownTreeHierarchyBinding]="data"
                childrenField="items"
                textField="text"
                valueField="id"
                [valuePrimitive]="true"
                [(value)]="value"
                [filterable]="true"
                (valueChange)="onValueChange($event)"
                (close)="closeEvent($event)"
                >
                <ng-template kendoDropDownTreeValueTemplate let-dataItem>
                    <ng-container *ngIf="!dataItem?.items || dataItem?.items.length === 0">
                        <span class="template">{{ dataItem?.text }}</span>
                    </ng-container>
                </ng-template>
                <ng-template kendoDropDownTreeNodeTemplate let-dataItem let-index="index">
                    <span
                        [ngClass]="{
                            'parent-node': dataItem.items?.length > 0,
                            'child-node': !dataItem.items || dataItem.items.length === 0
                        }">
                        {{ dataItem.text }}
                    </span>
                </ng-template>
            </kendo-dropdowntree>
        </div>
    </div>
    <kendo-dialog-actions>
        <mnp-button id="confirmaion-cancel-btn" fillMode="outline" (click)="close()">{{
            confirmationCancelBtn
        }}</mnp-button>
        <mnp-button id="confirmaion-submit-btn"  [disabled]="value === null" (click)="submit()">{{ confirmationSubmitBtn }}</mnp-button>
    </kendo-dialog-actions>
</mnp-dialog>


import { CommonModule } from '@angular/common';
import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
import { TranslocoModule } from '@jsverse/transloco';
import { ActionsLayout, KENDO_DIALOGS } from '@progress/kendo-angular-dialog';
import { ButtonComponent, DialogComponent, LabelComponent } from '@mnp-firm-it/angular-ui-components';
import { KENDO_DROPDOWNS } from '@progress/kendo-angular-dropdowns';
import { KENDO_LABELS } from '@progress/kendo-angular-label';
import { HierarchicalItem } from '../../../models/contract-models';

@Component({
    selector: 'app-manual-confirmation',
    templateUrl: './manual-confirmation.component.html',
    styleUrls: ['./manual-confirmation.component.scss'],
    standalone: true,
    encapsulation: ViewEncapsulation.None,
    imports: [
        CommonModule,
        DialogComponent,
        KENDO_DROPDOWNS,
        KENDO_DIALOGS,
        ButtonComponent,
        TranslocoModule,
        KENDO_LABELS
    ]
})
export class ManualConfirmationComponent {
    @Input() actionsLayout: ActionsLayout = 'stretched';
    @Input() isOpen = false;
    @Input() confirmationTitle = 'title';
    @Input() confirmationMessage = 'message';
    @Input() confirmationCancelBtn = 'Cancel';
    @Input() confirmationSubmitBtn = 'Submit';
    @Input() data: HierarchicalItem[] = [];
    @Input() width = '250';
    @Input() height = '250';
    @Output() closed = new EventEmitter<void>();

    value: number | null = null;
    @Output() submitted = new EventEmitter<boolean>();

    close() {
        this.value = null;
        this.closed.emit();
        this.submitted.emit(false);
    }

    submit() {
        this.submitted.emit(true);
        this.close();
    }

    onValueChange(selectedId: any) {
        this.value = null;
        const findItem = (items: any[]): any =>
            items.reduce((acc, item) => {
                if (item.id === selectedId) return item;
                if (item.items) {
                    const found = findItem(item.items);
                    if (found) return found;
                }
                return acc;
            }, null);

        const selectedItem = findItem(this.data);
        console.log('Selected Item:', selectedItem);

        if (!selectedItem.items) {
            this.value = selectedId;
        } else {
            console.log('iam here');
            this.value = null;
        }
    }

    closeEvent(event: any): void {
        if (this.value === null) {
            event.preventDefault();
        }
    }
 
}

Layth
Top achievements
Rank 1
Iron
 updated question on 25 Jun 2025
1 answer
7 views
Hi, I am trying to use FilterDescriptor/DataSourceRequest to filter a list property to see if it contains a certain value.  I don't see any filter options for this.  I did see that NestedPropertyTextFilterDescriptor exists for a different one of your products so I wondered if something like that exists in Kendo for Angular.  Or if some other out-of-the-box solution exists???
Martin Bechev
Telerik team
 answered on 20 Jun 2025
1 answer
14 views

Hey,

I tried to play around with the new Toolbar inside the Grid.

From the documentation I copied:

<kendo-grid
    [data]="gridData"
    [selectable]="false"
    (selectionChange)="onRowSelected()"
    [filterable]="true"
  >

<kendo-toolbar overflow="scroll">
      <kendo-toolbar-button kendoGridFilterTool></kendo-toolbar-button>
      <kendo-toolbar-button kendoGridSortTool></kendo-toolbar-button>
      <kendo-toolbar-button kendoGridGroupTool></kendo-toolbar-button>
      <kendo-toolbar-separator></kendo-toolbar-separator>
      <kendo-toolbar-button kendoGridColumnChooserTool></kendo-toolbar-button>
      <kendo-toolbar-spacer></kendo-toolbar-spacer>
      <kendo-toolbar-button kendoGridPDFTool></kendo-toolbar-button>
      <kendo-toolbar-button kendoGridExcelTool></kendo-toolbar-button>
    </kendo-toolbar>

...

Sadly, I can't seem to get the first three directives (kendoGridFilterTool, kendoGridSortTool, kendoGridGroupTool) to work.

I'm in Webstorm which tells me: "Attribute kendoGridFilterTool is not allowed here".


Am I missing an import or something?

Please help.

Yanmario
Telerik team
 answered on 20 Jun 2025
1 answer
11 views

I have two date series with different interval between timestamps, within the same time range. I'd like them to be lines with a gap instead of empty/missing values. The problem is, that to fulfil both requirements, I obviously need to create two axes - with different base unit step (otherwise one serie is continuous and the other is discrete).

As in this example: https://dojo.telerik.com/ZhgHEaJP

My question is whether there is a way how to 'merge' the two axes together to have just a single axis, as they are similar (except the base unit step), and to see the points at the same timestamp directly above.

Yanmario
Telerik team
 answered on 17 Jun 2025
0 answers
22 views

Hi,

 

i tried to use kendo ui at angular V19, i got the below errors when i ran ng server:

 

X [ERROR] TS2322: Type 'readonly [typeof TextBoxDirective, typeof TextBoxComponent, typeof InputSeparatorComponent, typeof TextBoxSuffixTemplateDirective, ... 49 more ..., typeof OTPInputCustomMessagesComponent]' is not assignable to type 'any[] | Type$1<any> | ModuleWithProviders<{}>'.
  The type 'readonly [typeof TextBoxDirective, typeof TextBoxComponent, typeof InputSeparatorComponent, typeof TextBoxSuffixTemplateDirective, ... 49 more ..., typeof OTPInputCustomMessagesComponent]' is 'readonly' and cannot be assigned to the mutable type 'any[]'. [plugin angular-compiler]

 

my package.json:

 

{
  "name": "kendo-angular-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^19.0.0",
    "@angular/common": "^19.0.0",
    "@angular/compiler": "^19.0.0",
    "@angular/core": "^19.0.0",
    "@angular/forms": "^19.0.0",
    "@angular/localize": "^19.0.0",
    "@angular/platform-browser": "^19.0.0",
    "@angular/platform-browser-dynamic": "^19.0.0",
    "@angular/router": "^19.0.0",
    "@progress/kendo-angular-buttons": "19.1.1",
    "@progress/kendo-angular-charts": "^19.1.1",
    "@progress/kendo-angular-common": "19.1.1",
    "@progress/kendo-angular-dateinputs": "19.1.1",
    "@progress/kendo-angular-dialog": "19.1.1",
    "@progress/kendo-angular-dropdowns": "19.1.1",
    "@progress/kendo-angular-excel-export": "19.1.1",
    "@progress/kendo-angular-grid": "^19.1.1",
    "@progress/kendo-angular-icons": "19.1.1",
    "@progress/kendo-angular-inputs": "19.1.1",
    "@progress/kendo-angular-intl": "19.1.1",
    "@progress/kendo-angular-l10n": "19.1.1",
    "@progress/kendo-angular-label": "19.1.1",
    "@progress/kendo-angular-layout": "19.1.1",
    "@progress/kendo-angular-navigation": "19.1.1",
    "@progress/kendo-angular-pager": "19.1.1",
    "@progress/kendo-angular-pdf-export": "19.1.1",
    "@progress/kendo-angular-popup": "19.1.1",
    "@progress/kendo-angular-progressbar": "19.1.1",
    "@progress/kendo-angular-toolbar": "19.1.1",
    "@progress/kendo-angular-treeview": "19.1.1",
    "@progress/kendo-angular-utils": "19.1.1",
    "@progress/kendo-data-query": "^1.0.0",
    "@progress/kendo-drawing": "^1.21.0",
    "@progress/kendo-licensing": "^1.5.0",
    "@progress/kendo-svg-icons": "^4.0.0",
    "@progress/kendo-theme-bootstrap": "^11.0.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.15.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^19.0.6",
    "@angular/cli": "^19.0.6",
    "@angular/compiler-cli": "^19.0.0",
    "@types/jasmine": "~5.1.0",
    "jasmine-core": "~5.4.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.6.2"
  }
}

 

can you please help ?

 

 

David
Top achievements
Rank 1
Iron
Iron
 asked on 14 Jun 2025
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?