Modal popup and Gridview.OnSelectedIndexChanged Firefox problems

Hello there again!

I am building a gallery for a site and I am using a gridview to do this. The idea is to have a GridView which shows the gallery items, the user clicks anywhere on a line in the Gridview and a ModalPopup pops up to show the gallery item's details.

I am however encountering two problems:

1) The ModalPopup is somehow increasing the size of the whole page (Scrollbars appear or get larger) which causes it to center wrong and gives problems dragging it (While dragging the scrollbars resize which offsets the dragging and it ends up at an other place then you wanted it).

2) The ModalPopup is not being shown at all in Firefox when you click the Gridview. The Event fires, and it gets inside the if statement, but ModalPopup1.Show() simply does not work.

Any ideas?

Skorp

- Link:Here

- Code:

<%@dotnet.itags.org. Page Language="C#" MasterPageFile="../Ap.master" Title="DiceTroll Gallery" validateRequest="false" %
<%@dotnet.itags.org. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%@dotnet.itags.org. mastertype virtualpath="../Ap.master" %>
<%@dotnet.itags.org. Reference VirtualPath="../S.master" %>
<%@dotnet.itags.org. Import Namespace="System.Data.Odbc" %>
<%@dotnet.itags.org. Import Namespace="DTNameSpace" %
<script runat="server">
DTUser user;
DTSettings settings;
int ID;

protected void Page_Load(object sender, EventArgs e)
{
user = Master.Master.currUser;
settings = Master.Master.currSettings;

Load_DropDown();
Load_Grid();
}
void Load_Grid()
{
//Some SQL stuff
}
void Load_DropDown()
{
//Some SQL stuff
}
protected void DropDown_Event(Object sender, EventArgs e)
{
string SelectedCat = CatDropDown.SelectedValue;
if (SelectedCat != "Show All Galleries")
SqlDataSource1.SelectCommand = "//Some SQL stuff";
else
{
SqlDataSource1.SelectCommand = "//Some SQL stuff";
GridView1.DataBind();
}
Page.Focus();
}
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.DataItemIndex == -1)
return;

e.Row.Attributes.Add("onMouseOver",
"this.style.cursor='hand';");
e.Row.Attributes.Add("onclick",
this.GetPostBackClientEvent(GridView1,
"Select$" + e.Row.RowIndex.ToString()));
}
protected void GridView_SelectRow(object sender, EventArgs e)
{
GridViewRow row = ((GridView)sender).SelectedRow;
if (row != null)
{
ModalPopupExtender1.Show();
}
}
</script
<asp:content id="mainPageC" contentplaceholderid="mainPageCPH" runat="server">
<div class="tablecontent" style="margin-top: 20px; margin-bottom: 20px; margin-left: 20px;">
<asp:ScriptManager id="ScrMan1" runat="server" EnablePartialRendering="true" ></asp:ScriptManager>
<asp:UpdatePanel id="UpPan1" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:SqlDataSource ID="SqlDataSource2" Runat="server"
SelectCommand = "//Some SQL stuff" />

<b>Gallery Sections:</b><br />
<asp:DropDownList ID="CatDropDown" runat="server"
AutoPostBack="True"
OnSelectedIndexChanged="DropDown_Event"
DataSourceID="SqlDataSource2"
DataTextField="Category"
DataValueField="ID"
AppendDataBoundItems="true">
<asp:ListItem Value="Show All Galleries" Selected="true">Show All Galleries</asp:ListItem>
</asp:DropDownList><br /><br />
<asp:GridView ID="GridView1" Runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="False" AllowSorting="True" AllowPaging="True" DataKeyNames="ID" Width="90%" OnRowDataBound="GridView1_RowDataBound" OnSelectedIndexChanged="GridView_SelectRow">
<RowStyle backcolor="#E6E9EC" forecolor="#679DE7" Font-Bold="True" BorderColor="#E6E9EC" />
<AlternatingRowStyle backcolor="#CAD1D8" forecolor="#679DE7" Font-Bold="True" BorderColor="#CAD1D8" />
<HeaderStyle backcolor="#425674" forecolor="#FFFFFF" Font-Bold="True" Font-Underline="False" BorderColor="#679DE7" />
<Columns>
<asp:CommandField SelectText ="Select" ShowSelectButton="true" ItemStyle-CssClass = "HideButton" HeaderStyle-CssClass ="HideButton" />
<asp:imagefield dataimageurlfield="thumbnail"
dataimageurlformatstring="http://www.dicetroll.com/thumbnail_images/{0}"
alternatetext="Image"
nulldisplaytext="No image on file."
headertext="Image" />
<asp:BoundField DataField="title" HeaderText="Title" SortExpression="title" />
<asp:BoundField DataField="vchnickname" HeaderText="Author" SortExpression="vchnickname" />
<asp:BoundField DataField="Date_approved" HeaderText="Date" SortExpression="Date_approved" />
<asp:BoundField DataField="views" HeaderText="Views" SortExpression="views" />
<asp:BoundField DataField="nCount" HeaderText="Reviews" SortExpression="nCount" />
<asp:BoundField DataField="nScore" HeaderText="Score" SortExpression="nScore" />
</Columns>
</asp:GridView><br />
<asp:SqlDataSource ID="SqlDataSource1" Runat="server"
SelectCommand = "//Some SQL stuff" />

<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
PopupControlID="GalleryPanel"
PopupDragHandleControlID="GalleryHeader"
CancelControlID="GalleryClose"
OkControlID="GalleryClose"
TargetControlID="HiddenModalTrigger"
DropShadow="true" />
<asp:Button ID="HiddenModalTrigger" runat="server" Style="display: none;" />

<asp:Panel ID="GalleryPanel" runat="server" CssClass="ModalPopup" style="display:none">
<asp:Panel id="GalleryHeader" runat="server">
<div style="width: 100%; text-align: right; background-color: #425674; border: 1px #CAD1D8;">
<asp:LinkButton ID="GalleryClose" runat="server" Layout="not set" style="font: bold 14px arial; color: White; text-decoration: none;">Close</asp:LinkButton>
</div>
</asp:Panel>
<p style="font-family: georia, serif; font-size: 20px; font-weight: bold; font-variant:small-caps; text-decoration: none; color: #B82223;">
<asp:Label ID="GalleryTitle" runat="server" Text="" />
</p>
<asp:Image ID="GalleryPic" runat="server" /><br />
<asp:Label ID="GalleryText" runat="server" Text="" /></br />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress id="UpProg1" runat="server">
<ProgressTemplate>
<div style="width:100%; height: 50px; background-image: url(Loading.gif); background-position: center center; background-repeat:no-repeat;"></div>
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</asp:content>

I can answer the FireFox question - Modal is broke with Firefox 2.0.0.2 (prev versions should work fine) MSFT and FF are supposedly working together to resolve the issue...

Your other issue is most likely how your CSS is structured...causing the scrolling... setting explicit width and height in pixels may resolve the issue. Considering this is displaying images - if the images vary in size could possibly end itself to this particular behavior...

Well, that wasn't really the news I was hoping to hear abour FF... Is there any ETA on the fix, or is it such low priority that we can wait forever?

The CSS I am using is the following, the images will be having a fixed width but variable height:

.ModalPopup
{
width: 750px;
background-color: #E6E9EC;
font-family: georia, serif;
font-size: 12px;
text-decoration: none;
text-align: left;
color: #000000;
border: 1px solid #CDDFF7;
}

I don't really see anything wrong with it other then setting no height, so I tried setting it but it still showed the same problem.

Modal popup dynamic content & on mouseclick cancel

Hi

Problem 1:

I am using a ajax modal popup and i wish to have several different ones on my site, for a picture gallery. From what I have understood i need to have a targetcontrolID and am therefor having a dummy button as the targetcontrolID. And then from codebehind i use .Show() on the modal popup to get it showing with dynamic content. However when I use this setup with code behind my button causes a postback that reloads the page, not a very nice result. any suggestions?

Problem 2:

When i get the modal popup up and running I get the cancel button working nice with the cancelcontrolID but i also wish to be able to close the modal popup by just clicking anywhere on the screen. Any suggestions?

/cheers

marcus

Problem 1:

You need to wrap your button in an updatepanel to get an ajax postback rather than a complete page reload. You could also use the Dynamic* properties of the modalpopup to use a web service method to dynamically load the modalpopup content.

Problem 2:

You could try hooking up an onclick handler to the background div that gets created by the modalpopup for the greyed out effect, which you can get access to using $find('ModalPopupBehaviorID')._backgroundElement. I have never tried this so not sure if it will work. Personally, I don't like the behaviour that you are proposing and would leave the modalpopup with just a close button.

Jason

Problem 1: I have now used a updatepanel and it works. there are some glitches though, i now have in my

<contentTemplate>

<%

if i >1 then

modalPopupExtender.Show()

endIf

%>

</contentTemplate>

and I also add 1 to i using viewstate... because otherwise i get the modalpopup the first time the updatepanel loads. is there a nicer way of solving this?

And also i would like the Trigger to be dynamic, since I have 3 different buttons that I all wish to trigger and update the same updatePanel, right now I have 3 different updatePanel that all does the same thing.

Problem 2: Solved it by letting the image that shows be the ancel button and the background just background. thought this worked all right so i havent tried your idea with the div

I wouldn't recommend doing any inline scripting...use code behind instead. I am not sure why you are using this method of incrementing i to show the modalpopup...can't you just make this call to the Show() method in the event handler of the control that fired the postback, e.g. button or link click?

You can update any updatepanel on the page at any time during the postback by calling YourUpdatePanel.Update(). This gives you full control over which parts of the page get updated even if the control that fired the ajax postback lives in a completely different updatepanel. I tend to use this coding method rather than hooking up triggers to the updatepanels.