Tab tied to button click

2 posts, 1 answers
  1. Cameron
    Cameron avatar
    5 posts
    Member since:
    May 2019

    Posted 30 May 2019 Link to this post

    Hey guys I've been playing around with the components but am trying to do something like this and wonder if you have any ideas how to do it.

    I currently have a number of tab strips which I can navigate between. However I want to make it more like a step by step interface. I was hoping to start off with one tab enabled and the rest disabled. Only once the user clicks the button would the next strip become enabled.

    Is this something that is possible?



  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    5351 posts

    Posted 31 May 2019 Link to this post

    Hello Cameron,

    I would encourage you to post a feature request for a Wizard component in the feedback portal through the "Request a Feature" button. Just make sure to select the "make public" checkbox at the final step. This will let you explain your goals, requirements, even perhaps add a sample of what API and functionality you would expect it exposes. You can then Vote for it and Follow it to get updates on status changes. If it gets good traction with the community, we will consider its implementation.

    That said, here's an example I made for you based on the docs and the current features of the component:

    @using Telerik.Blazor.Components.TabStrip
    @using Telerik.Blazor.Components.Button
     
    <TelerikTabStrip ref="@myTabStrip">
        <TelerikTab Title="First">
            First tab content.
            <br />
            <TelerikButton OnClick="@SelectSecondTab">Select the second tab</TelerikButton>
        </TelerikTab>
        <TelerikTab Title="Second" ref="@secondTab" Disabled="@secondTabDisabled">
            Second tab content.
            <br />
            <TelerikButton OnClick="@SelectThirdTab">Select the third tab</TelerikButton>
        </TelerikTab>
        <TelerikTab Title="Third" ref="@thirdTab" Disabled="@thirdTabDisabled">
            Third tab content.
        </TelerikTab>
    </TelerikTabStrip>
     
    @functions {
        Telerik.Blazor.Components.TabStrip.TelerikTabStrip myTabStrip;
        Telerik.Blazor.Components.TabStrip.TelerikTab secondTab;
        Telerik.Blazor.Components.TabStrip.TelerikTab thirdTab;
        bool secondTabDisabled { get; set; } = true;
        bool thirdTabDisabled { get; set; } = true;
     
        void SelectSecondTab()
        {
            secondTabDisabled = false;
            thirdTabDisabled = true; //whether other/previous tabs need to be disabled here and in the next method depends on the project logic
            myTabStrip.SetActiveTab(secondTab);
        }
     
        void SelectThirdTab()
        {
            secondTabDisabled = true;
            thirdTabDisabled = false;
            myTabStrip.SetActiveTab(thirdTab);
        }
    }


    Regards,
    Marin Bratanov
    Progress Telerik UI for Blazor
Back to Top