Checkbox related doubt in treeview

Question

Hi,So currently in the treeview, the checkbox autocheck enables these functionalities If one of the child nodes is not in a checked state, then the parent node will be in an intermediate state.If all the child nodes are in checked state, then the parent node’s state will also be checked.If a parent node is checked, then all the child nodes’ state will also be checked.I want to know if there is a way to disable just "If all the child nodes are in checked state, then the parent node’s state will also be checked." when the autocheck is turned on. Thank you.

Indhumathy Loganathan · Answer

Hi Savinduj, 
 
We have validated your query in TreeView component. We understood that you want to prevent the checked state of parent node while selecting all the parent nodes when autoCheck is enabled. We achieved you requirement by performing customization in nodeChecked event. Check the below code snippet. 
 




   nodeChecked(args) { 
    if (args.action == 'check') { 
      var nodes: string[] = this.treeObj.checkedNodes; 
      if (args.data[0].parentID != null && args.data[0].hasChildren) { 
        if (!(this.arr as any).includes(args.data[0].id)) 
          this.arr.push(args.data[0].id); 
        let predicate = new Predicate('pid', 'equal', args.data[0].id, false); 
        let filteredList: any = new DataManager(this.countries).executeLocal( 
          new Query().where(predicate) 
        ); 
        for (var i = 0; i < filteredList.length; i++) { 
          if (!(this.arr as any).includes(filteredList[i].id)) 
            this.arr.push(filteredList[i].id); 
        } 
      } else { 
        if ( 
          args.data[0].parentID == null && 
          args.data[0].hasChildren && 
          !(this.arr as any).includes(args.data[0].id) 
        ) { 
          this.arr = []; 
          this.arr = nodes; 
        } else if (!(this.arr as any).includes(args.data[0].id)) 
          this.arr.push(args.data[0].id); 
      } 
      if (nodes.length > this.arr.length) { 
        for (var i = 0; i < nodes.length; i++) { 
          if (!(this.arr as any).includes(nodes[i])) { 
            var element = document.querySelector( 
              '[data-uid="' + nodes[i] + '"]' 
            ); 
            if (element != null) { 
              element 
                .getElementsByClassName('e-check')[0] 
                .classList.remove('e-check'); 
              nodes.splice(i, 1); 
              i--; 
            } 
          } 
        } 
      } 
    } else if (args.action == 'uncheck') { 
      this.arr = []; 
      var list = document.querySelectorAll('.e-check'); 
      for (var i = 0; i < list.length; i++) { 
        this.arr.push(list[i].closest('.e-list-item').getAttribute('data-uid')); 
      } 
    } 
  } 
 
You can find the sample from below link. 
 
https://stackblitz.com/edit/angular-tzmzbb?file=app.component.ts 
 
Please let us know if you need any further assistance. 
 
Regards, Indhumathy L