RadPanel when clicked, opens then collapses immediately

[Gary]

I am using a control that contains a RadPanel with RadEditors within.   The html is follows:

        <telerik:RadPanelbar ID="rpbDisposalCode" runat="server" Skin="Outlook" Width="80%" ExpandMode="MultipleExpandedItems" CausesValidation="true" AllowCollapseAllItems="true" CollapseAnimation-Type="InOutElastic" >
            <Items>
                <telerik:RadPanelItem runat="server" Text="Disposal Code" Expanded="true" Value="DisposalCode">
                    <ItemTemplate>
                        <asp:Label ID="lblDisposalCode" Text="Disposal Code" runat="server" />&nbsp;<asp:TextBox runat="server" ID="txtDisposalCode" ReadOnly="true" /><asp:DropDownList ID="ddDisposalCd" runat="server" AutoPostBack="true" DataSourceID="ObjectDataSourceDisposal"  DataTextField="DisposalCode" DataValueField="DisposalCodeID" OnSelectedIndexChanged="ddDisposalCd_SelectedIndexChanged" Visible="false" />
                        <asp:RequiredFieldValidator ID="rDisposalCode" runat="server" ControlToValidate="txtDisposalCode" ErrorMessage="*" Enabled="true"  SetFocusOnError="true" Text="Required Field" /><p />
                        <asp:CheckBox Text="Hazardous?"  runat="server" ID="ckHazardous" />
                    </ItemTemplate>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="Disclaimer" Value="DisclaimerTop" runat="server" Expanded="false">
                   <Items>
                        <telerik:RadPanelItem runat="server" Text="" Value="Disclaimer" Expanded="false">
                            <ItemTemplate>
                                <telerik:RadEditor runat="server" ID="radEdDisclaimer" ToolsFile="~/App_Themes/Theme3/ToolsFile.xml" EnableViewState="false" Width="90%">
                                </telerik:RadEditor>
                                <asp:RequiredFieldValidator ID="rValDisclaimer" runat="server" ControlToValidate="radEdDisclaimer" ErrorMessage="*" Enabled="true"  SetFocusOnError="true" Text="Required Field" />
                            </ItemTemplate>
                        </telerik:RadPanelItem>
                   </Items>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="Storage" Value="StorageTop" runat="server" Expanded="false">
                   <Items>
                        <telerik:RadPanelItem runat="server" Text="" Value="Storage">
                            <ItemTemplate>
                                <telerik:RadEditor runat="server" ID="radEdStorage" ToolsFile="~/App_Themes/Theme3/ToolsFile.xml" EnableViewState="false" Width="90%">
                                </telerik:RadEditor>
                                <asp:RequiredFieldValidator ID="rValEdStorage" runat="server" ControlToValidate="radEdStorage" ErrorMessage="*" Enabled="true"  SetFocusOnError="true" Text="Required Field" />
                            </ItemTemplate>
                        </telerik:RadPanelItem>
                   </Items>
                </telerik:RadPanelItem>

                <telerik:RadPanelItem Text="Disposal Options " Value="DisposalOptionsTop" runat="server" Expanded="false">
                    <Items>
                        <telerik:RadPanelItem runat="server" Text="" Value="DisposalOptions" Expanded="false">
                            <ItemTemplate>
                                <telerik:RadEditor runat="server" ID="radEdDisposalText" ToolsFile="~/App_Themes/Theme3/ToolsFile.xml" EnableViewState="false" Width="90%">
                                </telerik:RadEditor>
                                <asp:RequiredFieldValidator ID="rValEdDisposalText" runat="server" ControlToValidate="radEdDisposalText" ErrorMessage="*" Enabled="true"  SetFocusOnError="true" Text="Required Field" />
                            </ItemTemplate>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>

                <telerik:RadPanelItem Text="Safety Control" Value="SafetyControlTop" runat="server" Expanded="false">
                    <Items>
                        <telerik:RadPanelItem runat="server" Text="" Value="SafetyControl" Expanded="false">
                            <ItemTemplate>
                                <telerik:RadEditor runat="server" ID="radEdSafetyControl" ToolsFile="~/App_Themes/Theme3/ToolsFile.xml" EnableViewState="false" Width="90%">
                                </telerik:RadEditor>
                                <asp:RequiredFieldValidator ID="rValEdSafetyControl" runat="server" ControlToValidate="radEdSafetyControl" ErrorMessage="*" Enabled="true"  SetFocusOnError="true" Text="Required Field" />
                            </ItemTemplate>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>

                <telerik:RadPanelItem Text="Comment/Questions" Value="CommentsTop" runat="server" Expanded="false">
                    <Items>
                        <telerik:RadPanelItem runat="server" Text="" Value="Comments" Expanded="false">
                            <ItemTemplate>
                                <telerik:RadEditor runat="server" ID="radEdComment" ToolsFile="~/App_Themes/Theme3/ToolsFile.xml" EnableViewState="false" Width="90%">
                                </telerik:RadEditor>
                                <asp:RequiredFieldValidator ID="rValEdComment" runat="server" ControlToValidate="radEdComment" ErrorMessage="*" Enabled="true"  SetFocusOnError="true" Text="Required Field" />
                            </ItemTemplate>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelbar>

The control containing the above radPanel is in another control that contains a RadPanel, below:

    <telerik:RadAjaxManager ID="PanelbarAjaxMgr" runat="server" >
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="PanelbarAjaxMgr">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="rpbProduct" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadPanelbar ID="rpbProduct" runat="server" Skin="Outlook" Width="80%" ExpandMode="MultipleExpandedItems"  >
        <Items>
            <telerik:RadPanelItem runat="server" Text="Product ID - ">
            </telerik:RadPanelItem>
            <telerik:RadPanelItem runat="server" Text="NSN" Expanded="True" Value="hdrItemNSN" Width="90%">
                <Items>
                    <telerik:RadPanelItem runat="server" Expanded="True" Value="itemNSN"  Width="90%">
                        <ItemTemplate>
                            <uc1:NSN ID="NSNdetail" runat="server" />
                        </ItemTemplate>
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
            <telerik:RadPanelItem runat="server" Text="CAGE Code" Expanded="True" Value="hdrItemCageCode" Width="90%">
                <Items>
                    <telerik:RadPanelItem runat="server" Value="itemCageCode" Width="90%">
                        <ItemTemplate>
                             <ucCage:CageCode ID="CageCodeDetail" runat="server" />
                       </ItemTemplate>
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
            <telerik:RadPanelItem runat="server" Text="Disposal Code" Expanded="True" Value="hdritemDisposalCode" Width="100%">
                <Items>
                    <telerik:RadPanelItem runat="server" Value="itemDisposalCode" Width="100%">
                        <ItemTemplate>
                             <ucDisposal:DisposalCode ID="DisposalCodeDetail" runat="server" />
                        </ItemTemplate>
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
            <telerik:RadPanelItem runat="server" Text="Properties" Expanded="False" Width="90%">
                <Items>
                    <telerik:RadPanelItem runat="server">
                        <ItemTemplate>
                        </ItemTemplate>
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
            <telerik:RadPanelItem runat="server" Text="EPACs" Expanded="False" Width="90%">
                <Items>
                    <telerik:RadPanelItem runat="server">
                        <ItemTemplate>
                        </ItemTemplate>
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
            <telerik:RadPanelItem runat="server" Text="Toxicity" Expanded="False" Width="90%">
                <Items>
                    <telerik:RadPanelItem runat="server">
                        <ItemTemplate>
                            <a href="#" class="AddItem">Add New Product Toxicity</a>
                        </ItemTemplate>
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
            <telerik:RadPanelItem runat="server" Text="Composition" Expanded="False" Width="90%">
                <Items>
                    <telerik:RadPanelItem runat="server">
                        <ItemTemplate>
                            <a href="#" class="AddItem">Add New Product Composition</a>
                        </ItemTemplate>
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
            <telerik:RadPanelItem runat="server" Text="Synonymns" Expanded="False" Width="90%">
                <Items>
                    <telerik:RadPanelItem runat="server" Width="90%">
                        <ItemTemplate>
                            <a href="#" class="AddItem">Add New Product Synonymn</a>
                        </ItemTemplate>
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
            <telerik:RadPanelItem runat="server" Text="References" Expanded="False" Width="90%">
                <Items>
                    <telerik:RadPanelItem runat="server">
                        <ItemTemplate>
                            <a href="#" class="AddItem">Add New Product Reference</a>
                        </ItemTemplate>
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
            <telerik:RadPanelItem runat="server" Text="Documents" Expanded="False" Width="90%">
                <Items>
                    <telerik:RadPanelItem runat="server">
                        <ItemTemplate>
                            <a href="#">Upload New Product Document</a>
                        </ItemTemplate>
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
        </Items>
    </telerik:RadPanelbar>

The control is line <ucDisposal:DisposalCode ID="DisposalCodeDetail" runat="server" /> 

When I click on any of the panels in this control, it opens then closes.  Also, the skin has no affect on the panel.  Thanks in advance for your help.

Gary

[Paul]

Hi Gary,

Please find below your modified code snippet that works as expected:

<script type="text/javascript">
function test(sender, eventArgs)
{
    eventArgs.get_domEvent().stopPropagation();
}
</script>

<telerik:RadPanelBar
    ID="rpbDisposalCode"
    runat="server"
    Width="100%"
    ExpandMode="MultipleExpandedItems"
    CausesValidation="true"
    AllowCollapseAllItems="true"
    CollapseAnimation-Type="InOutElastic"
    OnClientItemClicking="test">

All the best,
Paul
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Gary]

Thank you, that works great, but why does the skin not display properly (Outlook)?

[Alex Gyoshev]

Hi Gary,

The skin problem is caused because the styles of the RadPanelBar (and as a matter of fact, all hierarchical RadControls) are inherited within the HTML tree. These controls are not intended to be nested (since they can contain other items); also, the design of the control does not assume that it will be nested, so it might look strange. Nevertheless, a work-around can be forged - but it would double the CSS in size. You can find it attached - it can be used as an external skin (the skin name is "Nested", but it's a copy of "Outlook").

Best wishes,
Alex
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.