Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

RadAjaxPanel + RadPanelItem strange expand effect

3 Answers 148 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Francesco
Top achievements
Rank 1
Francesco asked on 14 Jun 2011, 05:17 PM
PanelBar.png
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?

3 Answers, 1 is accepted

Sort by
0
Kate
Telerik team
answered on 20 Jun 2011, 10:25 AM
PanelBarAjaxPanel.zip
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.

0
Francesco
Top achievements
Rank 1
answered on 21 Jun 2011, 03:36 PM
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";
    }
}

0
Dimitar Terziev
Telerik team
answered on 27 Jun 2011, 04:25 PM
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.

Tags
PanelBar
Asked by
Francesco
Top achievements
Rank 1
Answers by
Kate
Telerik team
Francesco
Top achievements
Rank 1
Dimitar Terziev
Telerik team
Share this question
or