Telerik Forums
Kendo UI for Angular Forum
2 answers
7 views
To file a complaint with Jio wrong recharge you can contact their customer support team at O93-366-5O9-73 and provide them with all the necessary details 
Rajul
Top achievements
Rank 1
 answered on 13 Jul 2025
0 answers
10 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
0 answers
125 views

Hi,

So I have created a treeview and have kendoTreeViewSelectable added to it which allows me to work with the items I have selected. That part, I was able to get working correctly so when I select an item in the treeview, the parent node of that item is also added to the selectedKeys and it "highlights" both the item and its parent(s). The issue that I am running into now is, when I select an item and then select it again, the item I clicked on is no longer highlighted but its parent(s) are. I want to set it up so that it stays selected. 

I've tried a few approaches like not running the method I have for selecting the parent nodes if the current item Id matches the one clicked on and also by resetting the selectedKeys array and trying to run my method but both don't seem to do anything. 

Any suggestions on what I could do?

Thanks,

Harry

Harry
Top achievements
Rank 1
 updated question on 29 Jul 2024
1 answer
72 views

How do I implement the sticky feature on the dropdownlist component? When browsing files on a code editor like Vscode, browsing deep level files, he pastes the parent file to the top. (I translated it from Chinese to English, please see the picture if you don't understand, thank you)

Implement sticky functions similar to those in the picture

/Users/like/code/Angular/angular-kendo/node_modules/@angular-devkit/architect/node/jobs/job-registry.js

 

Martin Bechev
Telerik team
 answered on 19 Jul 2024
0 answers
60 views
I'm not sure if this is expected behavior, but there seems to be an inconsistency with checked keys. When you filter a treeview and select a parent, the parent is added to checked keys along with any visible children. It seems to make more sense to only add the children to checked keys and to set the parent to indeterminate, as this is the behavior you'd expect without the filter applied. Below, are two screenshots - one after filtering and selecting, another after just selecting a child without filtering. Please let me know if this is something that will be addressed in a future release or if my team needs to write custom logic in our application for handling the checked and indeterminate keys.

Tim
Top achievements
Rank 1
 asked on 13 Jun 2024
1 answer
65 views

Hello,

I have a treeview and a editService as a directive/datasource. Anyway the nodeDrop called twice. Have u any idea why nodeDrop is called twice. Best regards Nico

   

this.treeview.nodeDrop.subscribe(x=>console.log(x));

 

Nico
Top achievements
Rank 1
Iron
 answered on 05 Jun 2024
0 answers
54 views

Hello,

its been dealt with. But i have another issue. I have a treeview and a editService as a directive/datasource. Anyway the nodeDrop called twice. Have u any idea why nodeDrop is called twice. Best regards Nico

   

this.treeview.nodeDrop.subscribe(x=>console.log(x));

 

Nico
Top achievements
Rank 1
Iron
 asked on 31 May 2024
1 answer
85 views

Hello,

i wante to disable drag and drop in my TreeView for specific Elements.

For example, i need something like that:

<ng-template kendoTreeViewNodeTemplate
                 let-dataItem>
      <span class="bold" [disable]="dataItem.name === 'uwe' ? true: false">
        {{dataItem.name}}
      </span>
   

</ng-template>

 

Best regards Nico

Zornitsa
Telerik team
 answered on 31 May 2024
1 answer
101 views

Hello,

i have a tree-view and i need the row fullsize. Look at the pictures. How can i do that? picture "aktuell" is the current layout  and picture "ziel" is the goal.

Best regards Nico

Martin Bechev
Telerik team
 answered on 20 May 2024
1 answer
85 views
Why is the checkbox in @ progress/kendo angular treeview not available in Angular 17.2.0 version
Hetali
Telerik team
 answered on 12 Apr 2024
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?