Hi all,
I have following problem: On page I have an update panel with async post back trigger and updatePanelAnimationExtender from ajax control toolkit. I want to display a part from page, and after page is loaded, then automatically update gridview with an ajax and show progress panel. Everythink works fine, gridview is updated, but no progress image is displayed.
When I manually click on "refresh button", I get refreshed update panel and progress image is showed too. Can somebody help me, how to display progress panel automaticaly on page refresh?
here is my code:
master page:<form id="form1" runat="server"><ajaxToolkit:ToolkitScriptManager runat="server" ID="ScriptManager1"></ajaxToolkit:ToolkitScriptManager><asp:Content ID="Content2" ContentPlaceHolderID="body" Runat="Server"><script type="text/javascript">
function onUpdating(progressContainerElementId) {
// get the update progress div
var updateProgressDiv = $get(progressContainerElementId);
// make it visible
updateProgressDiv.style.display = '';
}
function onUpdated(prgrsEmployees) {
// get the divImage
var panelProg = $get(prgrsEmployees);
// set it to invisible
panelProg.style.display = 'none';
}</script><h1><asp:Literal ID="ltEmployeesTitle" runat="server" Text="<%$Resources:Employees,listTitle %>" /></h1><asp:DropDownList ID="drpEmployyesCountPerPage" runat="server"><asp:ListItem Value="5" Text="5" /></asp:DropDownList><asp:UpdatePanel ID="upEmployees" runat="server"><ContentTemplate><div id="prgrsEmployees" style="position:absolute; width:100%; height:100%; text-align:center; display:none;"><img src="Images/progress.gif" /></div><asp:GridView ID="grdEmployees" runat="server" ...><Columns>...</Columns></asp:GridView><asp:Button ID="btnShowAddEmployee" runat="server" Text="<%$Resources:Employees,add_acount %>" /></ContentTemplate><Triggers><asp:AsyncPostBackTrigger ControlID="btnUpdateEmployees" EventName="Click" /></Triggers></asp:UpdatePanel><ajaxToolkit:UpdatePanelAnimationExtender ID="prgEmployees" TargetControlID="upEmployees" runat="server"><Animations><OnUpdating><Parallel duration="0"><ScriptAction Script="onUpdating('prgrsEmployees');" /></Parallel></OnUpdating><OnUpdated><Parallel duration="0"><ScriptAction Script="onUpdated('prgrsEmployees');" /></Parallel></OnUpdated></Animations></ajaxToolkit:UpdatePanelAnimationExtender><asp:Button ID="btnUpdateEmployees" runat="server" Text="Update Employees" OnClick="btnUpdateEmployees_Click" style="display:none;" /><script type="text/javascript">$(document).ready(function () {$(<%= btnUpdateEmployees.ClientID %>).click(); //i tried .trigger("click") too, but with the same result
});</script>
code behind:
public partial class dashboard : BasePage
{
int totalEmployeesCount = -1;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
if (totalEmployeesCount < 0)
{
totalEmployeesCount = DataAccount.GetAllSubAccountsCount();
}
}
}
private void RefreshEmployees()
{
List<Employee> employees = Get employees from DB;
grdEmployees.DataSource = employees;
grdEmployees.DataBind();
}
protected void btnUpdateEmployees_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
RefreshEmployees();
}
}