How to customize mat tree node SelectionModel for disable some checkbox where some other selected


I am use mat tree node for get some selection node from user like this:

export class SelectDataComponent implements OnInit {

    @Output() selectedList=new EventEmitter<any[]>();
    @Input() exportMode: boolean;
  private _transformer = (node: DeviceNode, level: number) => ({
    expandable: !!node.children && node.children.length > 0,
    id:node.id,
    name: node.name,
    level: level,
    });
   treeControl = new FlatTreeControl<ExampleFlatNode>(
    node => node.level, node => node.expandable);
   treeFlattener = new MatTreeFlattener(
    this._transformer, node => node.level, node => node.expandable, node => node.children);
   dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
   checklistSelection = new SelectionModel<ExampleFlatNode>(true /* multiple */);
    tree: any;

   constructor(private _propertyService: PropertyService) {
    }


   hasChild = (_: number, node: ExampleFlatNode) => node.expandable;
   ngOnInit() {
              this._propertyService.getTreeNodes().subscribe((respP)=>{
             this.tree=JSON.parse(respP.data);
            //this.tree =TREE_DATA;
            this.dataSource.data=this.tree;
        });



       };

       todoItemSelectionToggle(node: ExampleFlatNode): void {
        this.checklistSelection.toggle(node);
        const descendants = this.treeControl.getDescendants(node);

        this.checklistSelection.isSelected(node)
          ? this.checklistSelection.select(...descendants)
          : this.checklistSelection.deselect(...descendants);

        descendants.every(child =>
          this.checklistSelection.isSelected(child)
        );

      }
      todoLeafItemSelectionToggle(node: ExampleFlatNode): void {
        this.checklistSelection.toggle(node);

        const a=of(this.checklistSelection.selected);

      }
      public sendToDataList(){

        if (this.checklistSelection.selected.length===0) {
            console.log('error');
        }
        else
        {
        const b=this.selectedList.emit(this.checklistSelection.selected);
      
        }
    }
    public clearList()
    {
        this.checklistSelection.clear();
    }
    }

Now the question I have is how can I deactivate another node by selecting one node?
That is, if ‘A’ is selected, checkbox ‘B’ will be disabled

My goal is to impose data selection constraints that node ‘A’ and ‘B’ cannot be selected simultaneously.

Source: JavaSript – Stack Overflow

October 12, 2021
Category : News
Tags: angular | angular-material | javascript | treeview | typescript

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.