I have used the kendo tree view component with multi select check boxes.
and when I check them it will return the position of the node tree item. like below image.
My problem is how can I get the text of the selected items instead of this checked keys.
Here is my code
<div class="example-config">Checked keys: {{ checkedKeys.join(",") }}</div>
<kendo-treeview
textField="moduleName"
[nodes]="nodes"
[children]="children"
[hasChildren]="hasChildren"
kendoTreeViewExpandable
kendoTreeViewCheckable
class="k-treeview"
[(checkedKeys)]="checkedKeys"
(checkedChange)="checked(checkedKeys)"
>
<ng-template kendoTreeViewNodeTemplate let-dataItem>
{{dataItem.moduleName || dataItem.featureName}}
</ng-template>
</kendo-treeview>
public checkedKeys: any[] = [];
public nodes: any[] = [
{
moduleId: 1,
moduleName: 'Home',
features: [
{
featureId: 2,
featureName: 'Orgonization',
subFeatures: [
{
featureId: 4,
featureName: 'Group Activity Solution',
subFeatures: [
{
featureId: 10,
featureName: 'Test',
subFeatures: [{
featureId: 8,
featureName: '8888888888',
subFeatures: []
}]
},
{
featureId: 11,
featureName: 'New',
subFeatures: []
},
]
},
{
featureId: 4,
featureName: 'Office of the CIO',
subFeatures: []
},
]
},
{
featureId: 3,
featureName: 'Planing',
subFeatures: [
{
featureId: 4,
featureName: 'Group Activity Solution',
subFeatures: []
},
{
featureId: 4,
featureName: 'Office of the CIO',
subFeatures: []
},
]
},
],
},
];
/**
* A function that returns an observable instance which contains the
* [child nodes](https://www.telerik.com/kendo-angular-ui/components/treeview/api/TreeViewComponent/#toc-children)
* for a given parent node.
*/
public children = (dataitem: any): Observable<any[]> =>
of(dataitem.features || dataitem.subFeatures);
/**
* A function that determines whether a given node
* [has children](https://www.telerik.com/kendo-angular-ui/components/treeview/api/TreeViewComponent/#toc-haschildren).
*/
public hasChildren = (dataitem: any): boolean =>
!!dataitem.features || !!dataitem.subFeatures;