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
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.
Workaround: Set the TabIndex property for the RadPanelBar, e.g. TabIndex="1"