Limit Selection in ngx-treeview

1.4k Views Asked by At

I have worked on advanced treeview:

After some changes I tried to limit selection number. However, I have faced couple of problems. I can limit my selection but I cannot remove check in checkbox when limit is exceed.

Here is my work:

<div class="container-fluid d-flex flex-column">
    <ng-template #itemTemplate let-item="item" let-onCollapseExpand="onCollapseExpand"
        let-onCheckedChange="onCheckedChange">
        <div class="form-inline row-item">
            <i *ngIf="item.children" (click)="onCollapseExpand()" aria-hidden="true" class="fa"
                [class.fa-caret-right]="item.collapsed" [class.fa-caret-down]="!item.collapsed"></i>
            <div class="form-check">
                <input type="checkbox" class="form-check-input" [(ngModel)]="item.checked"
                    (ngModelChange)="onCheckedChange();" [disabled]="item.disabled"
                    [indeterminate]="item.indeterminate" />
                <label class="form-check-label" (click)="onCheckedChange();selectItem(item)">
                    {{item.text}} {{item.checked}}
                </label>
            </div>
        </div>
    </ng-template>
    <div class="row d-flex flex-grow-1 of-auto">
        <div class="col-3 d-flex flex-column">
            <div class="form-group">
                <ngx-treeview [config]="config" [items]="items" [itemTemplate]="itemTemplate"
                    (selectedChange)="onSelectedChange($event)">
                </ngx-treeview>
            </div>
        </div>
    </div>
</div>

and here is component parts:

onSelectedChange(downlineItems: DownlineTreeviewItem[]) {
    this.selectedItems = [];
    downlineItems.forEach(downlineItem => {
      const item = downlineItem.item;
      this.selectedItems.push(item.value);
      this.selectItem(item);
    });
}

selectItem(item) {
    if (this.selectedItems.length > 2) {
      this.selectedItems.pop();
      item.checked = false;
    }
}

I checked true/false value in html part and it works fine. Still checkbox is checked. I also need some help in parent selection. When selection limit is exceed, parent selection becomes true until one of children of that parent is selected.

Do you have any solutions about that problem?

0

There are 0 best solutions below