How can i stop my client side list view from disappearing every time i poll a web service?

I've written a page that displays some live information that is provided by a web service and then bound to a client side list view (the binding follows this example:http://atlas.asp.net/docs/Walkthroughs/GetStarted/databind.aspx). This page is updated with a client side timer that ticks every 3 seconds. The idea is that the page updates seamlessly as the web service is polled every few seconds.

This almost works, but there seems to be a delay whilst the web service is fetching the information, during which no list view is rendered. This means that every 3 seconds the table disappears momentarily, and then the new information is shown correctly. This leads to the screen looking "flickery".

My question is how can i prevent this flickering from appearing whilst the data is retrieved from the web service?

Many thanks

-Matt

Bonus Information:

Here are some code examples to make this a bit clearer. This is the code that updates the page and retrives the information from the webservice:

function PageRefreshTick() { LotItemDataService.GetInProgressLots(inProgressCallComplete); }function inProgressCallComplete(result) { document.getElementById("InProgressLotsItemListView").control.set_data(result); }

And here are the relevant parts of the markup:

<asp:Content ID="Content2" ContentPlaceHolderID="Zone1Content" runat="server"> <timer id="PageRefreshTimer" interval="3000" enabled="true" tick="PageRefreshTick" /> <atlas:ScriptManagerProxy id="ScriptManagerProxy" runat="server"> <services> <atlas:ServiceReference Path="LotItemDataService.asmx" /> </services> </atlas:ScriptManagerProxy><div class="ListView"> <div id="InProgressLotsItemListView"> </div> <div style="display: none;"> <div id="InProgressLotsItemListView_layoutTemplate"> <div id="InProgressLotsItemListView_layoutTemplate_templateItem"> <table border="0"> <tbody id="InProgressLotsItemListView_layoutTemplate_LotItemParent"> <tr id="InProgressLotItem" style="height: 28px; width: 599px;"> <td style="height: 28px;"> <table cellpadding="0" cellspacing="0"> <tr> <td style="width: 16px;"> <img id="InProgressIsTracked" alt="Tracked" src="../App_Themes/BCADirect/images/icons/icontracker.gif" /> </td> <td style="width: 40px;"> <a id="InProgressLotId" class="BidSessionLink"></a> </td> <td style="width: 10px;">   </td> <td style="width: 40px;"> <img id="VehicleImage" alt="VehicleImage" /> </td> <td style="width: 10px">   </td> <td style="width: 250px;"> <table> <tr> <td> <a id="InProgressCompleteDescription" class="BidSessionLink" /> </td> </tr> <tr> <td> <label id="InProgressRegistration" class="BidSessionLabel" /> </td> </tr> </table> </td> <td style="width: 10px;"> </td> <td style="width: 300px;"> <table> <tr> <td> <label id="InProgressHighestBidder" class="BidSessionLabel" /> </td> </tr> <tr> <td> <label class="BidSessionLabel">Current price: </label> <label id="InProgressCurrentPrice" class="BidSessionLabel" /> </td> </tr> </table> </td> <td style="width: 10px;">   </td> <td> <label class="BidSessionLabel" id="PlaceBidLabel">Test</label> </td> <td style="width: 100px; height: 100px;"> <label id="InProgressTimeRemaining" class="BidSessionLabel" /> </td> </tr> </table> </td> </tr> </tbody> </table> <a id="InProgress_layoutTemplate_HyperLink1" href="http://www.google.com" class="BidSessionLink"> </a> </div> </div> </div></div> <listView id="InProgressLotsItemListView" itemTemplateParentElementId="InProgressLotsItemListView_layoutTemplate_LotItemParent"> <layoutTemplate> <template layoutElement="InProgressLotsItemListView_layoutTemplate" /> </layoutTemplate> <bindings> <binding dataContext="waitingLotsItemDataSource" dataPath="data" property="data" /> </bindings> <itemTemplate> <template layoutElement="InProgressLotItem"> <image id="InProgressIsTracked"> <bindings dataPath="IsTracked" property="visible" /> </image> <hyperLink id="InProgressLotId"> <bindings> <binding dataPath="Id" property="text" /> <binding dataPath="VehicleDetailsUrl" property="navigateURL" /> </bindings> </hyperLink> <hyperLink id="InProgressCompleteDescription"> <bindings> <binding dataPath="CompleteDescription" property="text" /> <binding dataPath="VehicleDetailsUrl" property="navigateURL" /> </bindings> </hyperLink> <label id="InProgressRegistration"> <bindings> <binding dataPath="Registration" property="text" /> </bindings> </label> <label id="InProgressTimeRemaining"> <bindings> <binding dataPath="TimeRemaining" property="text" /> </bindings> </label> <label id="InProgressHighestBidder"> <bindings> <binding dataPath="HighestBidUserName" property="text" /> </bindings> </label> <label id="InProgressCurrentPrice"> <bindings> <binding dataPath="CurrentPrice" property="text" /> </bindings> </label> <label id="PlaceBidLabel"> <bindings> <binding dataPath="BidNowText" property="text" /> </bindings> </label> </template> </itemTemplate> </listView></asp:Content>

Although i didn't receive any replies through this board, I received a number of emails from my companies .net community, including this one:

The problem with the list view is a known issue with the Atlas team (not that they seem to be actively trying to fix it). I am currently working n a custom list view to try and reduce the flickering.

So there are couple of options open that you could try :-

1.Buffer your data and only redraw the list view when there is a delta in your data reducing the flicker.

2.Use the XML script data binding but draw the list view manually using atlas client side JavaScript (Here at HMV I manually create the list view using divs or a table due to the flickering issues).

3.If you are not bound to a Atlas then try http://www.telerik.com/ who has some awesome ajaxable controls that you can use.

I tried rendering the output myself with JavaScript to the innerHTML of a div tag, and this indeed fixed the problem. However this in turn introduces its own set of problems further down the line as I wanted to use animations, and using this method I have no components in the xml portion of the markup.

I guess until the underlying listview big is fixed, there is no way to move forward with this?

-Matt

How can I get this ModalPopupExtender to work with Master Pages?

Here's some pretty simple code that displays a modal pop-up when a button is pressed:

1<%@dotnet.itags.org. Page Language="C#" AutoEventWireup="true" CodeFile="5_UpdateProgModal.aspx.cs" Inherits="_5_UpdateProgModal" %>23<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4<html xmlns="http://www.w3.org/1999/xhtml">
5<head runat="server">
6 <title>ASP.Net AJAX 201</title>
7 <style type="text/css">
8 .error{color: #f00;}
9 .message{color: #000;}
10 .updating{margin: 12px;}
11 .modalBackground
12 {
13 background-color:#00f;
14 filter:alpha(opacity=40);
15 opacity:0.40;
16 }
17 .updateProgress
18 {
19 border: solid 1px #333;
20 background-color:#fff;
21 position:absolute;
22 text-align: center;
23 width:160px;
24 height:60px;
25 }
26 .updateProgressMessage
27 {
28 margin:3px;
29 vertical-align: middle;
30 }
31 </style>
32</head>
33<body>
34 <form id="form1" runat="server">
35 <asp:ScriptManager ID="ScriptManager1" runat="server" AsyncPostBackTimeout="3" />
36 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
37 <ContentTemplate>
38 <div>
39 <asp:Button ID="btnShowTime" runat="server" Text="Show Time" OnClick="btnShowTime_Click" />
40 <asp:Button ID="btnError" runat="server" Text="Throw Error" OnClick="btnError_Click" />
41 <asp:Button ID="btnTimeout" runat="server" Text="Timeout" OnClick="btnTimeout_Click" />
42 </div>
43 <div>
44 <asp:Label ID="lblMessage" runat="server" Text="Label"></asp:Label>
45 </div>
46 </ContentTemplate>
47 </asp:UpdatePanel>
48 <asp:Panel ID="pnlProg" runat="server" CssClass="updateProgress" style="display:none">
49 <div class="updating">
50 <img src="images/ajax-loader.gif" alt="Processing..." />
51 <span class="updateProgressMessage">Processing...</span>
52 </div>
53 </asp:Panel>
54 <AjaxToolkit:ModalPopupExtender
55 ID="mdlProgress"
56 runat="server"
57 TargetControlID="pnlProg"
58 PopupControlID="pnlProg"
59 BackgroundCssClass="modalBackground"/>
60 </form>
61 <script type="text/javascript">
62 var prm = Sys.WebForms.PageRequestManager.getInstance();
63 prm.add_beginRequest(beginRequest);
64 prm.add_endRequest(endRequest);
65
66 function beginRequest(sender, args)
67 {
68 $find("mdlProgress").show();
69 }
70
71 function endRequest(sender, args)
72 {
73 $find("mdlProgress").hide();
74
75 var messageSpan = $get("<%= lblMessage.ClientID%>");
76 if (args.get_error() != undefined)
77 {
78 var errorMessage = args.get_error().message;
79 if (args.get_error() && args.get_error().name === 'Sys.WebForms.PageRequestManagerTimeoutException') {
80 errorMessage = "Your operation has timed out.";
81 }
82 args.set_errorHandled(true);
83 messageSpan.className = "error";
84 messageSpan.innerHTML = errorMessage;
85 }
86 }
87 </script>
88</body>
89</html>
90 

The code behind for the buttons just does a Threading.Sleep() for testing purposes so I'm not going to bother posting that code.

The problem is, I want to use this in a master page... However, when I put all this code in my master page, it doesn't work. I end up getting Javascript errors that I can't figure out. Any ideas as to why the above code works perfect yet won't work in a master page?

Hi,

Change

$find("mdlProgress")

to:

$find("<%=mdlProgress.ClientID%>")

Then, no matter master page or page, it works!

Best Regards,

The code posted by you is simple and handy and I like its simplicity for quick trials..

That was it.

I figured it was my lack of Javascript knowledge. :) Thanks so much!