Unplanned
Last Updated: 24 Jul 2020 11:39 by Giuseppe
Created by: Eugenie
Comments: 4
Category: TabStrip
Type: Feature Request
12

I want to style my tab headers with something similar to this, but it does not compile:

 

 <h2>Telerik Tab Strip</h2>
    <TelerikTabStrip TabPosition="Telerik.Blazor.TabPosition.Top">
        <TabStripTab Class="WeirdTab" Title="First">
            First tab content.
        </TabStripTab>
        <TabStripTab Title="Second">
            Second tab content.
        </TabStripTab>
        <TabStripTab Title="Third">
            Third tab content.
        </TabStripTab>
    </TelerikTabStrip>
    <style>
        .WeirdTab {
            color: red;
        }
    </style>

 

While I can style the content of the tabs in the tabs themlselves (see below) I'd like to be able to style the headers too

<h2>Telerik Tab Strip</h2>
<TelerikTabStrip TabPosition="Telerik.Blazor.TabPosition.Top">
    <TabStripTab Title="First">
        <div class="WeirdTab">
            First tab content.
        </div>
    </TabStripTab>
    <TabStripTab Title="Second">
        Second tab content.
    </TabStripTab>
    <TabStripTab Title="Third">
        Third tab content.
    </TabStripTab>
</TelerikTabStrip>
<style>
    .WeirdTab {
        color: red;
    }
</style>

Unplanned
Last Updated: 08 May 2020 09:55 by ADMIN
Something like this https://demos.telerik.com/aspnet-ajax/wizard/overview/defaultcs.aspx
Unplanned
Last Updated: 08 May 2020 09:54 by ADMIN
Created by: Cassandra
Comments: 2
Category: TabStrip
Type: Feature Request
1
I would like to have a Visible parameter that would allow me to show/hide tabs and preserve their indexes.
Unplanned
Last Updated: 01 May 2020 14:15 by ADMIN
Created by: nonick
Comments: 1
Category: TabStrip
Type: Feature Request
24
I would like there to be a template for tab strip label so that i could put anything i want in there rather than just text.
Duplicated
Last Updated: 21 Apr 2020 14:29 by ADMIN
Created by: Rob
Comments: 1
Category: TabStrip
Type: Feature Request
0

Support for adding Unicode characters (such as a warning sign, &#9888;) to the Title of tab strips.

 

Our scenario is we require specific setup to be done on each tab strip. We would like to ability to add an indicator next to the title of the tab to denote that setup is required.

Unplanned
Last Updated: 06 Mar 2020 10:08 by ADMIN
Created by: Uluç
Comments: 1
Category: TabStrip
Type: Feature Request
6
At the moment, if I have many tabs, their titles go off the screen (or the container of the tab strip). I want that they don't stretch my layout, or they don't become invisible.
Duplicated
Last Updated: 02 Mar 2020 13:28 by ADMIN
Created by: Robert
Comments: 4
Category: TabStrip
Type: Feature Request
1
There is no keepTabContent property for TabStrip. When setting that property to true in angular component, the component renders all tabs and they are persisted in the DOM.
I would like the same behavior for Blazor component.
Completed
Last Updated: 25 Jan 2020 09:42 by ADMIN
Release 2.4.0
Created by: Robert
Comments: 1
Category: TabStrip
Type: Feature Request
2

The ActiveTabIndex parameter can take a value -1 to denote that no tab should be selected. This can plug into the current two-way binding as well.

Unplanned
Last Updated: 15 Jan 2020 10:01 by ADMIN
Created by: Roy
Comments: 3
Category: TabStrip
Type: Feature Request
8

At the moment, when tabs hide their components are removed, so when you go back to a tab, it initializes again  - for example, the OnInitializedAsync event fires where you fetch data, so you have to fetch the data again.

This behavior should be controlled through a property so one can keep the original behavior where the components are cleared from the DOM and memory.

Perhaps an option can be added where tabs are initialized not on initial load, but upon first activation only. Maybe the feature can become something like an enum - LoadMode="InitialRender|FirstRender|EveryRender" (working title off the top of my head).

At the moment, a solution you can use is to send the data to the tab from its contents through an event, and to pass it to them as a Parameter so you can check for it before fetching data.

Completed
Last Updated: 06 Dec 2019 13:11 by ADMIN
Release 2.6.0

<TelerikTabStrip TabPosition="TabPosition.Top">
    <TabStripTab Title="Sofia">

    </TabStripTab>
    <TabStripTab Title="London">

    </TabStripTab>
    <TabStripTab Title="Paris">
        <TelerikTabStrip TabPosition="TabPosition.Left">
            @foreach (var item in new string[] { "one", "two", "three" })
            {
                <TabStripTab Title="@item">x</TabStripTab>
            }
        </TelerikTabStrip>
    </TabStripTab>

</TelerikTabStrip>

Completed
Last Updated: 16 Sep 2019 10:26 by ADMIN
Release 2.0.0
Created by: Brian
Comments: 2
Category: TabStrip
Type: Bug Report
1

Content inside the tabs is narrow and elements float next to each other. For example, charts or other divs have limited width (screenshot of the issue at the end of this post).

@using Telerik.Blazor
@using Telerik.Blazor.Components.Chart
@using Telerik.Blazor.Components.TabStrip
 
@*WORKAROUND 1*@
<style>
    .k-tabstrip .k-animation-container-relative {
        width: 100%;
    }
</style>
 
@*WORKAROUND 2
<style>
    .k-tabstrip .k-animation-container-relative {
        display: block;
    }
</style>*@
 
<TelerikTabStrip>
    <TelerikTab Title="First">
        First tab content.
        <div style="border: 1px solid red;">some div that must be as wide as the tab strip</div>
        Chart follows and it should also be as wide as the tab
        <TelerikChart>
            <TelerikChartSeriesItems>
                <TelerikChartSeries Type="ChartSeriesType.Line" Name="Product 1" Data="@series1Data">
                </TelerikChartSeries>
                <TelerikChartSeries Type="ChartSeriesType.Line" Name="Product 2" Data="@series2Data">
                </TelerikChartSeries>
            </TelerikChartSeriesItems>
 
            <TelerikChartCategoryAxes>
                <TelerikChartCategoryAxis Categories="@xAxisItems"></TelerikChartCategoryAxis>
            </TelerikChartCategoryAxes>
 
            <TelerikChartTitle Text="Quarterly revenue per product"></TelerikChartTitle>
 
            <TelerikChartLegend Position="ChartLegendPosition.Right">
            </TelerikChartLegend>
        </TelerikChart>
    </TelerikTab>
    <TelerikTab Title="Second" Disabled="true">
        Second tab content. This tab is disabled and you cannot select it.
    </TelerikTab>
    <TelerikTab Title="Third">
        Third tab content.
    </TelerikTab>
</TelerikTabStrip>
 
<TelerikChart>
    <TelerikChartSeriesItems>
        <TelerikChartSeries Type="ChartSeriesType.Line" Name="Product 1" Data="@series1Data">
        </TelerikChartSeries>
        <TelerikChartSeries Type="ChartSeriesType.Line" Name="Product 2" Data="@series2Data">
        </TelerikChartSeries>
    </TelerikChartSeriesItems>
 
    <TelerikChartCategoryAxes>
        <TelerikChartCategoryAxis Categories="@xAxisItems"></TelerikChartCategoryAxis>
    </TelerikChartCategoryAxes>
 
    <TelerikChartTitle Text="Quarterly revenue per product"></TelerikChartTitle>
 
    <TelerikChartLegend Position="ChartLegendPosition.Right">
    </TelerikChartLegend>
</TelerikChart>
 
 
@code {
    public List<object> series1Data = new List<object>() { 10, 2, 5, 6 };
    public List<object> series2Data = new List<object>() { 5, 8, 2, 7 };
    public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };
}

 

Completed
Last Updated: 21 May 2019 10:57 by ADMIN
Release 1.1.0
Created by: Gert
Comments: 3
Category: TabStrip
Type: Feature Request
4

At the moment, you can't get the currently active tab with code, the Title property of the tabs is not public.

Ideally, something like this should work:

@using Telerik.Blazor.Components.TabStrip
@using Telerik.Blazor.Components.Button
 
<TelerikButton OnClick="@WriteActiveTab">Get Active Tab</TelerikButton>
 
<TelerikTabStrip TabPosition="Telerik.Blazor.Components.TabStrip.TabPosition.Left" ref="@myTabStrip">
    <TelerikTab Title="First">
        First tab content.
    </TelerikTab>
    <TelerikTab Title="Second" Disabled="true">
        Secont tab content. This tab is disabled and you cannot select it.
    </TelerikTab>
    <TelerikTab Title="Third">
        Third tab content.
    </TelerikTab>
</TelerikTabStrip>
 
@functions {
    Telerik.Blazor.Components.TabStrip.TelerikTabStrip myTabStrip;
 
    protected void WriteActiveTab()
    {
        Console.WriteLine(myTabStrip.ActiveTab.Title);//Title is not available now
    }
}