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
No comments:
Post a Comment