Telerik Forums
Kendo UI for Angular Forum
1 answer
52 views

Hi all together,

I'm creating a TabStrip dynamically inside my component with *ngFor with a tabs array. But only some tabs are rendered inside my browser, even if there are more tabs inside my array. The other tabs will appear, if I just click into my browser page. Each click let appear another of the missing tabs, until all tabs are there.

I have a big application with many pages and content and I removed everything now except the tabstrip (even the tab content I removed) to find the problem. The simplified code is this (and here you also see the error):

This is my typescript code inside the component:

public tabs: Subject<Array<any>> = new Subject<Array<any>>();

public ngAfterViewInit(): void {

    let tabs: Array<any> = [];
    tabs.push({
      title: this.i18NextService.t("KONTAKTDATEN", { ns: "KontakteTexts" }) ?? "",
      titleId: "kontaktdaten",
    });
    tabs.push({
      title: this.i18NextService.t("MITARBEITER", { ns: "KontakteTexts" }) ?? "",
      titleId: "mitarbeiter",
    });
    tabs.push({
      title: this.i18NextService.t("PORTFOLIO", { ns: "KontakteTexts" }) ?? "",
      titleId: "portfolio",
    });
    tabs.push({
      title: this.i18NextService.t("STANDARDAUFTRAEGE", { ns: "KontakteTexts" }) ?? "",
      titleId: "standardauftraege",
    });
    tabs.push({
      title: this.i18NextService.t("INFRASTRUKTUR", { ns: "KontakteTexts" }) ?? "",
      titleId: "infrastruktur",
    });
    tabs.push({
      title: this.i18NextService.t("NOTES", { ns: "NewsTexts" }) ?? "",
      titleId: "notes",
    });
    tabs.push({
      title: this.i18NextService.t("EXTERNE_DOKUMENTE", { ns: "ExterneDokumenteTexts" }) ?? "",
      titleId: "dokumente",
    });

    this.tabs.next(tabs);
    this.changeDetection.detectChanges();
}

And here is the html:

To see, what is inside my tabs array, I've just added the first ngFor to write down the tab titles.

<div *ngFor="let tab of tabs | async">
      <div>{{ tab.title }}</div>
    </div>
    <div class="k-tabstrip-wrapper">
      <kendo-tabstrip>
        <kendo-tabstrip-tab *ngFor="let tab of tabs | async" cssClass="k-tab-on-top" [title]="tab.title">
          <ng-template kendoTabContent></ng-template>
        </kendo-tabstrip-tab>
      </kendo-tabstrip>
    </div>

When you run the application you see the following:

As you can see, the tabs array contains 7 entries, but Kendo only displays 2 tabs. They are there, but not displayed. It seems to be that Angulars Change Detection is not running or the interaction between Angular and Kendo is not correct. This is why I run the detectChanges. I've also tried it with and without a async tabs array, with ngZone and so on. But everytime it is the same result.

 

I also recognized, that some of my menu entries are not displayed (same here, after clicking inside the page they appear - it's another component), but only if this tabstrip is inside my page. So my main interest is to fix this tab issue...

 

Do you have any ideas what is going wrong here? Any ideas how to solve it? I cannot add the tabs in a static way to my html page, because the tabs array is not static, like here in the example...

 

Thanks for your ideas,

Regards,

Katharina

Katharina
Top achievements
Rank 1
Iron
 answered on 04 Feb 2025
0 answers
620 views

I recently upgraded my application angular version to 18.2.4 now I'm getting this error. I figured that probably Kendo control need to be upgraded as well so I updated the Keno UI version as well.

 

ERROR InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': 'aria-disabled]' is not a valid attribute name.
    at Ct.setAttribute (platform-browser.mjs:593:16)
    at na.setAttribute (browser.mjs:4603:23)
    at o1 (core.mjs:13032:18)
    at C_ (core.mjs:13022:5)
    at T2 (core.mjs:21174:9)
    at hostBindings (progress-kendo-angular-layout.mjs:96:100)
    at rD (core.mjs:12022:17)
    at W0 (core.mjs:13833:9)
    at Y0 (core.mjs:13999:9)
    at LE (core.mjs:13959:5)

 

    "@progress/kendo-angular-buttons": "^16.9.0",
    "@progress/kendo-angular-common": "^16.9.0",
    "@progress/kendo-angular-dateinputs": "^16.9.0",
    "@progress/kendo-angular-dialog": "^16.9.0",
    "@progress/kendo-angular-dropdowns": "^16.9.0",
    "@progress/kendo-angular-excel-export": "^16.9.0",
    "@progress/kendo-angular-grid": "^16.9.0",
    "@progress/kendo-angular-icons": "^16.9.0",
    "@progress/kendo-angular-indicators": "^16.9.0",
    "@progress/kendo-angular-inputs": "^16.9.0",
    "@progress/kendo-angular-intl": "^16.9.0",
    "@progress/kendo-angular-l10n": "^16.9.0",
    "@progress/kendo-angular-label": "^16.9.0",
    "@progress/kendo-angular-layout": "^16.9.0",
    "@progress/kendo-angular-menu": "^16.9.0",
    "@progress/kendo-angular-navigation": "^16.9.0",
    "@progress/kendo-angular-notification": "^16.9.0",
    "@progress/kendo-angular-pdf-export": "^16.9.0",
    "@progress/kendo-angular-popup": "^16.9.0",
    "@progress/kendo-angular-progressbar": "^16.9.0",
    "@progress/kendo-angular-tooltip": "^16.9.0",
    "@progress/kendo-angular-treeview": "^16.9.0",
    "@progress/kendo-angular-upload": "^16.9.0",
    "@progress/kendo-angular-utils": "^16.9.0",
    "@progress/kendo-data-query": "^1.7.0",
    "@progress/kendo-drawing": "^1.20.3",
    "@progress/kendo-licensing": "^1.3.5",
    "@progress/kendo-svg-icons": "^3.1.0",
    "@progress/kendo-theme-default": "^9.0.0"

 

 

I checked earlier post

https://feedback.telerik.com/kendo-angular-ui/1645525-tabstripcomponent-throws-errors-after-updating-to-angular-17-3-0?_gl=1*f8131b*_gcl_au*MjA3Mjg3MTg2My4xNzI2NTY3NTYy*_ga*MzQ5NDk5NTAwLjE3MjY1Njc1NjI.*_ga_9JSNBCSF54*MTcyNjU2NzU2MS4xLjAuMTcyNjU2NzU2MS42MC4wLjA.

 

Yogesh
Top achievements
Rank 1
 asked on 18 Sep 2024
0 answers
55 views
I have several panelbars with tabstrips nested inside them, and nested inside other content on the left side of a page.   When I scroll down the page until a set of tabs are near the top, and select a tab, that whole side of the page scrolls back upwards so that the tabs are around the middle to bottom of the screen.  Is there some setting I'm missing to prevent scrolling on tab selection?
Software
Top achievements
Rank 1
Iron
 asked on 06 Sep 2024
0 answers
148 views

I am using <kendo-tabstrip> and i have 10 tabs <kendo-tabstrip-tab> that should be loaded all of them when I enter the page. If i have only 3-5 tabs are loaded okay, but with 10, it loads only 5 and does not display the content of them at all and when i click on them it displays for each click the remaing tab and after 5 clicks I have all of the tabs with content loaded. I tried everything, ChanceDectorRef, but it still does not work. 

I let the code bellow:

<kendo-tabstrip #tabstrip class="tabs-outside-section" (tabSelect)="onTabSelect($event)">
  <kendo-tabstrip-tab
    *ngFor="let tab of tabs; let i = index"
    [title]="tab.title | translate"
    [selected]="selectedIndex === i">
    <ng-template kendoTabContent>
      <ng-container *ngComponentOutlet="tab.component"></ng-container>
    </ng-template>
  </kendo-tabstrip-tab>
</kendo-tabstrip>

  tabs = [
    { title: this.resourceCodes.common.generalDetails, component: Tab1Component },
    { title: this.resourceCodes.booking.common.reservations, component: Tab2Component },
    { title: this.resourceCodes.menu.vouchers, component: Tab3Component },
    { title: this.resourceCodes.menu.campaigns, component: Tab4Component },
    { title: this.resourceCodes.menu.messages, component: Tab5Component },
    { title: this.resourceCodes.menu.interactions, component: Tab6Component },
    { title: this.resourceCodes.document.documents, component: Tab7Component },
    { title: this.resourceCodes.menu.offers, component: Tab8Component },
    { title: this.resourceCodes.menu.surveys, component: Tab9Component },
    { title: this.resourceCodes.menu.reviews, component: Tab10Component },
  ];

  constructor(
    private router: Router,
    userService: UserService,
    private route: ActivatedRoute,
    private cdr: ChangeDetectorRef
  ) {
    this.authUserModel = userService.authUser;
    this.currentUrl = this.router.url;
    this.checkAndSetSelectedIndex(this.currentUrl);
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        if (this.currentUrl === event.urlAfterRedirects) {
          // URL has not changed, read from localStorage
          const savedIndex = localStorage.getItem('selectedCustomerTabIndex');
          if (savedIndex !== null) {
            this.selectedIndex = parseInt(savedIndex, 10);
          }
        } else {
          this.selectedIndex = 0;
          localStorage.removeItem('selectedCustomerTabIndex');
        }
        this.currentUrl = event.urlAfterRedirects;
      }
    });
  }
  ngOnInit() {
    this.route.params.subscribe(params => {
      this.customerId = +params['id'];
      this.cdr.detectChanges(); // Manually trigger change detection
    });
    setTimeout(() => {
      this.cdr.detectChanges();
    }, 20);
  }

 

Thank you!

Andreea
Top achievements
Rank 1
Iron
 asked on 05 Aug 2024
0 answers
115 views

How can scroll to active tab position dynamically, it becomes the first tab display of selected active tab from backend then it should be display in first position.

 

Example: if i have dates tabStrip then current date tab should be display in first position.

Sandip
Top achievements
Rank 1
 updated question on 06 May 2024
1 answer
366 views
VM4083:1 ERROR DOMException: Failed to execute 'setAttribute' on 'Element': 'aria-disabled]' is not a valid attribute name.
    at NoneEncapsulationDomRenderer.setAttribute     , i have this  error when i try to open   tabstrip component whit dialog     on angular 17.3.0
<kendo-tabstrip>
  <kendo-tabstrip-tab title="Tab 1">
    <ng-template kendoTabContent>
      <p>Tab 1 Content</p>
    </ng-template>
  </kendo-tabstrip-tab>
  <kendo-tabstrip-tab title="Tab 2" [selected]="true">
    <ng-template kendoTabContent>
      <p>Tab 2 Content</p>
    </ng-template>
  </kendo-tabstrip-tab>
  <kendo-tabstrip-tab title="Tab 3">
    <ng-template kendoTabContent>
      <p>Tab 3 Content</p>
    </ng-template>
  </kendo-tabstrip-tab>
</kendo-tabstrip>
Yanmario
Telerik team
 answered on 21 Mar 2024
1 answer
477 views

Here is the my requirement:

If I scroll then I want to fixed my tabs so user can know easily.

I tried multiple way to add position:fixed but not working.

 

Hetali
Telerik team
 updated answer on 25 Oct 2023
0 answers
286 views

I'm now finding a way to customize the appearance of TabStrip in our app.

As defined in Kendo default theme, the TabStrip was defined with a border roundness by default and this behavior affects both the border of the tabstrip and closable buttons. I concerned if there's a way to configure the TabStrip roundness which works as button's roundness: https://www.telerik.com/kendo-angular-ui/components/buttons/button/appearance/#toc-roundness

Thanks in advance.

 

Nhat
Top achievements
Rank 1
 updated question on 04 Oct 2023
0 answers
120 views

I am using the kendo tabstrip with several tab items. But it is not possible to use touch and drag to scroll vertically on mobile devices ?
There is only an option for mouse scroll, which does not work smoothly in general. 
I have tested the examples here https://www.telerik.com/kendo-angular-ui/components/layout/tabstrip/scrollable/ and when I try to use the mouse scroll it is not working perfectly. 

Jennifer
Top achievements
Rank 1
 asked on 14 Sep 2023
1 answer
264 views

Adding different way but not able to see in browser.

Let me know If I miss anything. 

 

Martin Bechev
Telerik team
 answered on 07 Aug 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?