views:

5

answers:

0

I'm using control and I would like to show a spinning wheel or loading bar when the data is being retrieved.

I've looked around online and found this: - http://mattberseth.com/blog/2007/05/ajaxnet_example_using_an_updat.html

I've tried adapting this but the datalist stopped appearing when I add and its content.

Here is the code:

<asp:UpdatePanel ID="updatePanel" runat="server">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnSearch" EventName="Click" />
    </Triggers>
    <ContentTemplate>     

        <AjaxData:DataList ID="DataList1" runat="server" DataKeyField="ID" CssClass="DataWebControlStyle"
            ItemDataBoundEvent="onItemDataBound">
            <AlternatingItemStyle CssClass="AlternatingRowStyle" />
            <ItemStyle CssClass="RowStyle" />
            <HeaderStyle CssClass="HeaderStyle" />
            <FooterStyle CssClass="FooterStyle" />
            <HeaderTemplate>
            </HeaderTemplate>
            <ItemTemplate>
                <div class="ListItemContainer">
                    <div class="ListTitle">
                        <a href="#"><span id="spnListTitle"></span></a>
                    </div>
                    <div class="ListHighlight">
                        <span id="spnListHighlight"></span>
                    </div>
                    <div class="ListHeadline">
                        <span id="spnListHeadline"></span>
                    </div>
                </div>
            </ItemTemplate>
            <SeparatorTemplate>
            </SeparatorTemplate>
        </AjaxData:DataList>    

    </ContentTemplate>                            
</asp:UpdatePanel>                                   

<ajaxToolkit:UpdatePanelAnimationExtender ID="upae" BehaviorID="animation"  runat="server" TargetControlID="updatePanel">
    <Animations>                            
        <OnUpdating>
            <Parallel duration="0">
                <%-- disable the search button --%>                       
                <EnableAction AnimationTarget="btnSearch" Enabled="false" />
             </Parallel>
        </OnUpdating>
    </Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>    

<asp:Button ID="btnSearch" runat="server" Width="75" Text="Search" />