RadAjaxPanel + RadPanelItem strange expand effect

4 posts, 0 answers
  1. Francesco
    Francesco avatar
    16 posts
    Member since:
    Mar 2011

    Posted 14 Jun 2011 Link to this post

    hi, hello i have 10 items and each one 1 RadPanel. 

    When I raise the click event on the server side and onIntemClick a grid is bind inside it. everything works fine.

    When I have many panels bar open the page becomes very long. When I click to expand the Panel Bar, the Page  move for a moment at the beginning and then it is repositioned on the panel giving a curious effect "Table Tennis". The URL appears a strange # as Mypage.aspx #. This does not occur WITHOUT the RadAjaxPAnel as with the Full post back you can not see the effect of expansion.

    this does not happen if the size of the panel bars does not exceed the length of the page.  How can we remove this "swap" of the page?

  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 20 Jun 2011 Link to this post

    Hi Francesco,

    I tried to reproduce the issue that you encounter but I am not able to get the behaviour that you describe. Please take a look at the page that I have attached and let me know if I am missing something in your scenario.

    Greetings,
    Kate
    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.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Francesco
    Francesco avatar
    16 posts
    Member since:
    Mar 2011

    Posted 21 Jun 2011 Link to this post

    Hello, after 2 days of debugging I was able to isolate the problem. Occurs if there is one. Validator inside the net PanelBAr. I'm enclosing the code that reproduces the problem. To reproduce the anomaly follow these instructions
    1) click on the panel number 4 at the beginning of the page
    2) write something in the textbox to turn off the validator
    3) Click on the panels bottom of the page, you'll notice that the page moves to the topof the panel during the binding (few seconds) and finally moves down

    This project is in production for a few days and we have many customers from ourreport, I really hope you can give me a tip, thanks.

    P.S.
    I had already made a report of another problem always on PanelBAr, but I neverreceived a response
    http://www.telerik.com/account/support-tickets/view-ticket.aspx?threadid=406506

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
        <style type="text/css">
            .panelBoxOut
            {
                min-height: 30px;
            }
            .panelBoxIn
            {
                min-height: 200px;
            }
        </style>
    </head>
    <body>
     
        <script type="text/javascript">
            function OnExpand(sender, eventArgs) {
                //solo se è la prima volta che si apre!
                var item = eventArgs.get_item();
     
                if (item.get_value() == "0") {
                    sender._element.style.height = "90px";
                }
            }
     
            function OnCollapse(sender, eventArgs) {
                sender._element.style.height = "";
            }
     
            function OnClicking(sender, eventArgs) {
                //stop post back in
                var item = eventArgs.get_item();
     
                //se espanso collasso e stoppo pb
                if (item.get_expanded()) {
                    item.collapse();
                    eventArgs.set_cancel(true); // Cancel the postback
                } else
                //se collapse verifico se la griglia già c'è!
                {
                    //1 indica che la griglia è già stat bindata!
                    if (item.get_value() == "1") {
                        item.expand();
                        eventArgs.set_cancel(true); // Cancel the postback
                    }
                }
            }
     
        </script>
     
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
        </telerik:RadAjaxLoadingPanel>
        <div style="height: 1000px">
            <telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
                <telerik:RadPanelBar runat="server" ID="RadPanelBar1" CssClass="panelBoxOut" AllowCollapseAllItems="false"
                    Width="100%" OnClientItemExpand="OnExpand" OnClientItemCollapse="OnCollapse"
                    OnItemClick="RadPanelBarAnagrafe_ItemClick" OnClientItemClicking="OnClicking">
                    <Items>
                        <telerik:RadPanelItem Text="4) Anagrafe" Value="0">
                            <Items>
                                <telerik:RadPanelItem Value="Grid">
                                    <ItemTemplate>
                                        <div class="panelBoxIn">
                                            <asp:Label ID="Label2" runat="server" Text="Tipe text"></asp:Label>
                                            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="RequiredFieldValidator"
                                                ControlToValidate="TextBox1"></asp:RequiredFieldValidator>
                                            <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
                                        </div>
                                    </ItemTemplate>
                                </telerik:RadPanelItem>
                            </Items>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelBar>
            </telerik:RadAjaxPanel>
        </div>
        <div style="height: 100px">
            <div>
                <telerik:RadAjaxPanel ID="RadAjaxPanel1Contratti" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
                    <telerik:RadPanelBar runat="server" ID="RadPanelBarContratti" AllowCollapseAllItems="True"
                        Width="100%" CssClass="panelBoxOut" OnClientItemExpand="OnExpand" OnClientItemCollapse="OnCollapse"
                        OnItemClick="RadPanelBarContratti_ItemClick" OnClientItemClicking="OnClicking">
                        <Items>
                            <telerik:RadPanelItem Text="1) Contratti" Value="0">
                                <Items>
                                    <telerik:RadPanelItem Value="Grid">
                                        <ItemTemplate>
                                            <div class="panelBoxIn">                                         
                                                <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
                                            </div>
                                        </ItemTemplate>
                                    </telerik:RadPanelItem>
                                </Items>
                            </telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelBar>
                </telerik:RadAjaxPanel>
            </div>
            <div>
                <telerik:RadAjaxPanel ID="RadAjaxPanelFatture" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
                    <telerik:RadPanelBar runat="server" ID="RadPanelBarFatture" CssClass="panelBoxOut"
                        AllowCollapseAllItems="false" Width="100%" OnClientItemExpand="OnExpand" OnClientItemCollapse="OnCollapse"
                        OnItemClick="RadPanelBarFatture_ItemClick" OnClientItemClicking="OnClicking">
                        <Items>
                            <telerik:RadPanelItem Text="2) Fatture" Value="0">
                                <Items>
                                    <telerik:RadPanelItem Value="Grid">
                                        <ItemTemplate>
                                            <div class="panelBoxIn">                                         
                                                <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
                                            </div>
                                        </ItemTemplate>
                                    </telerik:RadPanelItem>
                                </Items>
                            </telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelBar>
                </telerik:RadAjaxPanel>
            </div>
            <div>
                <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
                    <telerik:RadPanelBar runat="server" ID="RadPanelBarBarAnagrafe" CssClass="panelBoxOut"
                        AllowCollapseAllItems="false" Width="100%" OnClientItemExpand="OnExpand" OnClientItemCollapse="OnCollapse"
                        OnItemClick="RadPanelBarAnagrafe_ItemClick" OnClientItemClicking="OnClicking">
                        <Items>
                            <telerik:RadPanelItem Text="3) Anagrafe" Value="0">
                                <Items>
                                    <telerik:RadPanelItem Value="Grid">
                                        <ItemTemplate>
                                            <div class="panelBoxIn">                                           
                                                <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
                                            </div>
                                        </ItemTemplate>
                                    </telerik:RadPanelItem>
                                </Items>
                            </telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelBar>
                </telerik:RadAjaxPanel>
            </div>
        </div>
        </div>
        </form>
    </body>
    </html>

    using System;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    using System.Data;
    using System.Configuration;
    using System.Web.Security;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using Telerik.Web.UI;
     
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }
     
        protected void RadPanelBarContratti_ItemClick(object sender, RadPanelBarEventArgs e)
        {      
           //Simulate grid bind time with thread
            System.Threading.Thread.Sleep(10000);
            Label lblContratti = (Label)RadPanelBarContratti.FindItemByValue("Grid").FindControl("Label1");
            lblContratti.Text = "Bind Finish!";
            e.Item.Value = "1";
        }
     
        protected void RadPanelBarFatture_ItemClick(object sender, RadPanelBarEventArgs e)
        {       
            //Simulate grid bind time with thread
            System.Threading.Thread.Sleep(3000);
            Label lblContratti = (Label)RadPanelBarFatture.FindItemByValue("Grid").FindControl("Label1");
            lblContratti.Text = "Bind Finish!";
            e.Item.Value = "1";
        }
     
        protected void RadPanelBarAnagrafe_ItemClick(object sender, RadPanelBarEventArgs e)
        {
            //Simulate grid bind time with thread
            System.Threading.Thread.Sleep(1000);
            Label lblContratti = (Label)RadPanelBarBarAnagrafe.FindItemByValue("Grid").FindControl("Label1");
            lblContratti.Text = "Bind Finish!";
            e.Item.Value = "1";
        }
    }

  5. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 27 Jun 2011 Link to this post

    Hello Francesco,

    The problem you are experiencing is definitely related to the required field validator that you are using. Apparently  when an ajax request is initiated the first panelbar gains the focus and when the response is returned the right panelbar is focused again.

    We are currently working on this issue, so once we have a solution I'll share it here.

    Greetings,
    Dimitar Terziev
    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.

Back to Top