The issue is replicated when a PanelBar with ContentTemplate is focused and collapsed:
<p>
<a href="#" tabindex="1">Top Link</a>
</p>
<telerik:RadPanelBar ID="RadPanelBar1" RenderMode="Lightweight" runat="server" TabIndex="1">
<Items>
<telerik:RadPanelItem runat="server" Text="Apples">
<ContentTemplate>
<a href="#" tabindex="1">Something</a>
</ContentTemplate>
</telerik:RadPanelItem>
<telerik:RadPanelItem runat="server" Text="Oranges">
<ContentTemplate>
<a href="#" tabindex="1">Nothing</a>
</ContentTemplate>
</telerik:RadPanelItem>
</Items>
</telerik:RadPanelBar>
</div>
<p>
<a href="#" tabindex="1">Another thing</a>
</p>
From ADMIN:
Placing the following script under the ScriptManager can be used as a temporary workaround:
Telerik.Web.UI.RadPanelItem.prototype._moveToNextFocusable = function (e) {
var $focusableElements;
var $template;
var hasTemplate = this.get_templated() || (this.get_hasContentTemplate() && this.get_expanded());
if (hasTemplate && this.get_focused() && this.get_expanded()) {
$template = $(this.get_element()).find(".rpTemplate");
$focusableElements = $template.find("input,a,button,select,textarea").filter(el => !el.hasAttribute('disabled'));
$focusableElements.eq(0).focus();
e.preventDefault();
return false;
}
return true;
}
With the latest version R1 2017 SP1 the image icon of RadButton is not aligned inside a content template of RadPanelbar. See the attached screenshot for more information and test the code: <%@ Page Language="C#" AutoEventWireup="true" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <telerik:RadScriptManager runat="server" ID="sm"></telerik:RadScriptManager> <style> body { font: 12px "segoe ui",arial,sans-serif; } </style> <telerik:RadPanelBar runat="server" ID="RadPanelBar1" Width="100%"> <Items> <telerik:RadPanelItem Text="Filtering and configuration" Expanded="True"> <ContentTemplate> <telerik:RadButton RenderMode="Lightweight" ID="RadButton_HierarchyLoadMode" Width="300px" runat="server" ButtonType="ToggleButton" Checked="true" ToggleType="CheckBox"> <ToggleStates> <telerik:RadButtonToggleState Text="Yes - Each comment will load only when clicked" PrimaryIconCssClass="p-i-checkbox rbToggleCheckbox" /> <telerik:RadButtonToggleState Text="No - All comments will be loaded when the report starts or the datasource is changed." PrimaryIconCssClass="p-i-checkbox-checked rbToggleCheckboxChecked" /> </ToggleStates> </telerik:RadButton> <telerik:RadButton RenderMode="Lightweight" ID="RadButton_SaveGridSettings" runat="server" Text="Save Grid Settings" Width="140px"> <Icon PrimaryIconCssClass="rbSave"></Icon> </telerik:RadButton> </ContentTemplate> </telerik:RadPanelItem> </Items> <ExpandAnimation Type="None" /> <CollapseAnimation Type="None" /> </telerik:RadPanelBar> </form> </body> </html> The problem is not reproducible with the R3 2016 build.
Hi, I would like to forward a feature request to you and support to resize the PanelBar dynamically you can found a video which demonstrate the functionality. We would like to support minimized navigation and provide more working space for those whose using smaller resolutions. Thanks in advanced, Daniel
Workaround: Set the TabIndex property for the RadPanelBar, e.g. TabIndex="1"