This is a migrated thread and some comments may be shown as answers.

RadPanel when clicked, opens then collapses immediately

3 Answers 68 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Gary
Top achievements
Rank 1
Gary asked on 22 Aug 2008, 01:47 PM
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> 
                            <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> 
                            <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> 
                            <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> 
                            <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> 
                            <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

3 Answers, 1 is accepted

Sort by
0
Accepted
Paul
Telerik team
answered on 22 Aug 2008, 02:48 PM
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.
0
Gary
Top achievements
Rank 1
answered on 22 Aug 2008, 02:55 PM
Thank you, that works great, but why does the skin not display properly (Outlook)?
0
Alex Gyoshev
Telerik team
answered on 25 Aug 2008, 11:59 AM
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.
Tags
PanelBar
Asked by
Gary
Top achievements
Rank 1
Answers by
Paul
Telerik team
Gary
Top achievements
Rank 1
Alex Gyoshev
Telerik team
Share this question
or