RadPanelBar Collapses after Postback of controls inside a RadPanelitem

[Sushma]

Hi,
I am using Telerik Rad Ajax Controls  2013 Q1 NET 40 for our website, Technologies, ASP.NET, VB.

I have a .aspx page with a ajaxified RadPanelBar. There is a RadPanelItem in RadPanelBar which contains controls such as texboxes, combo boxes etc. HTML Tables are used to show controls/fields in each panel. The RadPanelBar is ExpandMode="MultipleExpandedItems". I have a RadAJXManager for the panelbar.

The RadPanelItem has a cascading combo, so the first combox "Manufacture" on select populates the second Combo "Model. I have set a OnSelectedIndexChanged="ddManufacturer_SelectedIndexChanged" to call a code behind code, which correctly populates the Model Combo. The problem I have is that once the Model combo has been populated, the PanelBarItem which was expanded seems to collapse after the postback.
 
Here is a aspx code:
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadPanelBar1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadPanelBar1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
</telerik:RadAjaxManager>
    <telerik:RadPanelBar ID="RadPanelBar1" Runat="server"  Skin="Office2007" ExpandMode="MultipleExpandedItems"
                style="margin-right: 80px" Width="90%" PersistStateInCookie="true">
        <Items>                
             <telerik:RadPanelItem runat="server" Text="Device Details">
                 <Items>
                    <telerik:RadPanelItem Value="DeviceDetails" runat="server"  PreventCollapse="false" Text="Device Details">
                         <ItemTemplate>
                             <div class="qsf-fb">
                                 <table  cellspacing="10">                                
                                   <tr>
                                         <td>
                                            <asp:Label runat="server" ID="Label20" AssociatedControlID="ddManufacturer">*Manufacturer:   </asp:Label>
                                         </td>
                                         <td>
                                             <img alt="Help" src="../Images/help.gif" title="Not Required if Work Authorization = Decommission or TADD4d Exlusion = No,Optional if                                                                 Work Authorization = Changes with Rename/Changes without Rename." />

                                               <telerik:RadComboBox ID="ddManufacturer" runat="server" DataSourceID="SqlZurichManufacture"
                                                            DataTextField="ADCSManufacture" DataValueField="ADCSManufacture"
                                                            Skin="Office2007" CausesValidation="False" Width="220px" MarkFirstMatch="True"
                                                            OnSelectedIndexChanged="ddManufacturer_SelectedIndexChanged"
                                                            AutoPostBack="True" EmptyMessage="Please Select..." EnableScreenBoundaryDetection="False">
                                               </telerik:RadComboBox>  
                                        </td>                                    
                                         <td>
                                             <asp:Label runat="server" ID="Label68" Visible="False" AssociatedControlID="ddManufacturer">*Manufacturer:   </asp:Label>
                                         </td>
                                        <td>
                                              <telerik:RadTextBox  ID="txtManufacture" CssClass="textInput" ValidationGroup="RefValidation" MaxLength="30" Skin="Office2007"
                                                     runat="server"  Width="220px" Visible="False"></telerik:RadTextBox>
                                                 <asp:RequiredFieldValidator runat="server"  ID="RequiredFieldValidator43"
                                                      ControlToValidate="txtManufacture" ErrorMessage="Manufacture is required" Text="*"></asp:RequiredFieldValidator>
                                         </td>
                                    </tr>
                                    <tr>
                                          <td>
                                            <asp:Label runat="server" ID="Label27" AssociatedControlID="ddModel">*Model:   </asp:Label>
                                         </td>
                                         <td>
                                             <img alt="Help" src="../Images/help.gif" title="Not Required if Work Authorization = Decommission or TADD4d Exlusion = No,Optional if Work Authorization = Changes with Rename/Changes without Rename." />
                                            <telerik:RadComboBox ID="ddModel" runat="server"
                                                            DataTextField="ADCSModel" DataValueField="ADCSModel" 
                                                            Skin="Office2007" CausesValidation="False" Width="220px" MarkFirstMatch="True"
                                                            AutoPostBack="True" EmptyMessage="Please Select..." EnableScreenBoundaryDetection="False">
                                               </telerik:RadComboBox>
<%--                                             <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="ddModel"
                                                    Display="Dynamic" ErrorMessage="Sub-Business Unit is Required. Please select from dropdown." Font-Names="Cambria"
                                                    Font-Size="small" InitialValue="Please Select...">
                                             </asp:RequiredFieldValidator>--%>
                                         </td>
                                         <td>
                                            <asp:Label runat="server" ID="Label65" Visible="False" AssociatedControlID="ddManufacturer">*Manufacturer:   </asp:Label>
                                         </td>
                                          <td>
                                              <telerik:RadTextBox  ID="txtModel" CssClass="textInput" ValidationGroup="RefValidation" MaxLength="30" Skin="Office2007"
                                                     runat="server"  Width="220px" Visible="False"></telerik:RadTextBox>
                                                 <asp:RequiredFieldValidator runat="server"  ID="RequiredFieldValidator1"
                                                      ControlToValidate="txtModel" ErrorMessage="Model is required" Text="*"></asp:RequiredFieldValidator>
                                         </td>
                                     </tr>                            
                             </table>
                             </div>
                        </ItemTemplate>
                   </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>                                                                                                                                                                                                                                               </Items>
            </telerik:RadPanelItem>
        </Items>
        <ExpandAnimation Type="InOutBounce" />
    </telerik:RadPanelBar>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               Here is the code behind code the the cascading combo in the RadPanelBarItem, but this does work perfectly:     

Protected Sub
        ddManufacturer_SelectedIndexChanged(ByVal o As Object, ByVal e As Telerik.Web.UI.RadComboBoxSelectedIndexChangedEventArgs)
        Dim editedItem As GridEditableItem = TryCast(TryCast(o, RadComboBox).NamingContainer, GridEditableItem)

        ' If 'Other' selected from Manufacture then show text box to allow typing in a value
        If e.Value = "Other" Then
            Dim txtManfu As RadTextBox = DirectCast(RadPanelBar1.FindItemByValue("DeviceDetails").FindControl("txtManufacture"), RadTextBox)
            Dim txtModel As RadTextBox = DirectCast(RadPanelBar1.FindItemByValue("DeviceDetails").FindControl("txtModel"), RadTextBox)
            txtManfu.Visible = True
            txtModel.Visible = True
        End If
        Dim ddModel As RadComboBox = DirectCast(RadPanelBar1.FindItemByValue("DeviceDetails").FindControl("ddModel"), RadComboBox)

        ddModel.Items.Clear()
        ddModel.DataSource = LoadModel(e.Value)
        ddModel.DataBind()

        Dim Panel1 As RadPanelItem = New RadPanelItem
        Panel1 = RadPanelBar1.FindItemByValue("DeviceDetails")
        '.FindItemByValue("ActivityInformation")
        If Panel1.Expanded = False Then
            Panel1.Expanded = True
            Panel1.Enabled = True
            Panel1.Selected = True
        End If
    End Sub                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             To summarize, the RadPanelbar collapses after a postback. Do I need to ajaxify the controls inside the panelbaritem?   I have tried several ideas like setting the PersistStateInCookies to true. Also tried to capture the collapse in the RadPanelBar PreRender    to stop the collapse and other ideas from this forum. Any suggestions would be appreciated. Thank you.
                                                                                

[Kate]

Hi Sushma,

I tested the code that you provided but since there were some missing references to a model that you created I substituted it with simple items(placed in the markup). However, I am not able to get the behavior that you are currently experiencing. Please take a look at the short video that I recorded here.

Regards,
Kate
Telerik

[Ed]

Hi Kate,

I am also having exactly the same problem as Sushma, this time using version 2014 Q2 with ASP.NET 4.5 and C# code.  Was there ever any resolution to this?

Thanks and regards,

Ed Graham

[Dimitar]

Hi Ed,

Unfortunately, the issue is not reproducible on my side. Could you test if the issue is reproducible on the PanelBar - Persist State in Cookie demo on your side. If it does, could you specify what browser and browser version you have used for reproduction.
And if the issue is not reproducible on the demo, in order to assist you in the most efficient way I would suggest that you provide us with a very simplified runnable project that demonstrates the behavior that you describe. It may include aspx, code behind, web.config, data source if needed, as well as any other files you find necessary. Thus, we could test it locally and determine what might be causing the issue that you are experiencing.

Regards,
Dimitar
Telerik

 

 

[Ed]

Hi Dimitar,

I have tried to upload a sample project illustrating the problem; however, this form only allows image files (.gif, .jpg, .png) to be uploaded.  Your post mentions the possibility of uploading ASPX code etc. -- can you explain how I do this?

During the course of preparing the sample project, I found that it was the following lines of CSS code were causing the problem:

<style type="text/css">
    div.RadPanelBar
    {
        white-space: nowrap !important;
        width: auto;
        display: inline-block;
    }
    * + html .RadPanelBar
    {
        display: inline;
    }
    div.RadPanelBar .rpSlide
    {
        display: block !important;
        height: 0;
    }
</style>

I added these styles in order to have the RadPanelBar sized according to the width of the widest item in it, as advised by Paul in the forum post http://www.telerik.com/forums/sizing-the-panel.  If I remove them, the RadPanelBar no longer collapses after post-back; but the sizing is no longer based on the width of the widest item, which I need.  So the issue boils down to whether it is possible to produce another version of this CSS code that keeps the width-dependent sizing but does not cause the panel bar to collapse on post-back.

Best wishes,

Ed

P.S.  The Telerik DLL that I am using is version 2014.2.618.45.

[Dimitar]

Hi Ed,

Indeed, the CSS from your last post is causing the issue - the line that sets height: 0; in particular. Without it, all RadPanelBar items would be initially expanded. But as it sets height: 0, it makes all items to appear collapsed, although some of them are expanded. The solution is to add another CSS declaration after the one with height: 0, which would set height auto for RadPanelBar items that have a rpExpanded class applied (indicating they are expanded). So the fixed CSS would be:

<style type="text/css">
    div.RadPanelBar {
        white-space: nowrap !important;
        width: auto;
        display: inline-block;
    }

    * + html .RadPanelBar {
        display: inline;
    }

    div.RadPanelBar .rpSlide {
        display: block !important;
        height: 0;
    }

    div.RadPanelBar .rpExpanded + .rpSlide {
        height: auto;
    }
</style>

As long as uploading sample project is concerned, you could open a support ticket and upload it there or you could store it over DropBox or Google Drive and share a link to it.

Regards,
Dimitar
Telerik

 

 

[Ed]

Wonderful!  That's fixed it.  Thank you very much.