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();
}
}
}
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
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
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));
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));
Hello,
i wante to disable drag and drop in my TreeView for specific Elements.
For example, i need something like that:
</ng-template>
Best regards Nico
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