Hello everyone. I have learned alot through this site and finally joined because I can't seem to find a fix for my problem and I was hoping that you guys could help me out.
I have a DropDownList with a SqlDataSource inside a panel with an AJAX rounder corners extender. It seems that the page shows itself without the extenders applied but then flashes and shows the extenders applied to the controls.
If I take the DropDownList and SqlDataSource out of the panel I know longer get the screen flash, but the extenders do take a second to show on the controls.
What is the fix for the Screen flash? And, If possible, how can I delay the display of the controls so that the AJAX extenders are applied before showing the controls?
Thanks for your help!
Rusty
Try putting Panel in a UpdatePanelThanks for the suggestion, but putting the Panel in an Update Panel didn't work. The screen still flashes. Here is my code with the update panel.
<
divid="master_page"><asp:UpdatePanelID="UpdatePanel1"runat="server"><ContentTemplate><cc1:RoundedCornersExtenderID="RoundedCornersExtender2"runat="server"TargetControlID="Panel2"Radius="10"></cc1:RoundedCornersExtender><asp:PanelID="Panel2"runat="server"Height="1000"Width="100%"BackColor="ForestGreen"><asp:SqlDataSourceID="SqlDataSource1"runat="server"ConnectionString="<%$ ConnectionStrings:MyConnectionString %>"SelectCommand=""></asp:SqlDataSource><asp:DropDownListID="InfoDDLB"runat="server"AutoPostBack="True"DataSourceID="SqlDataSource1"DataTextField="Name"DataValueField="ID"OnTextChanged="GetInfo"Width="100"><asp:ListItemSelected="True"Value="0">Select Something...</asp:ListItem></asp:DropDownList></asp:Panel></ContentTemplate></asp:UpdatePanel><asp:contentplaceholderid="ContentPlaceHolder1"runat="server"></asp:contentplaceholder></div>Anything else I can try?
1. When I put your code in UpdatePanel there wasno flash when I changed value in DropDownList.
2. The RoundedCornersExtender should have ajaxtoolkit prefix, unless you have changed tag attribute in your web.config file
3. Depending on how much data you are fetching in the dropdown list, it will take longer to apply rounded corners effect.
The simple reason is javascript executed by rounded corner starts executing after you panel is completely loaded and size (height and width) is determined. Also, the more javascript/ajax calls you use the slower it gets, as javascript gets slower and slower as size increases.
PS: You can turn off debugging in web.config file by setting <compilation debug="false">. This will speed up Ajax scripts as they don't make any debug calls. And you won't see a delay.
2. I have the following entry in my web.config file for the AJAX controls:
<
addtagPrefix="cc1"namespace="AjaxControlToolkit"assembly="AjaxControlToolkit"/>3. I am not fetching anything into the dropdown list.
I also turned off the debugger.
I have done further investigation and it turns out that I don't need the SqlDataSource tied to the DropDownList to get the flash. The only control that makes the screen flash is this DropDownList. When replaced with a textbox or button there is no flash. The first Example below shows the flash when the page is loaded and the "Push Me" Butotn is clicked. The second example has the DropDownList outside of the Panel and doesn't have a flash when the page loads or the "Push Me" button is clicked.
EXAMPLE 1: (SCREEN FLASH - OnPage load and 'Push Me' Button Clicked)
<%@. Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" id="ScriptManager1" />
<div align="right" style="margin-right: 10px">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<cc1:DropShadowExtender ID="DropShadowExtender1" Opacity=".5" Radius="2" TargetControlID="Panel5" runat="server" Rounded="True">
</cc1:DropShadowExtender>
<asp:Panel backcolor="orange" id="Panel5" runat="server" Height="100px" Width="200px">
<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" Text="Push Me" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
EXAMPLE 2: (NO SCREEN FLASH - OnPage load and 'Push Me' Button Clicked)
<%@. Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" id="ScriptManager1" />
<div align="right" style="margin-right: 10px">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<cc1:DropShadowExtender ID="DropShadowExtender1" Opacity=".5" Radius="2" TargetControlID="Panel5" runat="server" Rounded="True">
</cc1:DropShadowExtender>
<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList>
<asp:Panel backcolor="orange" id="Panel5" runat="server" Height="100px" Width="200px">
<asp:Button ID="Button1" runat="server" Text="Push Me" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Thanks for your help!
Rusty
I tried your code same results both times no flash. Although as I said before, it takes fraction of a second(1/10 or even less) to apply the DropDownExtender (being a javascript). It is not noticable at all.
What browser you are using? I've read many complaints related to AJAX and IE 6. I'm using IE 7.
Please try with other browsers and see you have the same issue.
Let me know. Will be glad to help you out.
Yes, that's what it was. I updated from IE6 to IE7 on one of my computers and tried the page and there is no flashing issues. So, is there a recommendation for a solution for IE6 users when viewing my website?
Your help is greatly appreciated!
-Rusty
for IE 6 you can use filter instead of RoundedExtendedCorners.
<DIV ID="oFilterDIV" STYLE="cursor:hand;height:160px; padding:10px; font:bold 13pt verdana;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5,
Color='gray', Positive='true')" onclick="fnDepress();">
This is the DIV content.</DIV>
More about filters is herehttp://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/dropshadow.asp
Now on server-side you can check Browser's version (Request.Browser.Version) and then enable/disable RoundedCornerExtender as well as set CSSClass or Style property of the Asp:Panel control to use or not use filters.
Filters are specific to IE. They don't work in FireFox or other browsers.
