Hi,
Please follow these steps:
1. Right click the AJAXUploader, then select "Edit Template -> Layout Template" from the context menu. This should enter template editing mode. Right click the control again and select "End Template Editing", this should leave template editing mode;
2. Switch to HTML view, you should see step 1 has generated a default layout template for you. The HTML code should be something like this:
Code: HTML/ASPX
<eo:AJAXUploader ....>
<LayoutTemplate>
......
<LayoutTemplate>
</eo:AJAXUploader>
Content inside LayoutTemplate defines the uploader's UI layout.
3. Find the following segment inside LayoutTemplate:
Code: HTML/ASPX
<tr>
<td>
<eo:ProgressBar id="ProgressBar1"
runat="server" ControlSkinID="Windows_XP">
</eo:ProgressBar>
</td>
</tr>
Change it to:
Code: HTML/ASPX
<tr>
<td>
<div id="divProgress" style="display:none">
<eo:ProgressBar id="ProgressBar1"
runat="server" ControlSkinID="Windows_XP">
</eo:ProgressBar>
</div>
</td>
</tr>
Note the newly added div around the ProgressBar control. "display:none" is used at here to hide the ProgressBar when the page loads.
4. Handle the AJAXUploader's ClientSideOnStart and ClientSideOnDone event:
Code: HTML/ASPX
script type="text/javascript">
function on_uploader_start()
{
document.getElementById("divProgress").style.display = "block";
}
function on_uploader_done()
{
document.getElementById("divProgress").style.display = "none";
}
</script>
<div id="something" style="display:none">
some text
</div>
<eo:AJAXUploader
ClientSideOnStart="on_uploader_start"
ClientSideOnDone="on_uploader_done" ...>
....
</eo:AJAXUploader>
This instructs the uploader to call on_uploader_start when it starts upload, which displays "divProgress"; and call on_uploader_done when it finishes upload, which hides "divProgress".
Hope this helps. Please feel free to let us know if you have any more questions.
Thanks!