TreeViewComponent's checkedKeys not updating when checking a collapsed parent with children.

[Francis]

 

I think I found an issue with some internals not refreshing properly in certain cases. Have a look at the attached GIF. The "Specify in which order the files are to be associated to target(s)" part at the bottom is tied to 

 checkedKeys.length > 0

When the condition is met, the part appears. It seems that when I click "Image Files", only this item is added to checkedKeys, not it's children, even though when I expand "Image Files", the children are indeed checked then the bottom part appears (The part on the bottom filters out parent items, such as "Image Files")




Is there any config that I'm missing ?

Here's the tree view related code

<kendo-treeview #assetTree *ngIf="treeDataLoaded" [nodes]="treeData"
                    textField="text"
                    (checkedChange)="checkedChange($event)"
                    [hasChildren]="hasChildren"
                    [children]="fetchChildren"
                    [(checkedKeys)]="checkedKeys"
                    checkBy="text"
                    kendoTreeViewCheckable
                    kendoTreeViewExpandable>

<p *ngIf="filterKeys().length > 0">Specify in which order the files are to be associated to target(s)</p>

  <div class="row" style="padding-left: 15px;">
    <div class="col-md6">
      <ul class="list-group" id="sortable">
        <li [attr.data-item]="asset" class="list-group-item" *ngFor="let asset of filterKeys()">{{asset.fileName}}</li>
      </ul>
    </div>
  </div>

public hasChildren = (item: TreeViewRootItem) => item.items && item.items.length > 0;
  public fetchChildren = (item: TreeViewRootItem) => of(item.items);
  public checkedKeys: any[] = new Array();
  public sortedKeys: any[];
  public get checkableSettings(): CheckableSettings {
    return {
      checkChildren: true,
      checkParents: true,
      mode: "multiple",
      checkOnClick: false
    };
  }

And this is the code that filters out parent items. When I check a collapsed node (Image Files) checkedKeys is only populated with "Image Files", and not it's children. When I expand "Image Files", then the console.log below outputs "Image Files" AND its children.

filterKeys(): Asset[] {

    console.log(this.checkedKeys);

    let results: Asset[] = new Array();

    this.checkedKeys.forEach(ck => {
      let exist = this.assets.find(a => a.fileName == ck);
      if (exist)
        results.push(exist);
    });

    return results;
  }

Thanks.

[Slavena]

Hello Francis,

Thank you for the provided details.

By default, the loadOnDemand property of the TreeView is set to true, which means that child node keys will be added to the checkedKeys collection only when their parent node is expanded (when they are loaded). By setting the property to false, all child nodes, regardless of their expanded state, will be added to the checkedKeys collection, as soon as their parent node is checked:

https://www.telerik.com/kendo-angular-ui-develop/components/treeview/checkboxes/#toc-preloaded-nodes

<kendo-treeview
     ...
    [loadOnDemand]="false">

Here is an example that demonstrates this approach:

https://stackblitz.com/edit/angular-pm1nt4?file=src%2Fapp%2Fapp.component.ts

I hope this helps. Let me know if I could be of further assistance regarding this case.

Regards,
Slavena
Progress Telerik