We would like to add certain quick access buttons on the same level as the kendo-tabstrip. Since the kendo-tabstrip needs to take as much space as possible for its content to be displayed fully, we currently have to use ugly workarounds like placing them absolute into free areas and creating those areas by setting margins for our tab-header.

Therefore we would like to have templates allows content to be displayed before or after the kendo-tabstrip horizontally and on the same level as the tab-header

Would be very useful to have the ability of dropdowns integrated into the tapstrip component.

Reorder tabs with drag and drop like so: http://demos.telerik.com/kendo-ui/sortable/integration-tabstrip

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

As the panel bar seems to support it it would be appreciable to have support for routes in the tabstrip component.