Unplanned
Last Updated:
19 Feb 2021 06:46
by ADMIN
Pieter
Created on:
18 Feb 2021 11:10
Category:
TabStrip
Type:
Feature Request
KendoTab SelectEvent add id
Hi Kendo UI
We had to programmatically select the correct tab. We used the selectTab method of the TabStripComponent.
We found it quite hard to detect the correct index, because we had to dynamically hide (with ngIf) a tab.
Checking on the title of the SelectEvent is possible, but this title is sometimes translated, it is not that convenient.
My collegue prepared a stackblitz to illustrate the problem. https://stackblitz.com/edit/angular-kendo-tabstrip-ngif?file=app/app.component.ts
Our suggestion is to add an extra (optional) id to the SelectEvent.
And that id should be the id of the tab, if the id of the tab has been set.
<kendo-tabstrip (tabSelect)="onTabSelect($event)">
<kendo-tabstrip-tab [title]="'Paris'" [selected]="true" id="parisTab">
<ng-template kendoTabContent>
<p>
Paris
</p>
</ng-template>
</kendo-tabstrip-tab>
<kendo-tabstrip-tab [title]="'New York City'" *ngIf="isNyVisible" id="nyTab">
<ng-template kendoTabContent>
<p>
The City of New Yo
</p>
</ng-template>
</kendo-tabstrip-tab>
<kendo-tabstrip-tab [title]="'Antwerp'" id="antwerpTab">
<ng-template kendoTabContent>
<p>
Antwerp
</p>
</ng-template>
</kendo-tabstrip-tab>
</kendo-tabstrip>public onTabSelect(e: SelectEvent) {
console.log(e.index, e.title, e.id);
// Challenge: How to determine which tab is selected?
// e.index is not reliable if there is a ngIf on one of the Tabs
console.log('isNySelected', e.index === 1); // Wrong results if NY Tab has ngIf="false"
// Possible solution: Allow to provide an ID on the kendo-tabstrip-tab
console.log('isNySelected', e.id=== "nyTab"); // Always correct. Nice...
}Kind regards
Pieter
1 comment
ADMIN
Dimiter Topalov
Posted on:
19 Feb 2021 06:46