CODEWITHSUNDEEP
angularkendo-ui-angular2kendo-tabstrip
FabioG
FabioG

Reputation: 2986

Angular4 Kendo UI TabStrip - handle more tabs than page width supports

Is there any way to handle a situation where there are more tabs than the availe width can show?

I have a scenario where items selected from navigation are dynamicaly open in new tabs (or the active tab changes if it was already open). So happens that there's a big chance of more tabs than the width can show will be open at a given time. I can't seem to find anything on the documentation that allows me to handle this situation. I was looking for at least the possibility to use an appendTo or something o the likes where I could separate the container for the tabs headers and tabs contents so that i can do something like buttons to scroll the headers alone left or right.

this is great when there are few tabs: enter image description here

but if more of them are open the nav breaks and the container gets an horizontal scroller, as there's no more space available: enter image description here

my objective is to have something like this (with arrow buttons to navigate to hidden tabs): enter image description here

Edit Ok so I found this javascript kendo scrollable tabs. It's exactly what I had in mind, but I cant achieve this with angular kendo-ui

Upvotes: 0

Views: 2345

Answers (1)

maxs87
maxs87

Reputation: 2284

well there is no horizontal scroller out of the box, but the collection of tabs can be a variable. So in this case you can implement some simple paging. something like

import { Component } from '@angular/core';

@Component({
    selector: 'app-list',
    templateUrl: './list.component.html'
})
export class ListComponent {

    public allTabs = [ 
        { name: '1111', content: ' content 1 '},
        { name: '2222', content: ' content 2 '}
        { name: '3333', content: ' content 3 '}
        { name: '4444', content: ' content 4 '}
        { name: '5555', content: ' content 5 '}
    ];

    public totalPages = 0;

    public currentTabs = this.allTabs.slice(0, 2);

    public pageSize: number = 2;

    public currentPage = 1;

    public nextPage() {
        this.currentPage++;
        this.currentTabs = this.allTabs.slice((this.currentPage - 1) * this.pageSize, (this.currentPage) * this.pageSize);
    }

    public prevPage() {
        this.currentPage--;
        this.currentTabs = this.allTabs.slice((this.currentPage - 1) * this.pageSize, (this.currentPage) * this.pageSize);
    }

    constructor (){
        this.totalPages = Math.round(this.allTabs.length / this.pageSize);
    }
}

and the template 

<kendo-tabstrip [ngStyle]="{'width': '400px'}">
    <kendo-tabstrip-tab
      *ngFor="let item of currentTabs; let i=index"
      [title]="item.name"
      [selected]="i === 0"      
    >
        <ng-template kendoTabContent>
          {{  item.content }}
        </ng-template>
    </kendo-tabstrip-tab>
  </kendo-tabstrip>

  <button type="button" (click)="prevPage()" [disabled]="currentPage === 1">Prev</button>
  <button type="button" (click)="nextPage()" [disabled]="currentPage === totalPages">Next</button>

kinda fake scroll :)

Upvotes: 1

Related Questions