This is a migrated thread and some comments may be shown as answers.

Tree View indeterminate problem

4 Answers 822 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Bob
Top achievements
Rank 2
Veteran
Iron
Bob asked on 22 Mar 2020, 11:26 PM

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';
  }
}

 

I have to say I am a member of many forums and this is without doubt the worst of all for posting information.  It's ancient and every difficult to work with.

 

4 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 24 Mar 2020, 03:06 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Bob
Top achievements
Rank 2
Veteran
Iron
answered on 24 Mar 2020, 03:48 PM

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.

 

0
Sandeep
Top achievements
Rank 1
answered on 01 Apr 2021, 07:22 AM

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 ?

0
Dimitar
Telerik team
answered on 05 Apr 2021, 07:45 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
TreeView
Asked by
Bob
Top achievements
Rank 2
Veteran
Iron
Answers by
Dimitar
Telerik team
Bob
Top achievements
Rank 2
Veteran
Iron
Sandeep
Top achievements
Rank 1
Share this question
or