Kendo TabStrip - scroll or Multirow

[Patrick]

How to achieve the same funtionality in Angular 5?

https://demos.telerik.com/aspnet-ajax/tabstrip/examples/functionality/scrolling-and-multi-row-tabs/defaultcs.aspx

[Dimiter Topalov]

Hi Patrick,

You can achieve wrapping of the Tabstrip tab titles by overwriting our built-in styling as follows:

>>> .k-tabstrip .k-tabstrip-items {
          display: block;
        }

        >>> .k-tabstrip-items .k-item {
          display: inline-block;
        }

https://plnkr.co/edit/pcfWKIt2kFlgUQ9JyCcm?p=preview

As for scrolling the tab list, such a functionality is unfortunately currently not available in the Kendo UI for TabStrip component. If you have the time, please support the following feature request in our UserVoice portal:

http://kendoui-feedback.telerik.com/forums/555517-kendo-ui-for-angular-feedback/suggestions/33629752-scrolling-tabstrip

It helps us estimate the customer demand for certain features and enhancements, and prioritize accordingly when updating our roadmap. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

[Paul]

After upgrading to 6.0 and Angular 12, this workaround no longer works. I assume it has to do with the addition of the scrolling feature?

[Dimiter Topalov]

Hello Paul,

The mentioned workaround no longer works due to the updated TabStrip rendering - there is an additional ".k-tabstrip-items-wrapper" now between the TabStrip wrapper element and the UL element holding the tabs. This element needs its CSS display property to be set to "block" too for the workaround to work with the latest component rendering:

encapsulation: ViewEncapsulation.None,
    styles: [`
        kendo-tabstrip p {
            margin: 0;
            padding: 8px;
        }
        
        .k-tabstrip .k-tabstrip-items-wrapper,
        .k-tabstrip .k-tabstrip-items {
          display: block;
        }
        
        .k-tabstrip-items .k-item {
          display: inline-block;
        }
    `]

https://stackblitz.com/edit/angular-4rd482?file=app/app.component.ts

I hope this helps.

[Patrick]

Thanks!

 

 

Bryian Tan.

[Patrick]

Thanks!!!

 

Bryian Tan

[Roby]

How is this done in Kendo UI React?

[Dimiter Topalov]

Hi Roby,

Please open a separate support thread, as this question is related to a different product/suite, and you will receive the most comprehensive answer from the respective team, responsible for developing and supporting the Kendo UI for React suite. Please choose the Kendo React product when creating the thread.

Meanwhile I can also suggest obtaining the source code of the React TabStrip, and checking out the exact implementation, as described in this section of their documentation:

https://www.telerik.com/kendo-react-ui/components/installation/source-code

Regards,
Dimiter Topalov
Progress Telerik