Solved ajax Update Panel/ Update Progress with Datalist

Posted on 2009-02-15
Last Modified: 2013-11-07
Hi there,

I have a simple datalist, however i will be loading in alot of images into them, so when during the page_load section, the images will take awhile to load. Instead of allowing my visitors to see the images loading 1 by 1, i want to set something like a buffer or wait time, so that during this period my visitors will see the loading words or an gif animation using ajax update panel and update progress control. And once all the images are loading it will show the full album right away.

However the main problem is that my datalist is loading in page_load time. So i am not sure what to fill up at this line of code to make it work:
            <asp:AsyncPostBackTrigger  />

they require a contolid and event id, how should i put in the page_load event here?

Am i doing this the right way? Can i use ajax controls in this example? need some advice thanks.

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>


    <asp:UpdatePanel ID="UpdatePanel1" runat="server">



            <asp:AsyncPostBackTrigger  />





            <asp:DataList ID="dlPhotos" runat="server" RepeatColumns="3" RepeatDirection="Horizontal" HorizontalAlign="Left" CellPadding="5" CellSpacing="1">       


                    <asp:ImageButton ID="imgItem" runat="server" ImageUrl='<%# String.Concat("~/photos/", Eval("imagePath")) %>' PostBackUrl='<%# "PhotoGallery.aspx?albumId="+DataBinder.Eval(Container.DataItem, "albumId")%>' />

                    <br />

                    <asp:Label ID="lblAlbumName" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "albumName") %>'></asp:Label>

                    <br />

                    <asp:Label ID="lblalbumId" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "albumId") %>' Visible="False"></asp:Label>






     <asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel1" runat="server">

        <ProgressTemplate>Please wait... Loading Datalist...</ProgressTemplate> 




protected void Page_Load(object sender, EventArgs e)




    private void PopulateAlbum()


        if (Request.QueryString["categoryId"] != null)


            int categoryId = Convert.ToInt32(Request.QueryString["categoryId"]);

            PagedDataSource objPds = new PagedDataSource();

            DataView dv = new DataView(AlbumAccess.GetAlbumAllViaCategoryId(categoryId));

            objPds.DataSource = dv;

            dlPhotos.DataSource = objPds;




Open in new window

Question by:applefruit
    LVL 15

    Expert Comment

    No, you can't intercept the Page_Load function in the Triggers, that section is only for controls doing postbacks at runtime.

    You would want to use javascript to display a div layer over the datalist that basically hides it, and displays "Loading...", and then after the images are loaded you would hide the div layer.

    You could put a javascript function in the body OnLoad function to hide the div layer.

    Author Comment

    hi thanks for the reply. Sorry but I have no idea how to go  about
    Doing the java script stuff that you jusy mentioned. Could you give me an example and some tutorials that I can read to further understand how to implement it? Thanks
    LVL 15

    Accepted Solution


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    6 Surprising Benefits of Threat Intelligence

    All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

    This document covers how to connect to SQL Server and browse its contents.  It is meant for those new to Visual Studio and/or working with Microsoft SQL Server.  It is not a guide to building SQL Server database connections in your code.  This is mo…
    It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
    This video discusses moving either the default database or any database to a new volume.
    Get a first impression of how PRTG looks and learn how it works.   This video is a short introduction to PRTG, as an initial overview or as a quick start for new PRTG users.

    761 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now