Tree View indeterminate problem

[Bob]

The Tree View component is incredibly frustrating to work with.

How do I establish an indeterminate check box?

Here is my TreeView and below is my isChecked method.

I have attached a snagit capture of the problem I'm having.

<kendo-treeview #actionPermissions
    [nodes]="treeNodes"
    kendoTreeViewCheckable
    [hasChildren]="hasChildren"
    textField="displayName"
    childrenField="children"
    [(checkedKeys)]="checkedKeys"
    [isChecked]="isChecked"
    kendoTreeViewHierarchyBinding
    kendoTreeViewExpandable
    [(expandedKeys)]="expandedKeys"
    (checkedChange)="handleChecking($event)">

public isChecked = (dataItem: NcActionDto): CheckedState => {

  let checkedNode = _.find(this.checkedKeys, m => m === dataItem.id);
  if (checkedNode) {
    if (dataItem.children.length > 0) {
      dataItem.children.forEach((item) => {
        if (!_.find(this.checkedKeys, m => m === item.id)) {
          return 'indeterminate';
        }
      });
    } else {
      return 'checked';
    }
  } else {
    return 'none';
  }
}

[Dimitar]

Hello Bob,

Thanks for the shared details, however, it's not really clear what you are trying to achieve. The TreeView check directive handles the checkedChange event and implements its own isChecked callback. So, I'm not sure where the problem is here. If you want to run your own logic on how to persist the keys, you shouldn't be using the directive, as unexpected behavior may be observed.

If you still want to use the directive to take advantage of the checkedChange handling, but still want to control whether an item is marked visually as checked or not, it's advisable not to alter the checkedKeys collection on your end, and just provide your own isChecked implementation.

From what I can see from the shared code snippet, you expect the items to be checked by an object property value, and not by item index (which is the default check directive behavior). In this case you should first provide to the directive what object key value it should track the checked status by. This is done via the checkBy property of the directive.Then, when a checkBy value is provided to the directive, it can no longer track the indeterminate state of parent items. If this is the problem you are facing than this example should be of help to you. Note, that I don't handle the checkedChange event manually - this is done by the directive. Also, a checkBy value is specified. I've just inserted my own isChecked function that asserts the checked state of each item.

If this is not the problem you are facing, I'd ask you to elaborate what exactly are you trying to achieve.

Let me know if further assistance is required.

Regards,
Dimitar
Progress Telerik

[Bob]

Hi Dimitar,

You are right in that what I am trying to achieve is not clear in the post.

I am going to make an exception to the rule and escalate this to a support issue with a full spec of what I'm trying to achieve.

It's a key component of my solution and I can't get to grips with Tree View, I use many other components with no problem but this one has me scratching my head.

Thanks for your help so far, you can close this issue.

 

[Sandeep]

I have kendo treview and using same approch whatever u mentioned above . i am using ischecked to handle indeterminate state but when data is more like 3lakhs node all together or someting , its giving big performance issue . My compleate application is getting hanged .

can u please provide some alternative to handle indeterminate state rather then this watcher ?

[Dimitar]

Hello Sandeep,

An option for you is to track the nodes' checked state via a property value. It can be update on every checkedChange emission. I've updated the example. Notice that the checked state is only determined when the checked keys collection changes. And then the status is tracked via a prop value:

public isChecked = (dataItem: any): CheckedState => dataItem.checkedState;

Let me know if you have further questions on the topic.

Regards,
Dimitar
Progress Telerik