{"_id":"59a9e41bb925cb000f923e6e","category":{"_id":"59a9e41bb925cb000f923e5f","version":"59a9e41ab925cb000f923e5c","project":"5707c6875309d117006948d4","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-04-08T14:56:07.661Z","from_sync":false,"order":2,"slug":"documentation","title":"Guides"},"project":"5707c6875309d117006948d4","user":"54d742a80771980d0052f4b5","parentDoc":null,"version":{"_id":"59a9e41ab925cb000f923e5c","project":"5707c6875309d117006948d4","__v":1,"createdAt":"2017-09-01T22:50:02.967Z","releaseDate":"2017-09-01T22:50:02.967Z","categories":["59a9e41bb925cb000f923e5d","59a9e41bb925cb000f923e5e","59a9e41bb925cb000f923e5f","59a9e41bb925cb000f923e60"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"5.0.0","version":"5.0.0"},"__v":0,"updates":["591186122da2211b00d2dd4d"],"next":{"pages":[],"description":""},"createdAt":"2017-02-27T07:30:33.037Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":16,"body":"Tri-State checkboxes are not supported as a built-in feature - they can be implemented using custom templates.\n\nCredit to **Debajyoti Maity** for building this and sharing with the community\n\nHere is sample code that introduces Tri-State Checkboxes:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"import { ITreeOptions, IActionMapping } from 'angular-tree-component';\\nimport { Component } from ':::at:::angular/core';\\n\\n@Component({\\n  selector: 'app-checkboxes',\\n  template: `\\n    <h3>tri-state checkboxes</h3>\\n    <tree-root\\n      #tree\\n      [nodes]=\\\"nodes\\\"\\n      [options]=\\\"options\\\">\\n\\n      <ng-template #treeNodeTemplate let-node=\\\"node\\\" let-index=\\\"index\\\" >\\n        <input\\n          (change)=\\\"check(node, !node.data.checked)\\\"\\n          type=\\\"checkbox\\\"\\n          [indeterminate]=\\\"node.data.indeterminate\\\"\\n          [checked]=\\\"node.data.checked\\\">\\n\\n          {{ node.data.name }}\\n      </ng-template>\\n    </tree-root>\\n  `,\\n  styles: []\\n})\\nexport class CheckboxesComponent {\\n  nodes = [\\n    {\\n      name: 'root1',\\n      checked: true,\\n    },\\n    {\\n      name: 'root2',\\n      checked: false,\\n      children: [\\n        { name: 'child1', checked: false },\\n        { name: 'child2', checked: false, children: [\\n          { name: 'grandchild1', checked: false },\\n          { name: 'grandchild2', checked: false }\\n        ] }\\n      ]\\n    }\\n  ];\\n\\n  actionMapping: IActionMapping = {\\n    mouse: {\\n      click: (tree, node) => this.check(node, !node.data.checked)\\n    }\\n  };\\n\\n  options: ITreeOptions = {\\n    actionMapping: this.actionMapping\\n  };\\n\\n  public check(node, checked) {\\n    this.updateChildNodeCheckbox(node, checked);\\n    this.updateParentNodeCheckbox(node.realParent);\\n  }\\n  public updateChildNodeCheckbox(node, checked) {\\n    node.data.checked = checked;\\n    if (node.children) {\\n      node.children.forEach((child) => this.updateChildNodeCheckbox(child, checked));\\n    }\\n  }\\n  public updateParentNodeCheckbox(node) {\\n    if (!node) {\\n      return;\\n    }\\n\\n    let allChildrenChecked = true;\\n    let noChildChecked = true;\\n\\n    for (const child of node.children) {\\n      if (!child.data.checked || child.data.indeterminate) {\\n        allChildrenChecked = false;\\n      }\\n      if (child.data.checked) {\\n        noChildChecked = false;\\n      }\\n    }\\n\\n    if (allChildrenChecked) {\\n      node.data.checked = true;\\n      node.data.indeterminate = false;\\n    } else if (noChildChecked) {\\n      node.data.checked = false;\\n      node.data.indeterminate = false;\\n    } else {\\n      node.data.checked = true;\\n      node.data.indeterminate = true;\\n    }\\n    this.updateParentNodeCheckbox(node.parent);\\n  }\\n}\\n\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"tri-state-checkboxes","type":"basic","title":"Tri-State Checkboxes"}

Tri-State Checkboxes


Tri-State checkboxes are not supported as a built-in feature - they can be implemented using custom templates. Credit to **Debajyoti Maity** for building this and sharing with the community Here is sample code that introduces Tri-State Checkboxes: [block:code] { "codes": [ { "code": "import { ITreeOptions, IActionMapping } from 'angular-tree-component';\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'app-checkboxes',\n template: `\n <h3>tri-state checkboxes</h3>\n <tree-root\n #tree\n [nodes]=\"nodes\"\n [options]=\"options\">\n\n <ng-template #treeNodeTemplate let-node=\"node\" let-index=\"index\" >\n <input\n (change)=\"check(node, !node.data.checked)\"\n type=\"checkbox\"\n [indeterminate]=\"node.data.indeterminate\"\n [checked]=\"node.data.checked\">\n\n {{ node.data.name }}\n </ng-template>\n </tree-root>\n `,\n styles: []\n})\nexport class CheckboxesComponent {\n nodes = [\n {\n name: 'root1',\n checked: true,\n },\n {\n name: 'root2',\n checked: false,\n children: [\n { name: 'child1', checked: false },\n { name: 'child2', checked: false, children: [\n { name: 'grandchild1', checked: false },\n { name: 'grandchild2', checked: false }\n ] }\n ]\n }\n ];\n\n actionMapping: IActionMapping = {\n mouse: {\n click: (tree, node) => this.check(node, !node.data.checked)\n }\n };\n\n options: ITreeOptions = {\n actionMapping: this.actionMapping\n };\n\n public check(node, checked) {\n this.updateChildNodeCheckbox(node, checked);\n this.updateParentNodeCheckbox(node.realParent);\n }\n public updateChildNodeCheckbox(node, checked) {\n node.data.checked = checked;\n if (node.children) {\n node.children.forEach((child) => this.updateChildNodeCheckbox(child, checked));\n }\n }\n public updateParentNodeCheckbox(node) {\n if (!node) {\n return;\n }\n\n let allChildrenChecked = true;\n let noChildChecked = true;\n\n for (const child of node.children) {\n if (!child.data.checked || child.data.indeterminate) {\n allChildrenChecked = false;\n }\n if (child.data.checked) {\n noChildChecked = false;\n }\n }\n\n if (allChildrenChecked) {\n node.data.checked = true;\n node.data.indeterminate = false;\n } else if (noChildChecked) {\n node.data.checked = false;\n node.data.indeterminate = false;\n } else {\n node.data.checked = true;\n node.data.indeterminate = true;\n }\n this.updateParentNodeCheckbox(node.parent);\n }\n}\n", "language": "javascript" } ] } [/block]