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.

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

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"

Hi Sir,

I'm using RadPanelBar in my project

I've keep RadPanelBar HTML Code in UserControl for using it in different pages (See Sample Project : leftmenu.ascx)

Problem 1
========
Instead of loading UserControl(leftmenu.ascx) in client side like below

<%@ Register TagPrefix="uc1" TagName="leftmenu" Src="~/leftmenu.ascx"%>  //Register
<uc1:leftmenu id="ucjsradleftmenu" runat="server"></uc1:leftmenu>  //Placing User Control

If i Load it in Page Load Dynamically as shown below

UserControl leftuc = (UserControl)LoadControl("~/leftmenu.ascx");
placeleftmenu.Controls.Add(leftuc);

Then If we select Concern Page using mouse where Dynamic Code Exist(Sample Project : RadComboBox.aspx) mouse selected(RadComboBox) not selecting properly

Visual Studio used : Microsoft Visual Studio 2008 Version 9.0.30729.1 SP

Dot Net Framework : Microsoft .NET Framework Version 3.5 SP1