How to get checked values of TreeViewComponent with multi select check boxes.

0 Answers 40 Views
CheckBox MultiSelect TreeView
Nimni
Top achievements
Rank 1
Nimni asked on 17 Nov 2022, 02:37 PM

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;

No answers yet. Maybe you can help?

Tags
CheckBox MultiSelect TreeView
Asked by
Nimni
Top achievements
Rank 1
Share this question
or