This is a migrated thread and some comments may be shown as answers.

is there a way to iterate through tabs

4 Answers 106 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Ed
Top achievements
Rank 1
Iron
Veteran
Iron
Ed asked on 16 Feb 2021, 02:16 PM

I am looking to set the background color on the active tab's title. But I need to reset every other one to it's original color first. 

Which, usually, requires a loop of some sort.

Any help would be great.

Thanks ... Ed

 

4 Answers, 1 is accepted

Sort by
0
Nadezhda Tacheva
Telerik team
answered on 16 Feb 2021, 05:39 PM

Hi Ed,

You can use the Class parameter of the TabStripTab to set your custom CSS class for the design of the non-active tabs (in case you want to change the default styling).

The active tab has .k-item, .k-state-active and .k-tab-on-top classes which you can access and modify to match the desired styling. To make sure you are styling just the certain instance of the TapStrip (and not all instances on the page/app, use the Class parameter of the TapStrip to set your custom CSS class for the component).

To better illustrate the described setup, I have created the following example:

 

<style>
    .my-tabstrip .non-active {
        background-color: red;
    }

    .my-tabstrip .k-item.k-state-active.k-tab-on-top {
        background-color: green;
    }
</style>

<TelerikTabStrip Class="my-tabstrip">
    @{
        foreach (MyTabModel item in tabs)
        {
            <TabStripTab Class="non-active" Title="@item.Title">
                Content for tab @item.Title
            </TabStripTab>
        }
    }
</TelerikTabStrip>


@code {
    List<MyTabModel> tabs = new List<MyTabModel>()
{
        new MyTabModel { Title = "One" },
        new MyTabModel { Title = "Two"},
        new MyTabModel { Title = "Three" }
    };

    public class MyTabModel
    {
        public string Title { get; set; }
        public int Index { get; set; }
    }
}

 

Regards,
Nadezhda Tacheva
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Ed
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 17 Feb 2021, 08:55 AM

Maybe I'm missing something, but when I tried your suggestion I got an error saying:

'Telerik.Blazor.Components.TelerikTabStrip' does not have a property matching the name 'Class'.

Thanks ... Ed

0
Nadezhda Tacheva
Telerik team
answered on 18 Feb 2021, 12:23 PM

Hi Ed,

The Class parameter of the TabStrip component is implemented as of version 2.21.0 of the Telerik UI for Blazor. I also tested with the current latest (2.21.1) to see if any issues appear. I can confirm that it works as expected (see project attached and try to run it locally to see if it works as expected for you, too).

My advice at this stage will be to check and make sure you are indeed using version 2.21.1.

If this is the the case but you are still getting the error, you can either send us a runnable example where the issue is reproduced or modify the one that I send to reproduce the problem, so we can investigate further and provide a solution.

Regards,
Nadezhda Tacheva
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Dean
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 25 Jan 2022, 02:22 PM

But is there a way to iterate through tabs?

Marin Bratanov
Telerik team
commented on 26 Jan 2022, 04:39 AM

The information from Nadezhda shows the core principle. This sample project offers more examples and details as well: https://github.com/telerik/blazor-ui/tree/master/tabstrip/DynamicTabs
Tags
TabStrip
Asked by
Ed
Top achievements
Rank 1
Iron
Veteran
Iron
Answers by
Nadezhda Tacheva
Telerik team
Ed
Top achievements
Rank 1
Iron
Veteran
Iron
Dean
Top achievements
Rank 1
Iron
Veteran
Iron
Share this question
or