Hi Andersen,
Thank you for contacting Syncfusion support.
The requested scenario to show and hide the WaitingPopup control on loading grid data can be achieved using show() and hide() APIs in client side scripts. Obtain the WaitingPopup control element in client side script to show the popup element on BeginRequestHandler() and hide the popup under EndRequestHandler(), which works only with <UpdatePanel>. BeginRequestHandler() is called before the post back to load data and returns to EndRequestHandler() after post back completes. Please refer the following code snippet,
<code>
[ASPX]
<asp:UpdatePanel ID="Panel1" runat="server">
<ContentTemplate>
<ej:WaitingPopup runat="server" ID="waiting1" ShowImage="true" Text="Grid data loading"></ej:WaitingPopup>
<ej:Grid runat="server" ID="Grid1" AllowPaging="true">
<Columns>
<ej:Column Field="FirstName" HeaderText="First Name" />
<ej:Column Field="LastName" HeaderText="Last Name" />
<ej:Column Field="Email" HeaderText="Email" />
</Columns>
</ej:Grid>
<asp:Button runat="server" ID="btn1" ClientIDMode="Static" Text="Grid data" OnClick="btn1_Click" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btn1" />
</Triggers>
</asp:UpdatePanel>
[Script]
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function BeginRequestHandler() {
// to show popup on initiating postback
var popupObj = $("#<%=waiting1.ClientID%>").data("ejWaitingPopup");
popupObj.show();
}
function EndRequestHandler() {
// hide popup after postback
var popupObj = $("#<%=waiting1.ClientID%>").data("ejWaitingPopup");
popupObj.hide();
}
</script>
</code>
Please download the simple sample that depicts the requested behavior from below link:
https://www.syncfusion.com/downloads/support/forum/118533/WaitingPopup_f118635-848105630.zip
Please let us know if you have any other queries.
Regards,
Ezhil S