RadPanelBar Items Not Expanding in Firefox

7 posts, 0 answers
  1. Jessica
    Jessica avatar
    7 posts
    Member since:
    Jun 2010

    Posted 17 Jun 2010 Link to this post

    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> 

  2. Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts

    Posted 18 Jun 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. mohmmad misk
    mohmmad misk avatar
    5 posts
    Member since:
    Mar 2010

    Posted 09 May 2011 Link to this post

    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,
  5. Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts

    Posted 10 May 2011 Link to this post

    Hello mohmmad misk,

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


    Regards,
    Nikolay Tsenkov
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  6. mohmmad misk
    mohmmad misk avatar
    5 posts
    Member since:
    Mar 2010

    Posted 10 May 2011 Link to this post

    Hi Nikolay,

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

    Thanks,


  7. Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts

    Posted 13 May 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  8. mohmmad misk
    mohmmad misk avatar
    5 posts
    Member since:
    Mar 2010

    Posted 18 May 2011 Link to this post

    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,
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017