Kendo Ui for Angular: select tab programatically

3 posts, 0 answers
  1. Ján
    Ján avatar
    18 posts
    Member since:
    Jun 2017

    Posted 29 Aug Link to this post

    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

  2. Teresa
    Teresa avatar
    5 posts
    Member since:
    Aug 2012

    Posted 30 Aug in reply to Ján Link to this post

    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.

     

     

  3. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3724 posts

    Posted 31 Aug Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top