Tab tied to button click

[Cameron]

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?

[Marin Bratanov]

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