The issue is replicated in R3 2021 only.
<telerik:RadTabStrip runat="server" ID="RadTabStrip1" >
<Tabs>
<telerik:RadTab Text="Tab 1">
<Tabs>
<telerik:RadTab Text="fail"></telerik:RadTab>
</Tabs>
</telerik:RadTab>
<telerik:RadTab Text="Tab 2"></telerik:RadTab>
<telerik:RadTab Text="Tab 3"></telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
Solution from Admin:
Place the load/script below somewhere under the ScriptManager. It can be added in the MasterPage if needed:
<script>
Sys.Application.add_init(function fixTabStrip() {
if (Telerik && Telerik.Web && Telerik.Web.UI && Telerik.Web.UI.RadTabStrip) {
Telerik.Web.UI.RadTabStrip.prototype._childInserted = function (index, tab, owner) {
this._allTabs = null;
if (this._cachedSelectedTab) {
owner._setSelectedIndex(this._cachedSelectedTab.get_index());
this._cachedSelectedTab = null;
}
if (tab._cachedSelected) {
owner._setSelectedIndex(index);
tab._cachedSelected = false;
}
Telerik.Web.UI.RadTabStrip.callBaseMethod(this, "_childInserted", [index, tab, owner]);
if (tab.get_isBreak()) {
var breakElement = document.createElement("li");
breakElement.className = "rtsBreak";
owner.get_childListElement().insertBefore(breakElement, tab._element.nextSibling);
}
//if (tab.get_parent() && tab.get_parent() instanceof Telerik.Web.UI.RadTab && tab.get_parent().get_selected()) {
// $telerik.$(tab.get_parent().get_levelElement()).removeClass("rtsHidden");
//}
}
}
});
</script>
While it is currently possible to target the first or last item in a RadTabStrip via their CSS classes .rtsFirst and .rtsLast, it is not possible to target individual items, e.g. to add a custom icon or display different background images in tabs. Assigning icons via the ImageURL property is often not feasible, e.g. when using the RadTabStrip-based navigation controls in Sitefinity. Numbering the list items, e.g. .rtsLI1, .rtsLI2, .rtsLI3, etc., would be trivial to implement and provide a lot of flexibility through individual CSS targeting. This also applies to the RadPanelBar and RadMenu controls.
In the RadMultipageView a portal URL is set as content. The user navigates to one of the pages within the portal. Now there is no way to go back to previous page or to the default landing page where the tab was initially at.
Requesting a new feature in the tab strip to allow navigate through the iframe history (back/forward) for a multipage view. It could be similar to the back/forward buttons of the browser but within the tab of the tab strip where the content URL is set in the multipage view. This could be set enable/disable by a setting.
When a TabStrip has Keyboard navigation active, the focus CSS class (rtsFocused) is not removed from the previously active tab when clicking on other tabs with the mouse.
<telerik:RadTabStrip RenderMode="Lightweight" ID="RadTabStrip1" runat="server">
<Tabs>
<telerik:RadTab Text="Examples" />
<telerik:RadTab Text="Configurator">
<Tabs>
<telerik:RadTab Text="Default"></telerik:RadTab>
<telerik:RadTab Text="Test"></telerik:RadTab>
<telerik:RadTab Text="Final"></telerik:RadTab>
</Tabs>
</telerik:RadTab>
<telerik:RadTab Text="Quick Start" />
<telerik:RadTab Text="Help">
<Tabs>
<telerik:RadTab Text="Search"></telerik:RadTab>
<telerik:RadTab Text="Topics"></telerik:RadTab>
<telerik:RadTab Text="Troubleshooting"></telerik:RadTab>
</Tabs>
</telerik:RadTab>
<telerik:RadTab Text="Purchase" />
</Tabs>
<KeyboardNavigationSettings CommandKey="Alt" FocusKey="A" />
</telerik:RadTabStrip>
When no keyboard navigation is used, the behavior is acting correctly.
Please see the ticket here http://www.telerik.com/account/support-tickets/view-ticket?threadid=1010098. I still need to support IE8 browsers. The removal of the frameBorder attribute from the iframe rendering causes layout issues in IE8. Adding a property to the RadPageView project to re-enable this behavior would fix this issue. It could be false by default in order to pass the cited validation tool. The developer would have to enable the property in order for the frameBorder attribute to be rendered as frameBorder="0".
Refer Support Id 1122136 ( https://www.telerik.com/account/support-tickets/view-ticket?threadid=1122136 ) for screen shots and explanation... Where we use the ShowBaseLine property in Horizontal Orientation, the same feature is not available when in Vertical Orientation
Hi Telerik team,
Few of our clients reported the following issue with respect to WCAG 2.0 SC 4.1.2 standard. (508 Standard and compliance) -
Practice | Function (example) |
Ensure ARIA roles, states, and properties are valid | LI has an aria-level attribute of 0, which is not an integer value greater than, or equal to, 1 |
Example: visit https://demos.telerik.com/aspnet-ajax/tabstrip/examples/wai-aria-support/defaultcs.aspx
Observe the ul-li elements created for tabstrip. On each li element, there is aria-level attribute whose value is set to 0.
As per WCAG this value should start from 1. The value 0 is invalid. Refer: https://www.w3.org/TR/WCAG20-TECHS/ARIA12.html
Please let me know when are you going to fix this for compliance.
--
Sunil
Few of our clients reported the following issue with respect to WCAG 2.0 SC 4.1.2 standard. (508 Standard and compliance) -
Practice | Function (example) |
Ensure sub-lists are marked up properly | This UL should only contain li elements (without an ARIA-assigned role), script elements (without an ARIA-assigned role) or template elements (without an ARIA-assigned role); or
|
Example: When Telerik Tabstrip has EnableAriaSupport=true, internally tabstrip is combination of ul-li with css to display the Tabs properly -
The html looks like as follows -
<
ul
class
=
"rtsUL"
>
<
li
class
=
"rtsLI rtsFirst"
role
=
"tab"
aria-disabled
=
"false"
aria-level
=
"0"
aria-controls
=
"LayoutPageView"
>
<
a
accesskey
=
"L"
title
=
"Layout"
class
=
"rtsLink rtsBefore"
id
=
"LayoutTab"
href
=
"#"
><
span
class
=
"rtsOut"
>
<
span
class
=
"rtsIn"
>
<
span
class
=
"rtsTxt"
>
<
h2
class
=
"RadTabStrip RadTabStrip_Default"
><
u
>L</
u
>ayout</
h2
>
</
span
>
</
span
>
</
span
>
</
a
>
</
li
>
<
li
class
=
"rtsLI"
role
=
"tab"
aria-disabled
=
"false"
aria-level
=
"0"
aria-controls
=
"SearchPageView"
aria-selected
=
"true"
id
=
"SearchTabStrip_active_tab"
>
<
a
accesskey
=
"S"
title
=
"Search"
class
=
"rtsLink rtsSelected"
id
=
"SearchTab"
href
=
"#"
>
<
span
class
=
"rtsOut"
>
<
span
class
=
"rtsIn"
>
<
span
class
=
"rtsTxt"
>
<
h2
class
=
"RadTabStrip RadTabStrip_Default"
><
u
>S</
u
>earch</
h2
>
</
span
>
</
span
>
</
span
>
</
a
>
</
li
>
<
li
class
=
"rtsLI rtsLast"
role
=
"tab"
aria-disabled
=
"false"
aria-level
=
"0"
aria-controls
=
"ResultsPageView"
>
<
a
accesskey
=
"R"
title
=
"Statewide Search Results 0 records"
class
=
"rtsLink rtsAfter"
id
=
"ResultsTab"
href
=
"#"
>
<
span
class
=
"rtsOut"
>
<
span
class
=
"rtsIn"
>
<
span
class
=
"rtsTxt"
>
<
h2
class
=
"RadTabStrip RadTabStrip_Default"
>Statewide Search<
u
>R</
u
>esults (0)</
h2
>
</
span
>
</
span
>
</
span
>
</
a
>
</
li
>
</
ul
>
Observe the aria attributes which are on li elements. Is that really necessary considering the compliance? (as mentioned in practice and example).
Please let me know when are you going to fix this for compliance.
--
Sunil
Scenario: RadButton within RadPageView part of RadMultiPageView integrated with RadTabStrip for switching PageViews.
When switching tabs, additional padding is applied to the text in RadButton. After a postback is made, padding is not applied anymore.
Steps to reproduce:
Use the code below. Select the Members tab and press the tab key - nothing happens. Focusing the DataPicker is expected.
<a href="http://www.google.com">Google</a>
<div class="RadTabStripWrapper">
<telerik:RadTabStrip ID="rtsCommitteeTabs" runat="server" MultiPageID="rmpCommitteeTabViews" RenderMode="Lightweight">
<KeyboardNavigationSettings CommandKey="Alt" FocusKey="T" />
<Tabs>
<telerik:RadTab PageViewID="pvMeetings" Value="Meetings" Text="Meetings">
</telerik:RadTab>
<telerik:RadTab PageViewID="pvMembers" Value="Members" Text="Members">
</telerik:RadTab>
<telerik:RadTab PageViewID="pvAttributes" Value="Other Information" Text="Other Information">
</telerik:RadTab>
<telerik:RadTab runat="server" PageViewID="pvCommitteeLinkDocTab1" Text="Link Doc Tab 1" Value="CommitteeLinkDocTab1">
</telerik:RadTab>
<telerik:RadTab runat="server" PageViewID="pvCommitteeLinkDocTab2" Text="Link Doc Tab 2" Value="CommitteeLinkDocTab2">
</telerik:RadTab>
<telerik:RadTab runat="server" PageViewID="pvCommitteeLinkDocTab3" Text="Link Doc Tab 3" Value="CommitteeLinkDocTab3">
</telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
</div>
<div class="RadMultiPageWrapper">
<telerik:RadMultiPage ID="rmpCommitteeTabViews" runat="server">
<!-- Meetings Tab -->
<telerik:RadPageView runat="server" ID="pvMeetings" CssClass="MeetingsTab">
</telerik:RadPageView>
<telerik:RadPageView runat="server" ID="pvMembers" CssClass="MeetingsTab">
<telerik:RadDatePicker ID="datePickerMeetingsFrom" CssClass="DatePicker" runat="server" RenderMode="Lightweight" EnableAriaSupport="true" EnableKeyboardNavigation="true" aria-label="From date for the meeting date range filter">
<DateInput runat="server" ValidationGroup="MeetingDates" aria-label="From date for the meeting date range filter">
</DateInput>
</telerik:RadDatePicker>
</telerik:RadPageView>
<telerik:RadPageView runat="server" ID="pvAttributes" CssClass="MeetingsTab">
</telerik:RadPageView>
<telerik:RadPageView runat="server" ID="pvCommitteeLinkDocTab1" CssClass="MeetingsTab">
</telerik:RadPageView>
<telerik:RadPageView runat="server" ID="pvCommitteeLinkDocTab2" CssClass="MeetingsTab">
</telerik:RadPageView>
<telerik:RadPageView runat="server" ID="pvCommitteeLinkDocTab3" CssClass="MeetingsTab">
</telerik:RadPageView>
</telerik:RadMultiPage>
</div>
<a href="http://www.google.com">Google 2</a>
AXE Errors:
Setup to reproduce:
<telerik:RadTabStrip runat="server" ID="RadTabStrip1" MultiPageID="RadMultiPage1" EnableAriaSupport="true" SelectedIndex="0">
<AriaSettings Label="TabStrip" />
<KeyboardNavigationSettings CommandKey="Alt" FocusKey="M" />
<Tabs>
<telerik:RadTab Text="Tab 1">
</telerik:RadTab>
<telerik:RadTab Text="Tab 2">
</telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0" EnableAriaSupport="true">
<telerik:RadPageView ID="RadPageView1" runat="server" ContentUrl="content.aspx">
</telerik:RadPageView>
<telerik:RadPageView ID="RadPageView2" runat="server" ContentUrl="content.aspx">
</telerik:RadPageView>
</telerik:RadMultiPage>
Currently the RadTabStrip + Google Maps integration suffers a limitation e.g. if the map is within a hidden tab, there are displacements.
This markup: <Telerik:RadTabStrip ID="detailsStrip" runat="server" MultiPageID="RadMultiPage1" ClickSelectedTab="true" OnTabClick="detailsStrinp_TabClick" SelectedIndex="0" Align="Justify" Orientation="VerticalLeft" EnableEmbeddedSkins="false" AutoPostBack="true" Skin="WFS" ScrollChildren="true" OnClientTabSelected="onTabSelected"> <Tabs> <Telerik:RadTab Text="General" PageViewID="GeneralView"> </Telerik:RadTab> <Telerik:RadTab Text="History" PageViewID="HistoryView"> </Telerik:RadTab> <Telerik:RadTab Text="Dokumenty" PageViewID="DocsView"> </Telerik:RadTab> <Telerik:RadTab Text="AddInfo" PageViewID="AddInfoView"> </Telerik:RadTab> <Telerik:RadTab Text="Gallery" PageViewID="GalleryView"> </Telerik:RadTab> <Telerik:RadTab Text="Process" PageViewID="ProcessView" Visible="false" /> </Tabs> <TabTemplate> <div class="nav-item"> <div class="nav-item-img"></div> <div class="nav-item-header"><%# DataBinder.Eval(Container,"Text") %></div> </div> </TabTemplate> </Telerik:RadTabStrip> Generates js issue: if(D.TabStripOrientation.isVertical(H)){G="offsetHeight"; F=function(J,K){J.firstChild.firstChild.firstChild.style.height=K+"px"; (null reference) Version: 2012.3.1016.35
i have create tab by using tabstrip and assing pageview to that tab but on delete of tab the page view is not deleting .for deleteing i have use close imagebutton,tab will delete but pageview is not delete.pls suggest me how to delete tab alone tab alone with pageview.
1)If already one tab opened means-->just i want to select tab(without postback) for that me use set_selected(true) and select().But its also fires OnClientTabSelected Client Side API function. So how can i achieve this? OnClientTabSelecting function available to get focus of user select a tab.Becoz i want two functionality 1)I want postback for some specific of the tabs when user clicks already opened tabs 2)I want to select a Tab(without postback) when user clicks from Leftmenu(RadPanelBar) Pls explain with sample code how to achieve both Its very urgent 3) In my left side user control RadPanelItem me used.Based on this only tabs are opened based Functionality me need -->whenever user select a already opened tabs its corresponding menu also should select in RadPanelbar(PanelItem) Me tried this logic ============ function ClientTabsSelected(sender, args) { var tab = args.get_tab(); GetItemText(tab.get_text()); } function GetItemText(currenttabtext) { //This function me put left side user control. var panelBar = $find("<%=RadPanelBar1.ClientID%>"); var currentitem = panelBar.findItemByText(currenttabtext); if (currentitem) { currentitem.set_selected(true); currentitem.expand(); } } ================================ Its works only when panelitem expand.If already selected item in Panelbar collapsed means.Its select properly (rpSelected CSS Class assigned me find using inspect element) But its not expand..Please help me solve this also Please response soon.Its very urgent