Tree View indeterminate problem

3 posts, 0 answers
  1. Bob
    Bob avatar
    30 posts
    Member since:
    Apr 2019

    Posted 22 Mar Link to this post

    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.

     

  2. Missing user
    Missing user avatar

    Posted 24 Mar Link to this post

    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.
  3. Bob
    Bob avatar
    30 posts
    Member since:
    Apr 2019

    Posted 24 Mar in reply to Missing user Link to this post

    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.

     

Back to Top