|
|
Rank: Newbie
Groups: Member
Joined: 12/4/2009
Posts: 5
|
Page Environment of the control:The page uses a MasterPage. The page calls a database and dynamically builds tabs (TabPanels within a TabContainer) based on the list of categories returned by the database. When the user clicks on a category (tab) a GridView is dynamically built inside the TabPanel with a list of items found in that category. Clicking the “Details” link button launches a popup of the item’s details… including an image of the item. The Item Details Popup uses a ModalPopupExtender from the AjaxControlToolkit. The popup consists of a Panel used as a wrapper for the FormView. Inside the FormView is another Panel which wraps the ImageZoom control. The Panel around the ImageZoom control is used to set a fixed height and width for the form. The Item Details Popup is outside of the TabContainer control. The Issue:The first time the Item Details Popup is used, the ImageZoom control functions normally, i.e., the cursor shows a magnifying glass when hovering over the image and on the click event the big image pops out. However, after closing the Item Details Popup and clicking on another popup, the ImageZoom control no long shows the magnifying glass on hover nor does the big image pop out on the click event. Clicking the same item, clicking a different item, or selecting an item in a different tab does not cause the ImageZoom control to function correctly after the first rendering of the popup. The only way to get it to work again (and just for one selection) is to navigate away from the page and then return to it. Things I have tried:Replacing the Panels around the FormView and ImageZoom controls with CallbackPanels.
Code: HTML/ASPX
<asp:Panel ID="pnlItemDetails" runat="server" GroupingText="Item Details"
CssClass="panel modalPopup" HorizontalAlign="Center"
Style="display: none" Width="80%">
<asp:FormView ID="fvItemDetails" runat="server"
AllowPaging="false" Width="100%"
DataKeyNames="ItemID" >
<ItemTemplate>
<table width="100%">
<tr>
<th width="20%" class="tableHeader">Photo of Item</th>
<th style="width:4%"> </th>
<th width="71%" class="tableHeader" colspan="2">Details of Item</th>
</tr>
<tr>
<td rowspan="8" style="vertical-align:top;">
<%--Panel is a container for the Photo--%>
<eo:CallbackPanel ID="pnlImageThumbnail" runat="server"
Height='<%# Unit.Pixel(Convert.ToInt32(ConfigurationManager.AppSettings["MaxImageHeight"])) %>'
Width='<%# Unit.Pixel(Convert.ToInt32(ConfigurationManager.AppSettings["MaxImageWidth"])) %>' >
<eo:ImageZoom ID="imgItemPhoto" runat="server" Enabled="true"
SmallImageUrl='<%# "ShowImage.ashx?id=" + Eval("ItemID") + "&type=thumbnail" %>'
BigImageUrl='<%# "ShowImage.ashx?id=" + Eval("ItemID") %>'
/>
<asp:HiddenField ID="hidImageType" runat="server" Value='<%# Eval("PictureType") %>' />
</eo:CallbackPanel>
</td>
</tr>
<%--Remainder of FormView Columns--%>
<tr><td class="fvLabel" style="width:15%">Display Title:</td>
<td class="fvField"style="width:56%"><asp:Label ID="lblDisplayTitle" runat="server" Text='<%# Eval("DisplayTitle") %>' /></td>
</tr>
<tr><td class="fvLabel">Description:</td>
<td class="fvField"><asp:Label ID="lblDescription" runat="server" Text='<%# Eval("Description") %>' /></td>
</tr>
<tr><td class="fvLabel">Condition:</td>
<td class="fvField"><asp:Label ID="lblCondition" runat="server" Text='<%# Eval("Condition")%>' /></td>
</tr>
<tr><td class="fvLabel">Owner:</td>
<td class="fvField"><asp:Label ID="lblOwner" runat="server" Text='<%# Eval("Owner") %>' /></td>
</tr>
<tr><td class="fvLabel">Owner's Email:</td>
<td class="fvField"><asp:Label ID="lblOwnerEmail" runat="server" Text='<%# Eval("Email") %>' /></td>
</tr>
<tr><td class="fvLabel">On behalf of:</td>
<td class="fvField"><asp:Label ID="lblOnBehalfOf" runat="server" Text='<%# Eval("OnBehalfOf") %>' /></td>
</tr>
<tr><td class="fvLabel">Date Submitted:</td>
<td class="fvField"><asp:Label ID="lblDateSubmitted" runat="server" Text='<%# Eval("DateCreated", "{0:d}")%>' /></td>
</tr>
<tr><td colspan="4"><hr width="100%" /></td></tr>
</table>
</ItemTemplate>
</asp:FormView>
<%--Buttons for Details--%>
<table style="width:100%;">
<tr>
<td align="center">
<div style="width:100%;">
<asp:Button ID="btnClose" runat="server" Text="Close" CssClass="Button"
CausesValidation="false" OnClick="btnClose_Click" />
<span style="width:100px"> </span>
<asp:Button ID="btnRequest" runat="server" Text="I Want This" CssClass="Button"
CausesValidation="false" OnClick="btnRequest_Click"/>
</div>
</td>
</tr>
</table>
</asp:Panel>
<asp:LinkButton ID="btnDummy" runat="server" Text="" style="display:none" />
<ajax:ModalPopupExtender ID="mpeItemDetails" runat="server"
BackgroundCssClass="modalBackground" DynamicServicePath="" Enabled="True"
TargetControlID="btnDummy"
PopupControlID="pnlItemDetails" >
</ajax:ModalPopupExtender>
Any help you can give would be greatly appreciated. Thanks.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
Thanks for the detailed information. However we are not able to reproduce the issue here. Can you isolate the problem into a full test page so that we can run it here to see the problem?
Thanks!
|
|
Rank: Newbie
Groups: Member
Joined: 12/4/2009
Posts: 5
|
Here is the test aspx page:
Code: HTML/ASPX
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="items.aspx.cs" Inherits="items" %>
<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajax" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<eo:ScriptManager ID="ScriptManager1" runat="server">
</eo:ScriptManager>
<script type="text/javascript">
//Retrieves the ClientID for a newly selected tab and returns it back to the server
function ActiveTabChanged(sender, e) {
__doPostBack('<%= tabCategories.ClientID %>', sender.get_activeTab().get_headerText());
}
</script>
<asp:UpdatePanel ID="upTabContainer" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<ajax:TabContainer ID="tabCategories" runat="server"
AutoPostBack="true"
ActiveTabIndex="0"
OnClientActiveTabChanged="ActiveTabChanged" >
<ajax:TabPanel ID="Test" runat="server" HeaderText="Test Tab" >
<HeaderTemplate>
Test Tab
</HeaderTemplate>
<ContentTemplate>
<table width="90%; padding:2px 12px;">
<tr>
<td>First Item</td>
<td>Description of first item</td>
<td>
<asp:LinkButton ID="btnOne" runat="server" Text="Details"
OnClick="btnDetail_Click" />
</td>
</tr>
<tr>
<td>Second Item</td>
<td>Description of second item</td>
<td class="style1">
<asp:LinkButton ID="btnTwo" runat="server" Text="Details"
OnClick="btnDetail_Click" />
</td>
</tr>
</table>
</ContentTemplate>
</ajax:TabPanel>
<%--CATEGORY TABS CREATED HERE--%>
</ajax:TabContainer>
</ContentTemplate>
</asp:UpdatePanel>
<%--Item Details Popup--%>
<asp:Panel ID="pnlItemDetails" runat="server" GroupingText="Item Details"
CssClass="panel modalPopup" HorizontalAlign="Center"
Style="display: none" Width="80%">
<asp:FormView ID="fvItemDetails" runat="server"
AllowPaging="false" Width="100%"
DataKeyNames="ItemID" OnItemCommand="fvItemDetails_ItemCommand" >
<ItemTemplate>
<table width="100%">
<tr>
<th width="20%" class="tableHeader">Photo of Item</th>
<th width="71%" class="tableHeader" colspan="2">Details of Item</th>
</tr>
<tr>
<td rowspan="8" style="vertical-align:top;">
<%--Panel container for image--%>
<eo:CallbackPanel ID="pnlImageThumbnail" runat="server"
Height="200"
Width="150" >
<eo:ImageZoom ID="imgItemPhoto" runat="server" Enabled="true"
SmallImageUrl="Images/sm_image.jpg"
BigImageUrl="Images/lg_image.jpg" />
</eo:CallbackPanel>
</td>
</tr>
<%--Remainder of FormView Columns--%>
<tr><td class="fvLabel" style="width:15%">Display Title:</td>
<td class="fvField"style="width:56%"><asp:Label ID="lblDisplayTitle" runat="server" Text='<%# Eval("DisplayTitle") %>' /></td>
</tr>
<tr><td class="fvLabel">Description:</td>
<td class="fvField"><asp:Label ID="lblDescription" runat="server" Text='<%# Eval("Description") %>' /></td>
</tr>
<tr><td class="fvLabel">Condition:</td>
<td class="fvField"><asp:Label ID="lblCondition" runat="server" Text='<%# Eval("Condition")%>' /></td>
</tr>
<tr><td class="fvLabel">Owner:</td>
<td class="fvField"><asp:Label ID="lblOwner" runat="server" Text='<%# Eval("Owner") %>' /></td>
</tr>
<tr><td class="fvLabel">Owner's Email:</td>
<td class="fvField"><asp:Label ID="lblOwnerEmail" runat="server" Text='<%# Eval("Email") %>' /></td>
</tr>
<tr><td class="fvLabel">On behalf of:</td>
<td class="fvField"><asp:Label ID="lblOnBehalfOf" runat="server" Text='<%# Eval("OnBehalfOf") %>' /></td>
</tr>
<tr><td class="fvLabel">Date Submitted:</td>
<td class="fvField"><asp:Label ID="lblDateSubmitted" runat="server" Text='<%# Eval("DateCreated", "{0:d}")%>' /></td>
</tr>
<tr><td colspan="4"><hr width="100%" /></td></tr>
<%--Buttons for Item Details--%>
<tr>
<td colspan="4" align="center">
<div style="width:100%;">
<asp:Button ID="btnClose" RunAt="server"
CausesValidation="false"
Text="Close"
CommandName="Close"/>
<span id="spacer" style="padding:0 20px"> </span>
<asp:Button ID="btnRequestItem" RunAt="server"
CausesValidation="false"
Text="Request Item"
CommandName="Request"/>
</div>
</td>
</tr>
</table>
</ItemTemplate>
</asp:FormView>
</asp:Panel>
<asp:LinkButton ID="btnDummy" runat="server" Text="" style="display:none" />
<ajax:ModalPopupExtender ID="mpeItemDetails" runat="server"
BackgroundCssClass="modalBackground" DynamicServicePath="" Enabled="True"
TargetControlID="btnDummy"
PopupControlID="pnlItemDetails" >
</ajax:ModalPopupExtender>
</asp:Content>
Here is the code behind:
Code: C#
using System;
using System.Data;
using System.Web.UI.WebControls;
using AjaxControlToolkit;
using EO.Web;
public partial class items : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnDetail_Click(object sender, EventArgs e)
{
fvItemDetails.DataSource = CreateDataSource();
fvItemDetails.DataBind();
mpeItemDetails.Show();
}
private DataTable CreateDataSource()
{
DataTable dt = new DataTable();
dt.Columns.Add("DisplayTitle", typeof(string));
dt.Columns.Add("Description", typeof(string));
dt.Columns.Add("Condition", typeof(string));
dt.Columns.Add("Owner", typeof(string));
dt.Columns.Add("Email", typeof(string));
dt.Columns.Add("OnBehalfOf", typeof(string));
dt.Columns.Add("DateCreated", typeof(string));
dt.Columns.Add("ItemID", typeof(string));
DataRow row = dt.NewRow();
row["DisplayTitle"] = "Item name";
row["Description"] = "Item's description";
row["Condition"] = "Good";
row["Owner"] = "John Doe";
row["Email"] = "john.doe@somewhere.com";
row["OnBehalfOf"] = "";
row["DateCreated"] = "January 12, 2010";
row["ItemID"] = "12";
dt.Rows.Add(row);
return dt;
}
protected void fvItemDetails_ItemCommand(object sender, FormViewCommandEventArgs e)
{
switch (e.CommandName)
{
case "Close":
mpeItemDetails.Hide();
break;
case "Request":
mpeItemDetails.Hide();
//Process request
break;
}
}
}
Here is the style sheet used for the popup... just in case:
Code: CSS
.panel fieldset
{
border:solid 1px #1C3A69;
padding:20px 10px 10px 10px;
margin:10px 20px 10px 20px;
}
/* Affects GroupText settings */
.panel legend
{
font-size:14pt;
font-style:italic;
font-weight:bold;
color:#1C3A69;
letter-spacing:1px;
word-spacing:3px;
}
/* Modalpopup Styles */
.modalBackground {
background-color:Gray;
filter:alpha(opacity=40);
opacity:0.4;
}
.modalPopup {
position:relative;
background-color:#EED;
border:solid 2px #1C3A69;
padding:3px;
}
The images for the ImageZoom in the test page are hard coded, and you can set them to what you have. I also figured that you can create any MasterPage for the test page. Thanks again for looking at this.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
We tried to run the page here but noticed that the FormView is not updating. We moved it inside the UpdatePanel so that it updates, but then everything appears to working fine. Can you check if you see the same behavior?
Thanks!
|
|
Rank: Newbie
Groups: Member
Joined: 12/4/2009
Posts: 5
|
Thank you for your help. I am still not getting the ImageZoom to work properly. The first time the Item Details Popup is called, it works fine. But any other use of the popup still renders the ImageZoom disfunctional. Just to make sure I replicated your modifications, I'll review what I modified. Moved the ending ContentTemplate and UpdatePanel tags from just after the ending TabContainer tag to before the ending Content tag, incorporating the entire page into the UpdatePanel. From this:
Code: HTML/ASPX
<asp:Content ...>
<asp:UpdatePanel ...>
<ContentTemplate>
<ajax:TabContainer ...>
</ajax:TabContainer>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Panel ...>
<asp:FormView ...>
<ItemTemplate>
</ItemTemplate>
</asp:FormView>
</asp:Panel>
<ajax:ModalPopupExtender>
</ajax:ModalPopupExtender>
</asp:Content>
To this:
Code: HTML/ASPX
<asp:Content ...>
<asp:UpdatePanel ...>
<ContentTemplate>
<ajax:TabContainer ...>
</ajax:TabContainer>
<asp:Panel ...>
<asp:FormView ...>
<ItemTemplate>
</ItemTemplate>
</asp:FormView>
</asp:Panel>
<ajax:ModalPopupExtender>
</ajax:ModalPopupExtender>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
I also created just a bare-bones Master page:
Code: HTML/ASPX
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage2" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" >
</asp:ScriptManager>
<div>
<p>Master Page Area</p>
</div>
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
But I am still having the same problems. Are there any setting in these pages that differ from the pages you created? I am also working with IE 7... if that makes a difference. I know it is going to be some simple little thing that tripped it up. Again... thanks for your help.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
Can you put them together as a test project and then send us the test project? We will PM you as to where to send.
Thanks!
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
We have looked into the test project you sent to us. The problem is caused by AJAX Toolkit build 3.0.30930. We were testing with AJAX Toolkit 3.0.30512, which works fine.
The new version of AJAX Toolkit moves the modal extender's content (in this case pnlItemDetails) from its original location in the document to a direct child of the form element. This changes the parent/child relationship of controls and causes a number of issues. For example, btnClose supposes to trigger an AJAX callback because it is inside the AJAX UpdatePanel. Indeed it works this way in version 3.0.30512. However in the new version it triggers a full page post back because modal extender moved the button out of the UpdatePanel. Our controls also rely on the parent/child relationship to determine whether the control needs to be unloaded during an AJAX callback. Thus a change of the parent/child relationship broke our controls as well.
We are changing our code to cope with this situation and should be able to provide you an update build soon.
Thanks!
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
We have posted a new build (2007.0.50) that should address this issue. Please download it from our download page and let us know how it goes.
Thanks!
|
|
Rank: Newbie
Groups: Member
Joined: 12/4/2009
Posts: 5
|
Just to close out this post with the final resolution to the ImageZoom issue. The original structure was that the ImageZoom control was placed inside a FormView which was wrapped inside a Panel. The Panel was launched as a popup via an ajax ModalPopupExtender. And this was all contained inside an UpdatePanel. This resulted issues between the PopupExtender and the UpdatePanel.
The Final Solution:
Placed the FormView inside the EO Dialog control, eliminating the use of the UpdatePanel and the PopupExtender. In doing so, the ImageZoom control always functioned correctly even when changing between the TabPanels.
================
The support techs who worked with me on this issue were awesome. It was because of their suggestion that the Dialog control was used. I appreciated their expertise and the explanation of what was going on between all these ajax controls.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Thank you very much for the update. The information will be very useful for other users who run into similar problem. We are glad that everything is working for you now.
|
|