RadPanelBar Collapses after Postback of controls inside a RadPanelitem

7 posts, 0 answers
  1. Sushma
    Sushma avatar
    1 posts
    Member since:
    May 2012

    Posted 27 Jan 2014 Link to this post

    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.
                                                                                    








  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 30 Jan 2014 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ed
    Ed avatar
    124 posts
    Member since:
    Jan 2008

    Posted 13 Aug 2014 in reply to Kate Link to this post

    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
  5. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 14 Aug 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Ed
    Ed avatar
    124 posts
    Member since:
    Jan 2008

    Posted 16 Aug 2014 in reply to Dimitar Link to this post

    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.
  7. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 18 Aug 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. Ed
    Ed avatar
    124 posts
    Member since:
    Jan 2008

    Posted 18 Aug 2014 in reply to Dimitar Link to this post

    Wonderful!  That's fixed it.  Thank you very much.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017