Kendo Ui for Angular: select tab programatically

[Ján]

Hello,

we are using Kendo UI for Angular. We have a component that contains Kendo TabStrip and we need (based on some business logic) to select a specific tab. Currently the only way to do this is to introduce a @Viewchild(TabStripComponent) in our component and call its .selectTab(index) method to select a desired tab. There are however some issues with that solution:

First I tried to do call selectTab() in ngOnInit(), but that fails, because tabs are not ready yet (got an error from kendo tabstrip: Cannot read property 'toArray' of undefined).

Second I tried to do call selectTab() in ngAfterViewInit(), here the tab is correctly selected, but angular complains: Expression has changed after it was checked. Previous value: 'inactive'.

Isn't there a way to do this nicely? I imagine something like  [selectedTabIndex] property on Kendo's TabStripComponent, that we could set grammatically..

thx

Jan

[Teresa]

I don't work for Telerik but I think I have a solution that will work for you.  

in the HTML fro the tab(s), use  <kendo-tabstrip-tab *ngFor="let tab of tabs | tabRowFilter : 1 | orderBy : 'Index' let i=index"
[title]="tab.Title" [selected]="i == selectedTab">

in your component, declare selectedTab

public selectedTab: number = 0;

then when you change selectedTab in the component, it changes in the view.  

Hopefully that works for you.  Let me know if you need more details.

 

 

[Georgi Krustev]

Hello Ján,

The Teresa's solution is perfectly fine and will work for sure.

If you would like to use the selectTab method, then the earliest moment you can use it is in the ngAfterViewInit lifecycle hook. Any changes in this hook, however, should be done in a tick, e.g. resolved promise, setTimeout and etc. 

public ngAfterViewInit() {
    Promise.resolve(null).then(() => this.tabstrip.selectTab(2));
}

Here is a demo that demonstrates this approach:

http://plnkr.co/edit/xoEQX58azm0AMDke3lL8?p=preview

Regards,
Georgi Krustev
Progress Telerik