Angular Kendo Tabstrip Selecting Tab After its added

97 Views Asked by At

Having a problem to select a tab programmatically after creating it. It might be because of the timing, maybe it doesn't exist yet when i use the selectTab functionality. It might be because of where i have the add functionality. But i've tried a million things and i'm clueless. To be clear, in the end the tab is added correctly, but its not selected.

In my html file i have this:

<ng-template #periodTabPopupTemplate>
<div class="wrapper">
    <kendo-tabstrip #tabstrip (tabClose)="onClose($event)">
        <kendo-tabstrip-tab> ... </kendo-tabstrip-tab>
        <kendo-tabstrip-tab> ... </kendo-tabstrip-tab>
        <kendo-tabstrip-tab *ngFor="let period of alternatePeriods" [closable]="true"> ... </kendo-tabstrip-tab>
        <kendo-tabstrip-tab *ngIf="alternatePeriods.length < 4">
            <ng-template kendoTabTitle>
                <span class="k-icon k-i-plus" (click)="addNewAlternatePeriod()"></span>
            </ng-template>
        </kendo-tabstrip-tab>
    </kendo-tabstrip>
</div>

In my backend ts file i have this:

@ViewChild('tabstrip') public tabstrip: TabStripComponent;

public addNewAlternatePeriod() {
    let newPeriod = clone(this.newAlternatePeriod);
    if (this.alternatePeriods?.length > 0)
    {
        newPeriod.Name = (this.alternatePeriods.length + 1).toString();
        this.alternatePeriods.push(newPeriod);
    } 
    else {
        newPeriod.Name = "1";
        this.alternatePeriods = [newPeriod]
    }

    // //testing
    // this.tabstrip.selectTab(1);

    this.cdr.detectChanges();
    this.tabstrip.selectTab(this.alternatePeriods.length + 3 - 1);
}

This al works up to a certain point, adding an new period to my alternateperiods adds it to the tabstrip automatically, but i'm trying to select it after it was added but thats not working. The plus tab which i clicked to add one, is still selected. Also, when i'm debugging at the point where i try to select the tab i think its not existing yet even though i'm using the changedetectorref to update ui.

I've also tested out doing a this.tabstrip.selectTab(1), to just select another one and it still stays on the plus tab.

0

There are 0 best solutions below