RadPanelBar Items Not Expanding in Firefox

[Jessica]

I have a RadPanelBar that contains two RadPanelItems.  In Internet Explorer 8 the PanelItems expand and collapsed as expected.  In Firefox, however, the page posts back and the PanelBar's ItemClick event fires, but the PanelItems do not expand.

Has anyone run into this before?  Here is the code for the RadPanelBar:

<telerik:RadPanelBar ID="SearchPanelBar" Runat="server"
                                        ExpandMode="FullExpandedItem" Width="100%" CausesValidation="False"
                                        OnItemClick="SearchPanelBar_ItemClick">
                                        <Items>
                                            <telerik:RadPanelItem Value="TopDateSearchPanelItem" runat="server" Text="Search Work Orders By Date" Width="100%" Expanded="true">
                                                <Items>
                                                    <telerik:RadPanelItem Value="DateSearchPanelItem">
                                                        <ItemTemplate>
                                                            <asp:Panel ID="pnlDateRange" runat="server" Direction="LeftToRight" HorizontalAlign="Left" Width="100%" Wrap="False">
                                        <table>
                                            <tr>
                                                <td>
                                                    <asp:Label ID="lblStartDate" runat="server" Text="Install Start Date" CssClass="dateLabel"></asp:Label>
                                                </td>
                                                <td>
                                                    <telerik:RadDatePicker ID="InstallStartDate" Runat="server" AutoPostBack="false"
                                                        Culture="English (United States)"
                                                        onselecteddatechanged="InstallStartDate_SelectedDateChanged"
                                                        Width="150px">
                                                        <Calendar ID="Calendar1"
                                                            runat="server"
                                                            UseColumnHeadersAsSelectors="False"
                                                            UseRowHeadersAsSelectors="False"
                                                            ViewSelectorText="x">
                                                        </Calendar>
                                                        <DatePopupButton HoverImageUrl="" ImageUrl="" />
                                                        <DateInput ID="DateInput1"
                                                            runat="server"
                                                            AutoPostBack="True"
                                                            CausesValidation="false"
                                                            DateFormat="M/d/yyyy"
                                                            DisplayDateFormat="M/d/yyyy">
                                                        </DateInput>
                                                    </telerik:RadDatePicker>

                                                </td>
                                                <td  style="width:5px;">&nbsp;</td>
                                                <td>
                                                    <asp:Label ID="lblEndDate" runat="server" Text="Install End Date" CssClass="dateLabel"></asp:Label>
                                                </td>
                                                <td>
                                                    <telerik:RadDatePicker ID="InstallEndDate" Runat="server"
                                                        Culture="English (United States)"  Width="150px">
                                                    <Calendar ID="Calendar2"
                                                        runat="server"
                                                        UseColumnHeadersAsSelectors="False"
                                                        UseRowHeadersAsSelectors="False"
                                                        ViewSelectorText="x">
                                                    </Calendar>
                                                    <DatePopupButton HoverImageUrl="" ImageUrl="" />
                                                    <DateInput ID="DateInput2"
                                                        runat="server"
                                                        DateFormat="M/d/yyyy"
                                                        CausesValidation="false"
                                                        DisplayDateFormat="M/d/yyyy">
                                                    </DateInput>
                                                    </telerik:RadDatePicker>

                                                </td>
                                                <td style="text-align:left;">
                                                    <asp:Button ID="btnSearchDateRange" runat="server" onclick="SearchDateRange_Click"
                                                     Text="GO" CssClass="searchBtnRight" />
                                                </td>
<%--AJAX Loading Panel Settings--%>
                                                <td style="vertical-align:top;">
                                                   <telerik:RadAjaxLoadingPanel id="LoadingPanel1" runat="server" IsSticky="true" Transparency="1" style="position:absolute;">
                                                        <asp:Image id="Image1" runat="server"  ImageUrl="Images/loading7.gif" ImageAlign="Bottom"></asp:Image>
                                                    </telerik:RadAjaxLoadingPanel>
<%--Control Validator Settings--%>
                                           <%--          <asp:RequiredFieldValidator ID="StartDateValidator" ControlToValidate="InstallStartDate" Enabled="true"
                                                        ErrorMessage="The Start Date is required<br />" runat="server" Display="None" ></asp:RequiredFieldValidator>
                                                    <asp:RequiredFieldValidator ID="EndDateValidator" ControlToValidate="InstallEndDate" Enabled="true"
                                                        ErrorMessage="The End Date is required<br />" runat="server" Display="None" ></asp:RequiredFieldValidator>
                                                    <asp:CompareValidator ID="dateCompareValidator" runat="server" Display="None" ControlToValidate="InstallEndDate" ControlToCompare="InstallStartDate" Operator="GreaterThanEqual" Type="Date" Enabled="true"
                                                        ErrorMessage="The End Date must be after the Start Date.<br />">
                                                    </asp:CompareValidator>
                                                    <asp:ValidationSummary id="validationSummary" DisplayMode="BulletList" runat="server"/> --%>
                                                </td>
                                            </tr>
                                        </table>
                                    </asp:Panel>
                                                        </ItemTemplate>
                                                    </telerik:RadPanelItem>
                                                </Items>

                                            </telerik:RadPanelItem>
                                            <telerik:RadPanelItem  Value="TopNumberSearchPanelItem" runat="server" Text="Search WorkOrders By Number" Width="100%">
                                                <Items>
                                                            <telerik:RadPanelItem Value="NumberSearchPanelItem">
                                                                <ItemTemplate>
                                                                        <table>
                                                                            <tr>
                                                                                <td>
                                                                                    <asp:Label ID="lblSearch" runat="server" Text="Enter Search Value" CssClass="dateLabel"></asp:Label>
                                                                                </td>
                                                                                <td>
                                                                                    <asp:TextBox ID="txtSearchValue" runat="server" Visible="true"></asp:TextBox>
                                                                                </td>
                                                                                <td  style="width:5px;">
                                                                                    <telerik:RadComboBox ID="SearchType" Runat="server">
                                                                                        <Items>
                                                                                            <telerik:RadComboBoxItem runat="server" Text="R00 Number" Value="ReceiverNumber" />
                                                                                            <telerik:RadComboBoxItem runat="server" Text="Serial Number" Value="SerialNumber" />
                                                                                            <telerik:RadComboBoxItem runat="server" Text="Account Number" Value="AccountNumber" />
                                                                                            <telerik:RadComboBoxItem runat="server" Text="Job Number" Value="JobNumber" />
                                                                                        </Items>
                                                                                    </telerik:RadComboBox>
                                                                                </td>
                                                                                <td style="text-align:left;">
                                                                                    <asp:Button ID="btnSearchNumber" runat="server" onclick="SearchNumber_Click"
                                                                                        Text="GO" CssClass="searchBtnRight" />
                                                                                </td>
<%--AJAX Loading Panel Settings--%>
                                                                                <td style="vertical-align:top;">
                                                                                    <telerik:RadAjaxLoadingPanel id="LoadingPanel2" runat="server" IsSticky="true" Transparency="1" style="position:absolute;">
                                                                                        <asp:Image id="Image1" runat="server"  ImageUrl="Images/loading7.gif" ImageAlign="Bottom"></asp:Image>
                                                                                    </telerik:RadAjaxLoadingPanel>
                                                                            </tr>
                                                                        </table>
                                                    </ItemTemplate>
                                            </telerik:RadPanelItem>
                                        </Items>
                                        </telerik:RadPanelItem>
                                        </Items>
                                    </telerik:RadPanelBar>

[Nikolay Tsenkov]

Hi Jessica,

Thank you for indicating this issue.
This is definitely a bug and it's already logгed in our issue tracking system!

The problem is that Expanded property of one of the items is set to true in FullExpandedItem ExpandMode of the panelBar. The workaround for now would be:
1. Remove the Expanded settings from the markup;
2. Trap the OnClientLoad event of the panelBar and expand the item that you wanted previously to expand in the markup. It should look something like the following:

function onLoad(sender)
{
    var panelBar=sender;
    panelBar.get_items().getItem(1).set_expanded(true);
}

During the time I tested this workaround I noticed that It's actually rendering even better as user experience, because the expand animation becomes visible for the nodes expanded onClientLoad (the ones set in the markup are rendered without animation)!

Hope this is going to help you!
 

Regards,
Nikolay Tsenkov
the Telerik team

[mohmmad misk]

Hi Nikolay,

thanks for this function, but the item still open when click on other item(open one item and close all other items).
is there any solve for this??

thanks,

[Nikolay Tsenkov]

Hello mohmmad misk,

Could you, please, try using the "MultipleExpandedItems" ExpandMode and let me know the results?


Regards,
Nikolay Tsenkov
the Telerik team

[mohmmad misk]

Hi Nikolay,

I try "MultipleExpandedItem", it exactly like the script.
what i want is "FullExpandedItem" behavior but with using Javascript.

Thanks,

[Nikolay Tsenkov]

Hello mohmmad misk,

I apologize, but I am not sure I understand what exactly is the problem you experience.

Please, try to explain the issue in a bit better detail.


Regards,
Nikolay Tsenkov
the Telerik team

[mohmmad misk]

Hi Nikolay,

Please note that, when I use "FullExpandedItem" ExpandMode the PanelBar work correctly, but when I use it with Chrome the selected item didn't expand.

thanks,