I recently received an email from one of our users stating that the scroll buttons on the tabstrip have stopped working. I have just upgraded to Angular 17 and latest of progress controls so not sure if that is what did it but these buttons have been working since implementation.  I am puzzled as to what is now missing and or caused the buttons to stop working. They do display correctly when the screen size changes and not all tabs are on the screen. However, when you click either forward or back, nothing happens.

I anticipate that I will be asked to create a reproduction of this and send it to kendo, but was hoping that someone could take a look at our application to see if something is missing or if it can be determined what is causing the issue? This is a huge application and depends on data to run so it would take quite some time to get it down to something I can send as a repro.  See page  https://test.tropicos.org/name/25509881.

What makes it worse is that we also have another application that was spawned from the shell the Tropicos app and for the most part uses the same packages. This application also gets updated at the same time as Tropicos as well.  This application however is not seeing the same problems with tab strip buttons. See https://test.livingcollections.org/taxon/277173. 

If I must spend the time to strip the application down to a page that causes the issue, I can. But, again, this would take quite a bit of time and we are a small development shop so hoping looking at the apps I posted will help to find the issue.

The "auto" scrolling mode of the TabStrip works fine when we resize the container or the window - i.e. the scroll buttons appear if the tabs do not fit ij the container. However, they do not appear if we add tabs dynamically and this is a bug. If we add tabs dynamically, then once the tabs dont fit in the container, the scroll biuttons should appear. Below is the example in stackblitz:

https://stackblitz.com/edit/angular-p5jc7v?file=src%2Fapp%2Ftab_content.ts,src%2Fapp%2Fapp.component.ts

After updating to Angular version 17.3.0 the TabStripComponen throws errors:

• Error: Failed to execute 'setAttribute' on 'Element': 'aria-disabled]' is not a valid attribute name.
• Error: Cannot read properties of undefined (reading 'filter')

The problem can be reproduced using this StackBlitz sample: https://angular-baaosj.stackblitz.io

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.

Like the SAPUI5 object page control, it is a tabstrip with horizontal orientation of the tab headers but vertical allignment of all tab sections within the tab content container. If the user clicks on one tab header, the tab content container will be scrolled down to the tab section linked to the tab header.

 A preview is given in the link below. 

ObjectPage

Yours

Stephan 

Make the TabStrip component scrollable, like the counterpart (http://demos.telerik.com/kendo-ui/tabstrip/scrollable-tabs) in Kendo UI for JQuery is.

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

It seems to be impossibly hard to make it so that when a TabStrip is in a container that the content area is able to fill the remaining space rather than fitting to the content.  

I have seen that there are work arounds for what appears to be the same issue for the jQuery KendoUI library but it looks like a hack rather than a true solution.  (One shouldn't have to go to the code behind to make this happen).

A simple "fillRemainingSpace" (or similar) would be perfect and have the TabStrip handle the rest.

I expect this is pretty common scenario for anyone making application like UI websites.

I need some extra view of Tabstripe title like icon title and close button so can we add html title so good design of tabstripe title

Implement OnChange Events for tabs.

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

When the tabstrip have multiple tab within a limited width, the tabs are rendering outside the limit of the tab.

The component behavior should (perhaps by options configuration):

• Scroll to show all tabs
• Hide the non-visible tab and render a drop down to select additional tabs
• Render the tab on a second line

This can be reproduced using the StackBlitz of the tabstrip.

Thank you.

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

As you can see from the image below the tab strip tabs can keep getting added and they do not care where the parent DIV or any other container ends. It would be appropriate for them to allow for scrolling if it goes outside the width of its container.

This is the way it is handled in jQuery

https://demos.telerik.com/kendo-ui/tabstrip/scrollable-tabs

Vertical or Horizontal orientation of tab strips.

Default to horizontal.