Unplanned
Last Updated: 19 Feb 2021 06:46 by ADMIN
Pieter
Created on: 18 Feb 2021 11:10
Category: TabStrip
Type: Feature Request
6
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

Hi Pieter,

Thank you for the suggestion and detailed explanation. I converted this feature request to a public one, visible on our Feedback portal so that other members of the community can support it and add further comments.

We will track the demand for this enhancement here, and will consider adding it to our roadmap, based on the interest and estimated business value.

Regards,
Dimiter Topalov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.