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;
}

When tabbing from first PanelBar to the second one it neither passes through the contentTemplate elements, nor to the second panelbar:
 
<telerik:RadPanelBar runat="server" ID="radPnlBarFundingSources" Width="100%" ExpandMode="MultipleExpandedItems" TabIndex="1">
            <Items>
                <telerik:RadPanelItem runat="server" Text="Funding Source">
                    <ContentTemplate>
                        <telerik:RadListBox runat="server" ID="radLbAvailFundingSource" Height="100px" Width="40%" SelectionMode="Multiple" AllowTransfer="true" TransferMode="Move" AllowTransferOnDoubleClick="true" TransferToID="radLbSelFundingSource" ButtonSettings-AreaWidth="35px" Enabled="True" style="font-family: Verdana, Trebuchet MS,Arial,sans-serif; font-size:0.9em;"></telerik:RadListBox>
                        <telerik:RadListBox runat="server" ID="radLbSelFundingSource" Height="100px" Width="40%"></telerik:RadListBox>
                    </ContentTemplate>
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelBar>
    </div>
    <div class="Row">
        <telerik:RadPanelBar runat="server" ID="radPnlBarContracts" Width="100%" TabIndex="2">
            <Items>
                 <telerik:RadPanelItem runat="server" Text="Contract">
                    <ContentTemplate>
                        <telerik:RadListBox runat="server" ID="radLbAvailContract" Height="100px" Width="40%" SelectionMode="Multiple" AllowTransfer="true" AllowTransferOnDoubleClick="true" TransferToID="radLbSelContract"  AutButtonSettings-AreaWidth="35px"></telerik:RadListBox>
                        <telerik:RadListBox runat="server" ID="radLbSelContract" Height="100px" Width="40%"></telerik:RadListBox>
                    </ContentTemplate>
                 </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelBar>

You should, in general, use the ContentTemplate to provide content to items.

By original design and old documentation, the ItemTemplate must not be collapsible at all, but since it has been for ages, we must fix that to avoid a breaking change.

Items that have an ItemTemplate have the following collapse/expand issues:

    - they require two clicks to collapse for the first time
    - setting Expanded=false on the server keeps the ItemTemplate expanded
    - until you click their header they do not heave the coloring and expand/collapse arrow

See this changeset on how the templates should work and the change from the previous descriptions: https://github.com/telerik/ajax-docs/commit/67f0a252ff24e2397e042fe5797de3610a75221d which is available in the following article http://docs.telerik.com/devtools/aspnet-ajax/controls/panelbar/templates/overview

The issue happens with RenderMode Lightweight, under IE, when the panel bar is in a scrolled container.
Workarounds:
- use the Classic Render Mode
- store the container scroll position when the item expands, restore it after animation ends, by using the control events. Sample is attached below. Note that you need to find the actual container that scrolls, and this will vary with every different layout of your real page.

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.

Please consider adding a ClientVisible or Display property to panel bar items that we can set server side to control the initial visibility of items on the client.

In the screenshot you can see the PanelBar and a menu to filter items to display. I like what I have except for the fact that I have to run javascript to filter items on each page load and async update based on the selected filter.

RadGrid has a property Display for columns which allows the column to be sent to the client but not be visible initially. I just want something like that for the PanelBar.

Thank you for your consideration.

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"

Under the list of controls that will adjust with the device detection screen sizes and device types, the RadPanelBar is not listed. It would be handy if this control was able to automatically layout differently if there were more space. 

For example, on a wide screen monitor, the panels would be side by side, if there was room. And if the same page was viewed in a smaller screen size, the panels would stack and become collapsible as they are by default now.