|
|
Rank: Advanced Member
Groups: Member
Joined: 8/24/2007
Posts: 130
|
Hi,
I am developing a page that progressively renders itself as the user fills in various form elements. In order to do this, I decided to use the SlideMenu control in order to group areas of functionality and allow the user to easily hide and expand them. The SlideMenu is held within an CallbackPanel.
This all works well, however when the user reaches a cetain point in the form, vertical scrolling is required. Although I have set MaintainScrollBackPositionOnPostback to true, I am finding that the scroll position is never saved. However, when I remove the SlideMenu, and replace the CustomItem elements with Panels, the scroll position is saved.
Is there any way to get around this issue? I have tried replacing the SlideMenu with the ajax toolkit Accordion control, but this does not seem to work within the CallbackPanel.
Regards
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,195
|
Hi,
Can you put together a page that demonstrates the problem? We do not know what to suggest yet, but if we have a test page, we can debug into it and see what we can find.
Thanks!
|
|
Rank: Advanced Member
Groups: Member
Joined: 8/24/2007
Posts: 130
|
Hi, I have put together an example demonstrating the issue. However, in constructing this example, I have managed to narrow down the problem. If I do not supply expand and collapse images, then the scroll position is saved. If I suppy the images (as I do in my original code) then the issue occurs. Code below:
Code: HTML/ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="IIPay.Web.WebForm1" %>
<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
table.standardTable
{
margin-top: 10px;
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
table.standardTable td.label
{
text-align: right;
width: 50%;
padding: 5px;
}
table.standardTable td.control
{
padding: 5px;
}
div.mainPanel {
width: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<eo:CallbackPanel Width="100%" ID="callBackPanel" runat="server" Triggers="{ControlID:pnlMain;Parameter:}">
<asp:Panel runat="server" ID="pnlMain" CssClass="mainPanel">
<eo:SlideMenu ID="slideMenu" runat="server" ControlSkinID="None" SingleExpand="False">
<topgroup>
<Items>
<eo:MenuItem Text-Html="Panel One" Expanded="True">
<SubMenu>
<Items>
<eo:MenuItem CustomItemID="ciPanelOne" />
</Items>
</SubMenu>
</eo:MenuItem>
<eo:MenuItem Text-Html="Panel Two" Expanded="True" Visible="False">
<SubMenu>
<Items>
<eo:MenuItem CustomItemID="ciPanelTwo" />
</Items>
</SubMenu>
</eo:MenuItem>
<eo:MenuItem Text-Html="Panel Three" Expanded="True" Visible="False">
<SubMenu>
<Items>
<eo:MenuItem CustomItemID="ciPanelThree" />
</Items>
</SubMenu>
</eo:MenuItem>
</Items>
</topgroup>
<lookitems>
<eo:MenuItem ItemID="_TopGroup">
<SubMenu Style-CssText="color:white; background-color:#E9EBF5;border:solid 1px #353F7D;padding:4px;" ItemSpacing="10" />
</eo:MenuItem>
<eo:MenuItem Height="25" RightIcon-Url="~/images/workspaceexpanded.png" RightIcon-DisabledUrl="~/images/workspacedisabled.png"
RightIcon-ExpandedUrl="~/images/workspacecollapsed.png"
ItemID="_TopLevelItem" NormalStyle-CssText="cursor:pointer; background-color:#353F7D;" Image-Mode="ItemBackground">
<SubMenu Style-CssText="color:#353F7D;" ItemSpacing="0" />
</eo:MenuItem>
</lookitems>
</eo:SlideMenu>
<eo:CustomItem ID="ciPanelOne" runat="server">
<asp:Table ID="tblPanelOne" runat="server" CssClass="standardTable">
<asp:TableRow>
<asp:TableCell CssClass="label">
Select One:
</asp:TableCell>
<asp:TableCell CssClass="control">
<asp:DropDownList CssClass="standardBorder" ID="ddOne" AutoPostBack="True" OnSelectedIndexChanged="OnPanelOne"
runat="server" Width="150px">
<asp:ListItem Text="" Selected="True" />
<asp:ListItem Text="One" Value="One" />
<asp:ListItem Text="Two" Value="Two" />
<asp:ListItem Text="Three" Value="Three" />
</asp:DropDownList>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell CssClass="label">
Select Two:
</asp:TableCell>
<asp:TableCell CssClass="control">
<asp:DropDownList CssClass="standardBorder" ID="ddTwo" AutoPostBack="True" OnSelectedIndexChanged="OnPanelOne"
runat="server" Width="150px">
<asp:ListItem Text="" Selected="True" />
<asp:ListItem Text="One" Value="One" />
<asp:ListItem Text="Two" Value="Two" />
<asp:ListItem Text="Three" Value="Three" />
</asp:DropDownList>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell CssClass="label">
Select Three:
</asp:TableCell>
<asp:TableCell CssClass="control">
<asp:DropDownList CssClass="standardBorder" ID="ddThree" AutoPostBack="True" OnSelectedIndexChanged="OnPanelOne"
runat="server" Width="150px">
<asp:ListItem Text="" Selected="True" />
<asp:ListItem Text="One" Value="One" />
<asp:ListItem Text="Two" Value="Two" />
<asp:ListItem Text="Three" Value="Three" />
</asp:DropDownList>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell CssClass="label">
Select Four:
</asp:TableCell>
<asp:TableCell CssClass="control">
<asp:DropDownList CssClass="standardBorder" ID="ddFour" AutoPostBack="True" OnSelectedIndexChanged="OnPanelOne"
runat="server" Width="150px">
<asp:ListItem Text="" Selected="True" />
<asp:ListItem Text="One" Value="One" />
<asp:ListItem Text="Two" Value="Two" />
<asp:ListItem Text="Three" Value="Three" />
</asp:DropDownList>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell CssClass="label">
Select Five:
</asp:TableCell>
<asp:TableCell CssClass="control">
<asp:DropDownList CssClass="standardBorder" ID="ddFive" AutoPostBack="True" OnSelectedIndexChanged="OnPanelOne"
runat="server" Width="150px">
<asp:ListItem Text="" Selected="True" />
<asp:ListItem Text="One" Value="One" />
<asp:ListItem Text="Two" Value="Two" />
<asp:ListItem Text="Three" Value="Three" />
</asp:DropDownList>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell CssClass="label">
Select Six:
</asp:TableCell>
<asp:TableCell CssClass="control">
<asp:DropDownList CssClass="standardBorder" ID="ddSix" AutoPostBack="True" OnSelectedIndexChanged="OnPanelOne"
runat="server" Width="150px">
<asp:ListItem Text="" Selected="True" />
<asp:ListItem Text="One" Value="One" />
<asp:ListItem Text="Two" Value="Two" />
<asp:ListItem Text="Three" Value="Three" />
</asp:DropDownList>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</eo:CustomItem>
<eo:CustomItem ID="ciPanelTwo" runat="server">
<asp:Table ID="tblPanelTwo" runat="server" CssClass="standardTable" Visible="False">
<asp:TableRow>
<asp:TableCell CssClass="label">
Select One:
</asp:TableCell>
<asp:TableCell CssClass="control">
<asp:DropDownList CssClass="standardBorder" ID="ddSeven" AutoPostBack="True" OnSelectedIndexChanged="OnPanelTwo"
runat="server" Width="150px">
<asp:ListItem Text="" Selected="True" />
<asp:ListItem Text="One" Value="One" />
<asp:ListItem Text="Two" Value="Two" />
<asp:ListItem Text="Three" Value="Three" />
</asp:DropDownList>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell CssClass="label">
Select Two:
</asp:TableCell>
<asp:TableCell CssClass="control">
<asp:DropDownList CssClass="standardBorder" ID="ddEight" AutoPostBack="True" OnSelectedIndexChanged="OnPanelTwo"
runat="server" Width="150px">
<asp:ListItem Text="" Selected="True" />
<asp:ListItem Text="One" Value="One" />
<asp:ListItem Text="Two" Value="Two" />
<asp:ListItem Text="Three" Value="Three" />
</asp:DropDownList>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell CssClass="label">
Select Three:
</asp:TableCell>
<asp:TableCell CssClass="control">
<asp:DropDownList CssClass="standardBorder" ID="ddNine" AutoPostBack="True" OnSelectedIndexChanged="OnPanelTwo"
runat="server" Width="150px">
<asp:ListItem Text="" Selected="True" />
<asp:ListItem Text="One" Value="One" />
<asp:ListItem Text="Two" Value="Two" />
<asp:ListItem Text="Three" Value="Three" />
</asp:DropDownList>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell CssClass="label">
Select Four:
</asp:TableCell>
<asp:TableCell CssClass="control">
<asp:DropDownList CssClass="standardBorder" ID="ddTen" AutoPostBack="True" OnSelectedIndexChanged="OnPanelTwo"
runat="server" Width="150px">
<asp:ListItem Text="" Selected="True" />
<asp:ListItem Text="One" Value="One" />
<asp:ListItem Text="Two" Value="Two" />
<asp:ListItem Text="Three" Value="Three" />
</asp:DropDownList>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell CssClass="label">
Select Five:
</asp:TableCell>
<asp:TableCell CssClass="control">
<asp:DropDownList CssClass="standardBorder" ID="ddEleven" AutoPostBack="True" OnSelectedIndexChanged="OnPanelTwo"
runat="server" Width="150px">
<asp:ListItem Text="" Selected="True" />
<asp:ListItem Text="One" Value="One" />
<asp:ListItem Text="Two" Value="Two" />
<asp:ListItem Text="Three" Value="Three" />
</asp:DropDownList>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell CssClass="label">
Select Six:
</asp:TableCell>
<asp:TableCell CssClass="control">
<asp:DropDownList CssClass="standardBorder" ID="ddTwelve" AutoPostBack="True" OnSelectedIndexChanged="OnPanelTwo"
runat="server" Width="150px">
<asp:ListItem Text="" Selected="True" />
<asp:ListItem Text="One" Value="One" />
<asp:ListItem Text="Two" Value="Two" />
<asp:ListItem Text="Three" Value="Three" />
</asp:DropDownList>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</eo:CustomItem>
<eo:CustomItem ID="ciPanelThree" runat="server">
<asp:Table ID="tblPanelThree" runat="server" CssClass="standardTable" Visible="False">
<asp:TableRow>
<asp:TableCell CssClass="label">
Select One:
</asp:TableCell>
<asp:TableCell CssClass="control">
<asp:DropDownList CssClass="standardBorder" ID="ddThirteen" AutoPostBack="True" OnSelectedIndexChanged="OnPanelThree"
runat="server" Width="150px">
<asp:ListItem Text="" Selected="True" />
<asp:ListItem Text="One" Value="One" />
<asp:ListItem Text="Two" Value="Two" />
<asp:ListItem Text="Three" Value="Three" />
</asp:DropDownList>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow ID="rowTwo" runat="server" Visible="False">
<asp:TableCell CssClass="label">
Select Two:
</asp:TableCell>
<asp:TableCell CssClass="control">
<asp:DropDownList CssClass="standardBorder" ID="ddFourteen" AutoPostBack="True" OnSelectedIndexChanged="OnPanelThree"
runat="server" Width="150px">
<asp:ListItem Text="" Selected="True" />
<asp:ListItem Text="One" Value="One" />
<asp:ListItem Text="Two" Value="Two" />
<asp:ListItem Text="Three" Value="Three" />
</asp:DropDownList>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow ID="rowThree" runat="server" Visible="False">
<asp:TableCell CssClass="label">
Select Three:
</asp:TableCell>
<asp:TableCell CssClass="control">
<asp:DropDownList CssClass="standardBorder" ID="ddFifteen" AutoPostBack="True" OnSelectedIndexChanged="OnPanelThree"
runat="server" Width="150px">
<asp:ListItem Text="" Selected="True" />
<asp:ListItem Text="One" Value="One" />
<asp:ListItem Text="Two" Value="Two" />
<asp:ListItem Text="Three" Value="Three" />
</asp:DropDownList>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow ID="rowFour" runat="server" Visible="False">
<asp:TableCell CssClass="label">
Select Four:
</asp:TableCell>
<asp:TableCell CssClass="control">
<asp:DropDownList CssClass="standardBorder" ID="ddSixteen" AutoPostBack="True" OnSelectedIndexChanged="OnPanelThree"
runat="server" Width="150px">
<asp:ListItem Text="" Selected="True" />
<asp:ListItem Text="One" Value="One" />
<asp:ListItem Text="Two" Value="Two" />
<asp:ListItem Text="Three" Value="Three" />
</asp:DropDownList>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow ID="rowFive" runat="server" Visible="False">
<asp:TableCell CssClass="label">
Select Five:
</asp:TableCell>
<asp:TableCell CssClass="control">
<asp:DropDownList CssClass="standardBorder" ID="ddSeventeen" AutoPostBack="True"
OnSelectedIndexChanged="OnPanelThree" runat="server" Width="150px">
<asp:ListItem Text="" Selected="True" />
<asp:ListItem Text="One" Value="One" />
<asp:ListItem Text="Two" Value="Two" />
<asp:ListItem Text="Three" Value="Three" />
</asp:DropDownList>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow ID="rowSix" runat="server" Visible="False">
<asp:TableCell CssClass="label">
Select Six:
</asp:TableCell>
<asp:TableCell CssClass="control">
<asp:DropDownList CssClass="standardBorder" ID="ddEighteen" AutoPostBack="True" OnSelectedIndexChanged="OnPanelThree"
runat="server" Width="150px">
<asp:ListItem Text="" Selected="True" />
<asp:ListItem Text="One" Value="One" />
<asp:ListItem Text="Two" Value="Two" />
<asp:ListItem Text="Three" Value="Three" />
</asp:DropDownList>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</eo:CustomItem>
</asp:Panel>
</eo:CallbackPanel>
</form>
</body>
</html>
Code: C#
using System;
using System.Web.UI;
namespace IIPay.Web
{
public partial class WebForm1 : Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void OnPanelOne(object sender, EventArgs e)
{
if(!string.IsNullOrEmpty(ddOne.SelectedValue) &&
!string.IsNullOrEmpty(ddTwo.SelectedValue) &&
!string.IsNullOrEmpty(ddThree.SelectedValue) &&
!string.IsNullOrEmpty(ddFour.SelectedValue) &&
!string.IsNullOrEmpty(ddFive.SelectedValue) &&
!string.IsNullOrEmpty(ddSix.SelectedValue))
{
slideMenu.Items[1].Visible = true;
tblPanelTwo.Visible = true;
}
}
protected void OnPanelTwo(object sender, EventArgs e)
{
if (!string.IsNullOrEmpty(ddSeven.SelectedValue) &&
!string.IsNullOrEmpty(ddEight.SelectedValue) &&
!string.IsNullOrEmpty(ddNine.SelectedValue) &&
!string.IsNullOrEmpty(ddTen.SelectedValue) &&
!string.IsNullOrEmpty(ddEleven.SelectedValue) &&
!string.IsNullOrEmpty(ddTwelve.SelectedValue))
{
slideMenu.Items[2].Visible = true;
tblPanelThree.Visible = true;
}
}
protected void OnPanelThree(object sender, EventArgs e)
{
if(sender == ddThirteen)
{
rowTwo.Visible = true;
}
if (sender == ddFourteen)
{
rowThree.Visible = true;
}
if (sender == ddFifteen)
{
rowFour.Visible = true;
}
if (sender == ddSixteen)
{
rowFive.Visible = true;
}
if (sender == ddSeventeen)
{
rowSix.Visible = true;
}
}
}
}
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,195
|
Hi,
What version of .NET are you running and what browser do you use?
Thanks!
|
|
Rank: Advanced Member
Groups: Member
Joined: 8/24/2007
Posts: 130
|
Hi,
I am running .net 4 on windows 7 (x64). I am seeing this issue on IE9 and FF13.
I am running EO version 10.0.20.2
|
|
Rank: Advanced Member
Groups: Member
Joined: 8/24/2007
Posts: 130
|
Hi,
Just tried the same page on IE8 running on Windows XP and the issue is also there.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,195
|
Hi,
Thanks for the additional information. The problem appears to be there no matter what (this contradicts with your observation where the problem would go way if you don't use images). We are looking into this and see what we can do.
Thanks!
|
|
Rank: Advanced Member
Groups: Member
Joined: 8/24/2007
Posts: 130
|
Hi,
I definitely only get the issue when I specify images. It occurs to me that you may need to add the "maintainScrollPositionOnPostBack=true" directive to the @Page section in the aspx of my example (I have this set up in my web.config).
Regards.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,195
|
Hi,
We don't doubt what you see. However we wanted to make sure that we see exactly the same thing as you do, and if we see something differently, we want to find out why. It is possible for you to send us a small test project so that we can try that here? Please let us know if you need our email address.
Thanks!
|
|
Rank: Advanced Member
Groups: Member
Joined: 8/24/2007
Posts: 130
|
Hi,
I have put together a project for you, but don't have your email address (size is 2M). I will send it when I receive this.
Cheers,
Phil
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,195
|
Hi,
We have looked into the code you sent to us. The issue doesn't seem to have anything to do with maintainScrollPositionOnPostBack.
The problem occurs when the CallbackPanel replacing the old SlideMenu with the new SlideMenu. The new SlideMenu starts as an empty DIV, with all menu items immediately being dynamically created with JavaScript. For some reason IE decides to delay calcuating the layout of SlideMenu to a later time when images are involved. This causes a brieft moment when the SlideMenu is just an empty DIV. At that moment IE decides that it needs to reposition the scroll position.
We have no way to precisely control when and how IE executes its layout engine. So the best workaround for you to do is to place the slide menu inside a DIV with an explicitly height attribute. That will ensure the space for SlideMenu is always reserved even if the slide menu has not been fully initialized/layouted.
Hope this helps. Please feel free to let us know if you have any more questions.
Thanks!
|
|
Rank: Advanced Member
Groups: Member
Joined: 8/24/2007
Posts: 130
|
That works for me...
Thanks for the help.
|
|