Cannot distinguish selected tab when loading remote content

4 posts, 0 answers
  1. Ron
    Ron avatar
    65 posts
    Member since:
    Oct 2010

    Posted 19 Jun Link to this post

    Hi,

    I have a tabstrip for which the content for all tabs are loaded remotely. The content for some of the tabs may take quite some time. Everything works fine from a technical point of view. The problem that I am having is that during the loading of a tab's content, the selected tab cannot be visually distinguished. When selecting the tab, all tabs visually look to be in "inactive" state. I can see the loading indicator, suggesting that content is still loading but I cannot visually determine which tab was selected. So the question is: is there a way to make the selected tab be visually distinquishable during content loading?

    I have tried adding the 'k-state-active' class to the selected tab in the "select" event but the manually added class seems to be removed instantly. Using one of the other events doesn't seem to be the solution either.

    Regards,
    Ron

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1268 posts

    Posted 20 Jun Link to this post

    Hi Ron,

    We add a k-state-active class to the selected tab, but, as you have noticed, this is done after the content is loaded and until then the tab is indistinguishable (apart from the loading bar on top of it) from the other tabs. You can workaround this by adding your own class to the tab in the TabStrip's select event, as demonstrated in this dojo example. The custom class in the example ("selectedTab") is used in a CSS rule which applies a different background color to make the selected tab look different than the others.

    Regards,
    Ivan Danchev
    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.
  3. Ron
    Ron avatar
    65 posts
    Member since:
    Oct 2010

    Posted 22 Jun in reply to Ivan Danchev Link to this post

    Hi Ivan,

    Thank you for your response. The proposed solution works for me. It's not ideal in my opinion but it works. Hopefully you can consider fixing this in a future kendo version.

    Regards,
    Ron

  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1268 posts

    Posted 26 Jun Link to this post

    Hi Ron,

    I discussed this behavior with the team and we agreed to log it as a bug. The selected tab appearing as selected when clicked is more intuitive, than applying the class and the related styles after the content is loaded. Here's the Github issue, through which you can track the bug's status.

    For your involvement in identifying this issue I updated your Telerik points.

    Regards,
    Ivan Danchev
    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