Recently Updated
Completed
Last Updated:
16 Sep 2019 10:26
by ADMIN
Release 2.0.0
Created by:
Brian
Comments:
2
Category:
TabStrip
Type:
Bug Report
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
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 }}
ADMIN EDIT: As of October 2023, the TabStrip supports getting and setting the active tab with the ActiveTabIndex parameter. This request was marked as Complete when we exposed a Title parameter for the TabStripTab component. Enhanced programmatic access to TabStrip tab IDs can be implemented as part of TabStrip dynamic (closable) tabs.