Unplanned
Last Updated: 08 May 2020 09:54 by ADMIN
Cassandra
Created on: 07 May 2020 10:19
Category: TabStrip
Type: Feature Request
1
Visible parameter
I would like to have a Visible parameter that would allow me to show/hide tabs and preserve their indexes.
2 comments
ADMIN
Marin Bratanov
Posted on: 08 May 2020 09:54

You may also want to Follow the dedicated wizard type component: https://feedback.telerik.com/blazor/1465245-step-by-step-wizard-component-which-has-forms-with-validation-on-every-page-and-only-allows-to-move-to-next-tab-if-validated

 

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
ADMIN
Svetoslav Dimitrov
Posted on: 07 May 2020 12:16

Hello,

As a workaround there are two approaches:

  • Use the Disabled parameter of the TabStripTab
    • This will preserve the indexes and they wont be in different order.
  • Create the tabs with a foreach loop and handle different scenarios in the ValueChanged of the checkboxes - create appropriate data sources for the foreach loop so you can use that data to extract the information for the current tab.
    • you could use a more complex model to describe the tabs, and you could also use the Disabled parameter of the tabs with it - and bind it to a field in the tab descriptor.

First approach:

 

<div>
    <TelerikCheckBox Id="ChildrenCheckbox" @bind-Value="@bShowChildren"></TelerikCheckBox>
    <label for="ChildrenCheckbox">Show children</label>
</div>

<div>
    <TelerikCheckBox Id="PetsCheckbox" @bind-Value="@bShowPets"></TelerikCheckBox>
    <label for="PetsCheckbox">Show pets</label>
</div>

<TelerikTabStrip TabPosition="Telerik.Blazor.TabPosition.Top"
                 @ref="@ProcessTabStrip"
                 ActiveTabIndex="@ActiveTabIndex"
                 ActiveTabIndexChanged="@ActiveTabChangedHandler">
    <TabStripTab Title="Client">
        <!-- Client Component-->
    </TabStripTab>
        <TabStripTab Title="Children" Disabled="@(!bShowChildren)">
            <!-- Children Component-->
        </TabStripTab>
        <TabStripTab Title="Pets" Disabled="@(!bShowPets)">
            <!-- Pet Component-->
        </TabStripTab>
    <TabStripTab Title="Locations">
        <!-- Locations Component-->
    </TabStripTab>
</TelerikTabStrip>

<h4>Active Tab Index: @ActiveTabIndex </h4>

@code {
    TelerikTabStrip ProcessTabStrip { get; set; }
    public int ActiveTabIndex { get; set; } = 1;

    public bool bShowChildren { get; set; }
    public bool bShowPets { get; set; }

    public void ActiveTabChangedHandler()
    {
        ActiveTabIndex = ProcessTabStrip.ActiveTabIndex;
    }
}

 

Second approach:

 

@page "/"

<div>
    <TelerikCheckBox Id="ChildrenCheckbox" Value="@bShowChildren" ValueChanged="@((bool value) => ValueChangedChildren(value))"></TelerikCheckBox>
    <label for="ChildrenCheckbox">Show children</label>
</div>

<div>
    <TelerikCheckBox Id="PetsCheckbox" Value="@bShowPets" ValueChanged="@((bool value) => ValueChangedPets(value))"></TelerikCheckBox>
    <label for="PetsCheckbox">Show pets</label>
</div>

<TelerikTabStrip ActiveTabIndex="@ActiveTabIndex" ActiveTabIndexChanged="@ActiveTabIndexChanged">
    @foreach (var tab in TabsList)
    {
        <TabStripTab Title="@tab">
            Content 1
        </TabStripTab>
    }
</TelerikTabStrip>

<h6>Active Tab index: @ActiveTabIndex </h6>
<h6>Active Tab title: @ActiveTabTitle </h6>

<p>@bShowChildren - children</p>
<p>@bShowPets - pets</p>

@code {
    public int ActiveTabIndex { get; set; } = 1;
    public string ActiveTabTitle => TabsList[ActiveTabIndex]; // the list of tabs is kept up to date by the app, so we can extract all its metadata from it by its index
    public List<string> TabsList { get; set; } = new List<string>() { "Clients", "Locations" };

    public bool bShowChildren { get; set; }
    public bool bShowPets { get; set; }

    public void ActiveTabIndexChanged(int newTab)
    {
        ActiveTabIndex = newTab;
    }

    public void ValueChangedChildren(bool value)
    {
        bShowChildren = value;
        
        if (value && bShowPets)
        {
            TabsList = new List<string>() { "Clients", "Children", "Pets", "Locations" };
        }
        else if (value)
        {
            TabsList = new List<string>() { "Clients", "Children", "Locations" };
        }
        else if (value == false && bShowPets)
        {
            TabsList = new List<string>() { "Clients", "Pets", "Locations" };
        }
        else
        {
            TabsList = new List<string>() { "Clients", "Locations" };
        }
    }

    public void ValueChangedPets(bool value)
    {
        bShowPets = value;
        
        if (value && bShowChildren)
        {
            TabsList = new List<string>() { "Clients", "Children", "Pets", "Locations" };
        }
        else if (value)
        {
            TabsList = new List<string>() { "Clients", "Pets", "Locations" };
        }
        else if (value == false && bShowChildren)
        {
            TabsList = new List<string>() { "Clients", "Children", "Locations" };
        }
        else
        {
            TabsList = new List<string>() { "Clients", "Locations" };
        }
    }
}

 

Regards,
Svetoslav Dimitrov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.